Merge pull request #217 from unipept/fix/download-treeviews

Add download functionality to table treeviews
unipept · Mar 9, 2023 · 6b96044 · 6b96044
2 parents bf38731 + c76b6ca
commit 6b96044
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 7 deletions.
diff --git a/src/components/tables/functional/EcTable.vue b/src/components/tables/functional/EcTable.vue
@@ -64,6 +64,7 @@
                     <VisualizationControls
                         ref="treeview"
                         caption="Scroll to zoom, drag to pan, click a node to expand, right click a node to set as root"
+                        internalDownload
                         :loading="!ncbiTree"
                     >
                         <template #visualization>
@@ -112,6 +113,12 @@ const props = defineProps<Props>();
 
 const expanded = ref<EcTableItem[]>([]);
 
+const treeAvailable = new Map<string, DataNodeLike>();
+
+const highlightedTreeProcessor = new HighlightedTreeProcessor();
+
+const computingTree = ref(false);
+
 const headers = [
     {
         text: "Peptides",
@@ -140,12 +147,6 @@ const headers = [
     }
 ];
 
-const treeAvailable = new Map<string, DataNodeLike>();
-
-const highlightedTreeProcessor = new HighlightedTreeProcessor();
-
-const computingTree = ref(false);
-
 const highlightColor: string = "#ffc107";
 const highlightColorFunc = (d: any) => d.extra.included ? highlightColor : "lightgrey";
 const linkStrokeColor = ({ target: d }: any) => highlightColorFunc(d.data);

diff --git a/src/components/tables/functional/GoTable.vue b/src/components/tables/functional/GoTable.vue
@@ -64,6 +64,7 @@
                     <VisualizationControls
                         ref="treeview"
                         caption="Scroll to zoom, drag to pan, click a node to expand, right click a node to set as root"
+                        internalDownload
                         :loading="!ncbiTree"
                     >
                         <template #visualization>

diff --git a/src/components/tables/functional/InterproTable.vue b/src/components/tables/functional/InterproTable.vue
@@ -72,6 +72,7 @@
                     <VisualizationControls
                         ref="treeview"
                         caption="Scroll to zoom, drag to pan, click a node to expand, right click a node to set as root"
+                        internalDownload
                         :loading="!ncbiTree"
                     >
                         <template #visualization>

diff --git a/src/components/visualizations/VisualizationControls.vue b/src/components/visualizations/VisualizationControls.vue
@@ -1,5 +1,5 @@
 <template>
-    <div style="height: 100%; position: relative; background-color: white;">
+    <div style="height: 100%; position: relative; background-color: white;" ref="container">
         <div v-if="!loading" class="controlbar" :style="overlap ? 'position: absolute' : 'position: relative'">
             <span class="align-self-center me-1 text-caption">
                 {{ caption }}
@@ -24,6 +24,10 @@
                 <v-icon>mdi-download</v-icon>
             </v-btn>
 
+            <v-btn v-else-if="internalDownload && !hideDownload" class="ma-1" x-small fab @click="downloadOpen = true" :elevation="0">
+                <v-icon>mdi-download</v-icon>
+            </v-btn>
+
             <v-btn v-if="reset" class="ma-1" x-small fab @click="reset" :elevation="0">
                 <v-icon>mdi-restore</v-icon>
             </v-btn>
@@ -36,15 +40,27 @@
         <div :style="overlap ? 'height: 100%;' : 'height: calc(100% - 40px); position: relative'">
             <slot name="visualization"></slot>
         </div>
+
+        <DownloadImageModal 
+            :openModal="downloadOpen"
+            :imageSource="element()"
+            @close="downloadOpen = false"
+            supportsSvg
+        />
     </div>
 </template>
 
 <script setup lang="ts">
+import SvgImageSource from '@/logic/util/image/SvgImageSource'
+import { ref } from 'vue'
+import { DownloadImageModal } from '../modals'
+
 export interface Props {
     caption: string
     loading: boolean
     overlap?: boolean
     hideDownload?: boolean
+    internalDownload?: boolean
     settings?: boolean
 
     rotate?: () => void
@@ -56,8 +72,17 @@ export interface Props {
 withDefaults(defineProps<Props>(), {
     overlap: true,
     hideDownload: false,
+    internalDownload: false,
     settings: false
 });
+
+// Will currently only work for svg images
+const downloadOpen = ref(false)
+
+const container = ref<HTMLElement | null>(null);
+
+// @ts-ignore
+const element = () => new SvgImageSource(container.value?.querySelector("svg"));
 </script>
 
 <style scoped>