NN-618 rename components of toolbar and adjust new path

BackofenLab · Dec 1, 2024 · 22942fa · 22942fa
1 parent d03dbd0
commit 22942fa
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 31 deletions.
diff --git a/frontend/src/components/enrichment/HeatmapTool.vue b/frontend/src/components/enrichment/HeatmapTool.vue
@@ -48,7 +48,7 @@
 
 <script>
 import PathwayHeatmap from "@/components/enrichment/heatmap/PathwayHeatmap.vue";
-import ListActionHeader from "@/components/ListActionHeader.vue";
+import ListActionHeader from "@/components/verticalpane/ListActionHeader.vue";
 
 export default {
   name: "HeatmapTool",

diff --git a/frontend/src/components/enrichment/heatmap/PathwayHeatmap.vue b/frontend/src/components/enrichment/heatmap/PathwayHeatmap.vue
@@ -77,7 +77,7 @@
 import * as d3 from "d3";
 import { nextTick } from "vue";
 import { agnes } from "ml-hclust";
-import EmptyState from "@/components/EmptyState.vue";
+import EmptyState from "@/components/verticalpane/EmptyState.vue";
 import heatmapDendro from "@/components/enrichment/heatmap/drawHeatmap.js";
 import SnapshotHeatmap from "@/components/enrichment/heatmap/SnapshotHeatmap.vue";
 

diff --git a/frontend/src/components/toolbar/CitationToolBar.vue b/frontend/src/components/toolbar/CitationToolBar.vue
@@ -38,14 +38,14 @@
         <img src="@/assets/toolbar/logout.png" alt="3D Icon" />
       </li>
     </ul>
-    <MenuWindow
+    <!-- <MenuWindow
       v-show="tools_active"
       v-on:mouseover="tools_active = true"
       v-on:mouseleave="tools_active = false"
       :tools_active="tools_active"
       :mode="mode"
       @tools_active_changed="tools_active = $event"
-    ></MenuWindow>
+    ></MenuWindow> -->
     <SelectionList
       v-show="selection_active"
       :selection_active="selection_active"
@@ -66,15 +66,15 @@
 </template>
 
 <script>
-import MenuWindow from "@/components/toolbar/windows/MenuWindow.vue";
+// import MenuWindow from "@/components/toolbar/windows/MenuWindow.vue";
 import ProteinList from "@/components/toolbar/modules/ProteinList.vue";
 import SelectionList from "@/components/toolbar/modules/SelectionList.vue";
 
 export default {
   name: "CitationToolBar",
   props: ["data", "active_subset"],
   components: {
-    MenuWindow,
+    // MenuWindow,
     ProteinList,
     SelectionList,
   },

diff --git a/frontend/src/components/toolbar/TermToolBar.vue b/frontend/src/components/toolbar/TermToolBar.vue
@@ -38,14 +38,14 @@
         <img src="@/assets/toolbar/logout.png" alt="3D Icon" />
       </li>
     </ul>
-    <MenuWindow
+    <!-- <MenuWindow
       v-show="tools_active"
       v-on:mouseover="tools_active = true"
       v-on:mouseleave="tools_active = false"
       :tools_active="tools_active"
       :mode="mode"
       @tools_active_changed="tools_active = $event"
-    ></MenuWindow>
+    ></MenuWindow> -->
     <SelectionList
       v-show="selection_active"
       :selection_active="selection_active"
@@ -66,15 +66,15 @@
 </template>
 
 <script>
-import MenuWindow from "@/components/toolbar/windows/MenuWindow.vue";
+// import MenuWindow from "@/components/toolbar/windows/MenuWindow.vue";
 import ProteinList from "@/components/toolbar/modules/ProteinList.vue";
 import SelectionList from "@/components/toolbar/modules/SelectionList.vue";
 
 export default {
   name: "TermToolBar",
   props: ["data", "active_subset"],
   components: {
-    MenuWindow,
+    // MenuWindow,
     ProteinList,
     SelectionList,
   },

diff --git a/frontend/src/components/toolbar/modules/ExportList.vue b/frontend/src/components/toolbar/modules/ExportList.vue
@@ -0,0 +1,27 @@
+<template>
+  <ul class="flex flex-col gap-1.5 p-0 m-0 list-none">
+    <li class="flex items-center justify-between gap-2 dark:text-[#c3c3c3]">
+      <ExportGraphImage :mode="mode"></ExportGraphImage>
+    </li>
+    <li v-if="mode == 'protein'" class="flex items-center justify-between gap-2 dark:text-[#c3c3c3]">
+      <ExportGraphData :mode="mode" :gephi_data="gephi_data" :ensembl_name_index="ensembl_name_index"></ExportGraphData>
+    </li>
+  </ul>
+</template>
+
+<script>
+import ExportGraphImage from "@/components/toolbar/modules/ExportGraphImage.vue";
+import ExportGraphData from "@/components/toolbar/modules/ExportGraphData.vue";
+
+export default {
+  name: "ExportList",
+  props: ["mode", "gephi_data", "ensembl_name_index"],
+  components: {
+    ExportGraphImage,
+    ExportGraphData,
+  },
+  data() {
+    return {};
+  },
+};
+</script>
diff --git a/frontend/src/components/toolbar/modules/SelectionList.vue b/frontend/src/components/toolbar/modules/SelectionList.vue
@@ -249,7 +249,7 @@
 export default {
   name: "SelectionList",
   props: ["data", "mode", "active_subset", "active_term", "selection_active"],
-  emits: ["selection_active_changed"],
+  // emits: ["selection_active_changed"],
   data() {
     return {
       // once: true,

diff --git a/frontend/src/components/toolbar/modules/SettingList.vue b/frontend/src/components/toolbar/modules/SettingList.vue
@@ -0,0 +1,35 @@
+<template>
+  <ul class="list-none p-0 m-0 flex flex-col divide-y dark:divide-[#343b4c]">
+    <ConnectedGraph :mode="mode"></ConnectedGraph>
+    <ShowModules :mode="mode"></ShowModules>
+    <ModuleSelection :mode="mode"></ModuleSelection>
+    <EdgeOpacity :mode="mode"></EdgeOpacity>
+    <NodeLabelSelect :mode="mode"></NodeLabelSelect>
+    <FDRValue v-if="mode == 'term'"></FDRValue>
+  </ul>
+</template>
+
+<script>
+import FDRValue from "@/components/toolbar/modules/FDRValue.vue";
+import NodeLabelSelect from "@/components/toolbar/modules/NodeLabelSelect.vue";
+import ConnectedGraph from "@/components/toolbar/modules/ConnectedGraph.vue";
+import ShowModules from "@/components/toolbar/modules/ShowModules.vue";
+import EdgeOpacity from "@/components/toolbar/modules/EdgeOpacity.vue";
+import ModuleSelection from "@/components/toolbar/modules/ModuleSelection.vue";
+
+export default {
+  name: "SettingList",
+  props: ["tools_active", "mode", "gephi_data", "ensembl_name_index"],
+  components: {
+    EdgeOpacity,
+    NodeLabelSelect,
+    ConnectedGraph,
+    ModuleSelection,
+    FDRValue,
+    ShowModules,
+  },
+  data() {
+    return {};
+  },
+};
+</script>
diff --git a/frontend/src/components/verticalpane/TabPanelOption.vue b/frontend/src/components/verticalpane/TabPanelOption.vue
@@ -1,21 +1,8 @@
 <template>
   <TabPanels class="h-[calc(100%-34px)] flex flex-col !p-0 !px-3 overflow-auto">
-    <TabPanel class="flex-1" value="set">
-      <PathwaySet :gephi_data="gephi_data" :api="api" :mode="mode"></PathwaySet>
-    </TabPanel>
-
-    <TabPanel class="flex-1" value="layers">
-      <PathwayLayers :active_termlayers="active_termlayers" :gephi_data="gephi_data" />
-    </TabPanel>
-
-    <TabPanel class="flex-1" value="difexp" v-if="dcoloumns">
-      <DifExpMenu :active_decoloumn="active_decoloumn" :gephi_data="gephi_data" />
-    </TabPanel>
-
     <TabPanel class="flex-1" value="list">
       <PathwayList :gephi_data="gephi_data" :terms="terms" :await_load="await_load"
-        :favourite_pathways="favourite_pathways" 
-        @favourite_pathways_changed="favourite_pathways = $event"
+        :favourite_pathways="favourite_pathways" @favourite_pathways_changed="favourite_pathways = $event"
         @filtered_terms_changed="filtered_terms = $event"></PathwayList>
     </TabPanel>
 
@@ -24,13 +11,26 @@
       </PathwayTools>
     </TabPanel>
 
+    <TabPanel class="flex-1" value="citation">
+      <CitationMenu :active_node="active_node" :active_background="active_background"></CitationMenu>
+    </TabPanel>
+
+    <TabPanel class="flex-1" value="set">
+      <PathwaySet :gephi_data="gephi_data" :api="api" :mode="mode"></PathwaySet>
+    </TabPanel>
+
+    <TabPanel class="flex-1" value="layers">
+      <PathwayLayers :active_termlayers="active_termlayers" :gephi_data="gephi_data" />
+    </TabPanel>
+
     <TabPanel class="flex-1" value="heatmap">
-      <HeatmapTool :mode="mode" :gephi_data="gephi_data" :filtered_terms="filtered_terms" :favourite_pathways="favourite_pathways">
+      <HeatmapTool :mode="mode" :gephi_data="gephi_data" :filtered_terms="filtered_terms"
+        :favourite_pathways="favourite_pathways">
       </HeatmapTool>
     </TabPanel>
 
-    <TabPanel class="flex-1" value="citation">
-      <CitationMenu :active_node="active_node" :active_background="active_background"></CitationMenu>
+    <TabPanel class="flex-1" value="difexp" v-if="dcoloumns">
+      <DifExpMenu :active_decoloumn="active_decoloumn" :gephi_data="gephi_data" />
     </TabPanel>
   </TabPanels>
 </template>
@@ -52,9 +52,9 @@ export default {
     PathwayList,
     PathwayTools,
     PathwaySet,
-    HeatmapTool, 
-    PathwayLayers, 
-    DifExpMenu, 
+    HeatmapTool,
+    PathwayLayers,
+    DifExpMenu,
     CitationMenu
   },
   data() {