@abi-software/flatmapvuer 1.1.0-beta.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.1.0-beta.2",
+  "version": "1.1.0",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -43,7 +43,7 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^2.8.8",    
+    "@abi-software/flatmap-viewer": "2.8.9",
     "@abi-software/sparc-annotation": "0.3.1",
     "@abi-software/svg-sprite": "1.0.0",
     "@element-plus/icons-vue": "^2.3.1",

package/src/App.vue

@@ -4,7 +4,7 @@
       placement="bottom"
       trigger="click"
       width="500"
-      class="popover"
+      popper-class="popover options-popover"
       :teleported="false"
     >
       <div class="options-container">
@@ -69,10 +69,27 @@
       @ready="FlatmapReady"
       :initial="initial"
       :helpMode="helpMode"
+      :helpModeDialog="useHelpModeDialog"
+      :helpModeActiveItem="helpModeActiveItem"
+      @help-mode-last-item="onHelpModeLastItem"
+      @shown-tooltip="onTooltipShown"
+      @shown-map-tooltip="onMapTooltipShown"
       :displayMinimap="true"
       :enableOpenMapUI="true"
       :flatmapAPI="flatmapAPI"
       :disableUI="disableUI"
+      @open-pubmed-url="onOpenPubmedUrl"
+      @pathway-selection-changed="onPathwaySelectionChanged"
+      @flatmapChanged="onFlatmapChanged"
+    />
+
+    <HelpModeDialog
+      v-if="helpMode && useHelpModeDialog"
+      ref="multiflatmapHelp"
+      :multiflatmapRef="multiflatmapRef"
+      :lastItem="helpModeLastItem"
+      @show-next="onHelpModeShowNext"
+      @finish-help-mode="onFinishHelpMode"
     />
   </div>
 </template>
@@ -82,6 +99,7 @@ import { shallowRef } from 'vue';
 import { Setting as ElIconSetting } from '@element-plus/icons-vue'
 /* eslint-disable no-alert, no-console */
 import MultiFlatmapVuer from './components/MultiFlatmapVuer.vue'
+import HelpModeDialog from './components/HelpModeDialog.vue';
 import {
   ElAutocomplete as Autocomplete,
   ElButton as Button,
@@ -100,6 +118,7 @@ export default {
     ElIconSetting,
     Popover,
     Row,
+    HelpModeDialog,
   },
   methods: {
     saveSettings: function () {
@@ -111,24 +130,30 @@ export default {
     },
     FlatmapSelected: function (resource) {
       if (resource.eventType === 'click') {
-        console.log('resource', resource)
+        if (this.consoleOn) console.log('resource', resource)
       }
     },
+    onOpenPubmedUrl: function (url) {
+      if (this.consoleOn) console.log('open-pubmed-url', url);
+    },
+    onPathwaySelectionChanged: function (data) {
+      if (this.consoleOn) console.log('pathway-selection-changed', data);
+    },
     FlatmapReady: function (component) {
-      console.log(component)
+      if (this.consoleOn) console.log(component)
       let taxon = component.mapImp.describes
       let id = component.mapImp.addMarker('UBERON:0000948')
       window.flatmapImp = component.mapImp
       component.enablePanZoomEvents(true)
       //component.showPathwaysDrawer(false);
-      console.log(taxon, id)
+      if (this.consoleOn) console.log(taxon, id)
       //component.searchAndShowResult("heart");
     },
     panZoomcallback: function (payload) {
       this.payload = payload
     },
     openMap: function (map) {
-      console.log(map)
+      if (this.consoleOn) console.log(map)
     },
     fetchSuggestions: function (term, cb) {
       if (term === '') {
@@ -153,14 +178,42 @@ export default {
       }
     },
     search: function () {
-      console.log(this.searchText)
+      if (this.consoleOn) console.log(this.searchText)
       this.$refs.multi
         .getCurrentFlatmap()
         .searchAndShowResult(this.searchText, true)
     },
+    onFlatmapChanged: function () {
+      this.helpMode = false;
+    },
+    onHelpModeShowNext: function () {
+      this.helpModeActiveItem += 1;
+    },
+    onHelpModeLastItem: function (isLastItem) {
+      if (isLastItem) {
+        this.helpModeLastItem = true;
+      }
+    },
+    onFinishHelpMode: function () {
+      this.helpMode = false;
+      // reset help mode to default values
+      this.helpModeActiveItem = 0;
+      this.helpModeLastItem = false;
+    },
+    onTooltipShown: function () {
+      if (this.$refs.multi && this.$refs.multiflatmapHelp) {
+        this.$refs.multiflatmapHelp.toggleTooltipHighlight();
+      }
+    },
+    onMapTooltipShown: function () {
+      if (this.$refs.multi && this.$refs.multiflatmapHelp) {
+        this.$refs.multiflatmapHelp.toggleTooltipPinHighlight();
+      }
+    },
   },
   data: function () {
     return {
+      consoleOn: true,
       searchText: '',
       disableUI: false,
       minZoom: 4,
@@ -220,6 +273,10 @@ export default {
       displayCloseButton: false,
       initial: 'Rat',
       helpMode: false,
+      helpModeActiveItem: 0,
+      helpModeLastItem: false,
+      useHelpModeDialog: true,
+      multiflatmapRef: null,
       mapSettings: [],
       //flatmapAPI: "https://mapcore-demo.org/current/flatmap/v2/"
       //flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v3/"
@@ -231,6 +288,16 @@ export default {
       ElIconSetting: shallowRef(ElIconSetting)
     }
   },
+  mounted: function () {
+    this.multiflatmapRef = this.$refs.multi;
+  },
+  watch: {
+    helpMode: function (newVal) {
+      if (!newVal) {
+        this.helpModeActiveItem = 0;
+      }
+    }
+  },
   components: {
     MultiFlatmapVuer,
   },
@@ -298,6 +365,8 @@ body {
 .options-button {
   z-index:100;
   position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .options-container {

package/src/components/ConnectionDialog.vue

@@ -1,127 +1,134 @@
 <template>
-    <div class="dialog-container">
-        <el-row>
-            <span class="dialog-title" v-if="drawing">Finalise drawing</span>
-            <span class="dialog-title" v-else>Visualise connection</span>
-            <el-row v-if="drawing">
-                <el-col :span="13">
-                    <el-button type="primary" plain @click="$emit('confirm', true)">
-                        Confirm
-                    </el-button>
-                </el-col>
-                <el-col :span="11">
-                    <el-button type="primary" plain @click="$emit('cancel', true)">
-                        Cancel
-                    </el-button>
-                </el-col>
-            </el-row>
-            <el-row v-else>
-                <el-button type="primary" plain @click="$emit('display', false)">
-                    Close
-                </el-button>
-            </el-row>
+  <div class="dialog-container">
+    <el-row>
+      <el-col>
+        <span class="dialog-title">Visualise connection</span>
+        <el-row v-if="inDrawing">
+          <span class="dialog-subtitle">Finalise drawing</span>
+          <el-button-group>
+            <el-button
+              type="primary"
+              plain
+              @click="$emit('confirmDrawn', true)"
+            >
+              Confirm
+            </el-button>
+            <el-button type="primary" plain @click="$emit('cancelDrawn', true)">
+              Cancel
+            </el-button>
+          </el-button-group>
         </el-row>
-        <el-row v-if="connection">
-            <el-col>
-                <b><span>Related Features</span></b>
-                <el-row v-for="(value, key) in entry" :key="key">
-                    <el-col :span="20">
-                        <el-card shadow="hover" @click="handleTooltipOpen(key)">
-                            <span>{{ capitalise(value.label) }}</span>
-                        </el-card>
-                    </el-col>
-                    <el-col :span="4" v-if="key === tooltipId">
-                        <el-icon><el-icon-circle-close @click="handleTooltipClose" /></el-icon>
-                    </el-col>
-                </el-row>
-            </el-col>
+        <el-row v-else>
+          <el-button
+            type="primary"
+            plain
+            @click="$emit('dialogDisplay', false)"
+          >
+            Close
+          </el-button>
         </el-row>
-    </div>
+      </el-col>
+    </el-row>
+    <el-row v-if="hasConnection">
+      <el-col>
+        <b><span>Related Features</span></b>
+        <el-row v-for="(value, key) in connectionEntry" :key="key">
+          <el-card :shadow="shadowDisplay(key)" @click="handleTooltip(key)">
+            <span>{{ capitalise(value.label) }}</span>
+          </el-card>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { CircleClose as ElIconCircleClose } from '@element-plus/icons-vue'
 import {
-    ElRow as Row,
-    ElCol as Col,
-    ElCard as Card
-} from 'element-plus'
+  ElRow as Row,
+  ElCol as Col,
+  ElCard as Card,
+  ElButton as Button,
+  ElButtonGroup as ButtonGroup,
+} from "element-plus";
 
 export default {
-    name: 'ConnectionDialog',
-    components: {
-        Row,
-        Col,
-        Card
+  name: "ConnectionDialog",
+  components: {
+    Row,
+    Col,
+    ButtonGroup,
+    Button,
+    Card,
+  },
+  props: {
+    connectionEntry: {
+      type: Object,
     },
-    props: {
-        entry: {
-            type: Object,
-        },
-        drawing: {
-            type: Boolean,
-            default: false,
-        },
-        connection: {
-            type: Boolean,
-            default: false,
-        },
+    inDrawing: {
+      type: Boolean,
+      default: false,
     },
-    data: function () {
-        return {
-            tooltipId: undefined
-        }
+    hasConnection: {
+      type: Boolean,
+      default: false,
     },
-    watch: {
-        connection: function () {
-            this.tooltipId = undefined
-        },
+  },
+  data: function () {
+    return {
+      tooltipId: undefined,
+    };
+  },
+  methods: {
+    shadowDisplay: function (value) {
+      return this.tooltipId === value ? "always" : "hover";
     },
-    methods: {
-        capitalise: function (label) {
-            return label[0].toUpperCase() + label.slice(1);
-        },
-        handleTooltipOpen: function (value) {
-            this.tooltipId = value
-            this.$emit('tooltip', value)
-        },
-        handleTooltipClose: function () {
-            this.tooltipId = undefined
-            this.$emit('popup', true)
-        }
-    }
-}
+    capitalise: function (label) {
+      return label[0].toUpperCase() + label.slice(1);
+    },
+    handleTooltip: function (value) {
+      this.tooltipId = this.tooltipId === value ? undefined : value;
+      this.$emit("featureTooltip", this.tooltipId);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .dialog-container {
-    width: 200px;
-    height: fit-content;
-    text-align: justify;
-    border-radius: 4px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    pointer-events: auto;
-    background: #fff;
-    border: 1px solid $app-primary-color;
-    display: flex;
-    flex-direction: column;
-    padding: .8em;
+  width: 200px;
+  height: fit-content;
+  text-align: justify;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  pointer-events: auto;
+  background: #fff;
+  border: 1px solid $app-primary-color;
+  display: flex;
+  flex-direction: column;
+  padding: 0.8em;
 }
 
 .dialog-title {
-    font-size: 18px;
-    font-weight: bold;
-    color: rgb(131, 0, 191);
+  font-size: 18px;
+  font-weight: bold;
+  color: rgb(131, 0, 191);
+}
+
+.dialog-subtitle {
+  margin-top: 5px;
+  font-size: 15px;
+  color: rgb(131, 0, 191);
 }
 
-.el-icon {
-    cursor: pointer;
+.el-button {
+  margin: 5px 0px;
 }
 
 :deep(.el-card) {
-    --el-card-padding: 8px;
-    border: 0;
-    cursor: pointer;
+  width: 100%;
+  --el-card-padding: 8px;
+  border: 0;
+  cursor: pointer;
 }
 </style>