Merge pull request #80 from alan-wu/split-screen

Split screen
ABI-Software · Apr 7, 2021 · 2571223 · 2571223
2 parents 75a65a7 + 6e686ef
commit 2571223
Show file tree

Hide file tree

Showing 21 changed files with 2,082 additions and 905 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "0.1.29",
+  "version": "0.1.30-splitscreen-beta-4",
   "scripts": {
     "serve": "vue-cli-service serve --port 8081",
     "build": "vue-cli-service build --mode prod",
@@ -21,10 +21,11 @@
   ],
   "dependencies": {
     "@abi-software/flatmapvuer": "^0.1.30",
+    "@abi-software/map-side-bar": "^1.0.0",
     "@abi-software/maptooltip": "^0.1.13",
     "@abi-software/plotvuer": "^0.2.41",
     "@abi-software/scaffoldvuer": "^0.1.45",
-    "@abi-software/svg-sprite": "^0.1.11",
+    "@abi-software/svg-sprite": "^0.1.12",
     "@soda/get-current-script": "^1.0.2",
     "core-js": "^3.3.2",
     "d3-time-format": "^3.0.0",
@@ -33,7 +34,7 @@
     "lodash": "^4.17.20",
     "postcss-prefix-selector": "^1.7.2",
     "shepherd.js": "^7.1.5",
-    "splitpanes": "^2.2.1",
+    "splitpanes": "^2.3.6",
     "svg-inline-loader": "^0.8.2",
     "vue": "^2.6.10",
     "vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0",

diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,8 @@
 <template>
 
   <div id="app">
+    <link rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap">
     <svg-sprite-color />
     <el-popover
       placement="bottom"
@@ -10,7 +12,7 @@
       :appendToBody=false
       >
       <div class="options-container">
-        <el-row :gutter="20">
+        <el-row class="row" :gutter="20">
           <el-button @click="saveSettings()" size="mini">Save Settings</el-button>
           <el-button @click="restoreSettings()" size="mini">Restore Settings</el-button>
           <el-button @click="getShareableURL()" size="mini">Get Link</el-button>
@@ -108,17 +110,13 @@ export default {
 </script>
 
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Asap&display=swap');
-
 #app {
   height:100%;
   width: 100%;
   position:absolute;
-}
-body {
   font-family: "Asap",sans-serif;
-  line-height: 1.5rem;
 }
+
 .map-app {
   position:absolute;
   height: calc(100% - 104px);
@@ -137,15 +135,14 @@ body {
   z-index:1000;
 }
 
-.el-row {
+.row {
   margin-bottom: 5px;
   &:last-child {
     margin-bottom: 0;
   }
 }
 
 .options-container{
-
   text-align: center;
 }
 </style>
diff --git a/src/components/ContentVuer.vue b/src/components/ContentVuer.vue
@@ -15,10 +15,9 @@
       <ScaffoldVuer v-else-if="entry.type === 'Scaffold'" :state="entry.state" :url="entry.resource"
         @scaffold-selected="resourceSelected(entry.type, $event)" ref="scaffold"
         :backgroundToggle=true :traditional=true :helpMode="helpMode"
-        :render="entry.mode !== 'minimised'" :displayMinimap=false :displayMarkers=false />
+        :render="visible" :displayMinimap=false :displayMarkers=false />
       <PlotVuer v-else-if="entry.type === 'Plot'" :url="entry.resource"
       :plotType="entry.plotType" :helpMode="helpMode" style="overflow: hidden"></PlotVuer>
-      <SideBar v-else-if="entry.type === 'Search'" :visbility="true" :isDrawer="false"  :entry="entry.entry" class="search"></SideBar>
       <IframeVuer v-else-if="entry.type === 'Iframe'" :url="entry.resource" />
     </div>
   </div>
@@ -30,7 +29,6 @@ import EventBus from './EventBus';
 import DatasetHeader from './DatasetHeader';
 import IframeVuer from './Iframe';
 import {getAvailableTermsForSpecies} from './SimulatedData.js';
-import SideBar from './SideBar'
 import { FlatmapVuer, MultiFlatmapVuer } from '@abi-software/flatmapvuer';
 import '@abi-software/flatmapvuer/dist/flatmapvuer.css';
 import { ScaffoldVuer } from '@abi-software/scaffoldvuer';
@@ -48,11 +46,14 @@ export default {
      * the required viewing.
      */
     entry: Object,
+    visible: {
+      type: Boolean,
+      default: true
+    },
   },
   components: {
     DatasetHeader,
     IframeVuer,
-    SideBar,
     FlatmapVuer,
     MultiFlatmapVuer,
     ScaffoldVuer,
@@ -124,7 +125,7 @@ export default {
         width: "100%",
         bottom: "0px",
       },
-      helpMode: false
+      helpMode: false,
     }
   },
   created: function() {
@@ -142,6 +143,10 @@ export default {
       this.startHelp(id);
     })
   },
+  deactivated: function() {
+    let state = this.getState();
+    this.$emit("stateUpdated", this.entry.id, state);
+  },
 };
 </script>
 
@@ -167,3 +172,6 @@ export default {
 }
 
 </style>
+
+<style src="@/../assets/mapicon-species-style.css">
+</style>
diff --git a/src/components/DatasetCard.vue b/src/components/DatasetCard.vue
@@ -87,7 +87,8 @@ export default {
           label: capitalise(this.entry.organs[0]),
           resource: this.getScaffoldPath(this.discoverId, this.version, this.entry.scaffolds[0].dataset.path),
           title: "View 3D scaffold",
-          type: "Scaffold"
+          type: "Scaffold",
+          discoverId: this.discoverId,
         }
         EventBus.$emit("PopoverActionClick", action)
     },
@@ -96,7 +97,8 @@ export default {
           label: capitalise(this.entry.organs[0]),
           resource: this.getFileFromPath(this.discoverId, this.version, this.entry.csvFiles[0].dataset.path),
           title: "View plot",
-          type: "Plot"
+          type: "Plot",
+          discoverId: this.discoverId,
         }
         EventBus.$emit("PopoverActionClick", action)
     },

diff --git a/src/components/DatasetHeader.vue b/src/components/DatasetHeader.vue
@@ -97,13 +97,3 @@ export default {
   font-size: 10px;
 }
 </style>
-<style scoped src="element-ui/lib/theme-chalk/link.css">
-</style>
-<style scoped src="element-ui/lib/theme-chalk/icon.css">
-</style>
-<style scoped src="element-ui/lib/theme-chalk/card.css">
-</style>
-<style scoped src="element-ui/lib/theme-chalk/button.css">
-</style>
-<style scoped src="element-ui/lib/theme-chalk/select.css">
-</style>