@abi-software/flatmapvuer 1.10.3-beta.0 → 1.10.3-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.10.3-beta.0",
+  "version": "1.10.3-beta.10",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -44,7 +44,7 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/map-utilities": "^1.6.1-beta.1",
+    "@abi-software/map-utilities": "^1.6.1-beta.6",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",

package/src/components/FlatmapVuer.vue

@@ -260,8 +260,17 @@ Please use `const` to assign meaningful names to them...
               :style="{ 'max-height': pathwaysMaxHeight + 'px' }"
               v-popover:checkBoxPopover
             >
-              <svg-legends v-if="!isFC" class="svg-legends-container" />
-              <template v-if="showStarInLegend">
+              <!-- <svg-legends v-if="!isFC" class="svg-legends-container" /> -->
+              <dynamic-legends
+                v-if="!isFC"
+                identifierKey="prompt"
+                colourKey="colour"
+                styleKey="style"
+                :legends="flatmapLegends"
+                :showStarInLegend="showStarInLegend"
+                class="svg-legends-container"
+              />
+              <!-- <template v-if="showStarInLegend">
                 <el-popover
                   content="Location of the featured dataset"
                   placement="right"
@@ -283,7 +292,7 @@ Please use `const` to assign meaningful names to them...
                     ></div>
                   </template>
                 </el-popover>
-              </template>
+              </template> -->
               <!-- The line below places the yellowstar svg on the left, and the text "Featured markers on the right" with css so they are both centered in the div -->
               <el-popover
                 content="Find these markers for data. The number inside the markers is the number of datasets available for each marker."
@@ -611,6 +620,7 @@ import SelectionsGroup from './SelectionsGroup.vue'
 import { MapSvgIcon, MapSvgSpriteColor } from '@abi-software/svg-sprite'
 import '@abi-software/svg-sprite/dist/style.css'
 import SvgLegends from './legends/SvgLegends.vue'
+import DynamicLegends from './legends/DynamicLegends.vue'
 import {
   ElButton as Button,
   ElCol as Col,
@@ -640,7 +650,7 @@ import {
 import { capitalise } from './utilities.js'
 import yellowstar from '../icons/yellowstar'
 import ResizeSensor from 'css-element-queries/src/ResizeSensor'
-import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-viewer@4.2.8/+esm'
+import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-viewer@4.2.10/+esm'
 import { AnnotationService } from '@abi-software/sparc-annotation'
 import { mapState } from 'pinia'
 import { useMainStore } from '@/store/index'
@@ -755,11 +765,6 @@ export default {
     return { annotator }
   },
   methods: {
-    enableFeatureResetOnClick: function (enable) {
-      if (this.mapImp) {
-        this.mapImp.enableFeatureResetOnClick(enable)
-      }
-    },
     /**
      *
      * @param filter format should follow #makeStyleFilter (flatmap-viewer)
@@ -1333,6 +1338,13 @@ export default {
      * @arg {string} `pathId` or `anatomicalId`
      */
     retrieveConnectedPaths: async function (payload, options = {}) {
+      // query all connected paths CQ
+      if (this.viewingMode === 'Neuron Connection' && this.connectionType.toLowerCase() === 'all') {
+        const sourceId = this.mapImp.uuid;
+        const connectedPaths = await queryAllConnectedPaths(this.flatmapAPI, sourceId, payload);
+        return connectedPaths;
+      }
+      // query all connected paths from flatmap
       if (this.mapImp) {
         let connectedPaths = [];
         let connectedTarget = options.target?.length ? options.target : [];
@@ -1931,7 +1943,18 @@ export default {
         this.emitConnectivityError(errorData);
 
         // highlight all available features
-        const featureIdsToHighlight = this.mapImp.modelFeatureIdList(featuresToHighlight);
+        const connectivityFeatures = featuresToHighlight.reduce((arr, path) => {
+          const connectivityObj = this.mapImp.pathways.paths[path];
+          const connectivities = connectivityObj ? connectivityObj.connectivity : null;
+          if (connectivities) {
+            const flatFeatures = connectivities.flat(Infinity);
+            arr.push(...flatFeatures);
+          }
+          return arr;
+        }, []);
+        const uniqueConnectivityFeatures = [...new Set(connectivityFeatures)];
+        const combinedFeatures = [...featuresToHighlight, ...uniqueConnectivityFeatures];
+        const featureIdsToHighlight = this.mapImp.modelFeatureIdList(combinedFeatures);
         const allFeaturesToHighlight = [
           ...featureIdsToHighlight,
           ...geojsonHighlights
@@ -2051,9 +2074,6 @@ export default {
       // the card should be opened without doing other functions
       else if (this.viewingMode === 'Neuron Connection' && !connectivityExplorerClicked) {
         const resources = data.map(tooltip => tooltip.resource[0]);
-        // TODO: to remove pathsQueryAPI
-        // the new query, queryPathsByRoute, is used in mapviewer for CQ
-        // let pathsQueryAPI = this.retrieveConnectedPaths(resources); // TODO: to replace with queryAllConnectedPaths
 
         // filter out paths
         const featureId = resources.find(resource => !resource.startsWith('ilxtr:'));
@@ -2067,29 +2087,18 @@ export default {
           const featureId = data[0].feature?.featureId;
           const annotation = this.mapImp.annotations.get(featureId);
           const anatomicalNodes = annotation?.['anatomical-nodes'];
-          const uniqueResource = anatomicalNodes ? JSON.parse(anatomicalNodes[0]) : transformResources;
-
-          // if (this.connectionType === 'Origin') {
-            // Competency Query API
-            // pathsQueryAPI = queryPathsByOrigin(this.flatmapAPI, this.mapImp.knowledgeSource, resources);
-
-            // search by unique placement before competency API is ready for this
-            // pathsQueryAPI = filterPathsByOriginFromKnowledge(uniqueResource);
-          // } else if (this.connectionType === 'Via') {
-            // Competency Query API
-            // pathsQueryAPI = queryPathsByViaLocation(this.flatmapAPI, this.mapImp.knowledgeSource, resources);
-
-            // search by unique placement before competency API is ready for this
-            // pathsQueryAPI = filterPathsByViaFromKnowledge(uniqueResource);
-          // } else if (this.connectionType === 'Destination') {
-            // Competency Query API
-            // pathsQueryAPI = queryPathsByDestination(this.flatmapAPI, this.mapImp.knowledgeSource, resources);
-
-            // search by unique placement before competency API is ready for this
-            // pathsQueryAPI = filterPathsByDestinationFromKnowledge(uniqueResource);
-          // } else {
-            // pathsQueryAPI = queryAllConnectedPaths(this.flatmapAPI, this.mapImp.knowledgeSource, resources);
-          // }
+          let anatomicalNode;
+          let uniqueResource = transformResources;
+          const models = annotation?.['models'];
+          if (anatomicalNodes?.length) {
+            anatomicalNode = anatomicalNodes[anatomicalNodes.length - 1];
+          }
+          if (anatomicalNode) {
+            uniqueResource = JSON.parse(anatomicalNode);
+          } else if (models) {
+            uniqueResource = [models, []];
+          }
+
           const terms = uniqueResource.flat(Infinity);
           const uniqueTerms = [...new Set(terms)];
           const fetchResults = await fetchLabels(this.flatmapAPI, uniqueTerms);
@@ -2116,64 +2125,39 @@ export default {
             term: this.connectionType
           };
           // check for existing item
-          const isNewFilterItemExist = this.connectivityfilters.some((connectivityfilter) => (
+          const isNewFilterItemExist = this.connectivityFilters.some((connectivityfilter) => (
             connectivityfilter.facet === newConnectivityfilter.facet &&
             connectivityfilter.facetPropPath === newConnectivityfilter.facetPropPath
           ));
 
           if (!isNewFilterItemExist) {
-            this.connectivityfilters.push(newConnectivityfilter);
+            this.connectivityFilters.push(newConnectivityfilter);
           }
-          // TODO: to remove "neuron-connection-click"
-          this.$emit('neuron-connection-feature-click', this.connectivityfilters);
-        }
 
-        // TODO: to clean up after verification
-        // pathsQueryAPI.then(async (paths) => {
-        //   if (paths.length) {
-        //     const filteredPaths = paths.filter(path => (path in this.mapImp.pathways.paths))
-        //     const filteredPathsWithData = [];
-        //     let prom1 = [];
-        //     let prom2 = [];
-
-        //     for (let i = 0; i < filteredPaths.length; i++) {
-        //       const path = filteredPaths[i];
-        //       const modelFeatureIds = this.mapImp.modelFeatureIds(path);
-        //       const feature = this.mapImp.featureProperties(modelFeatureIds[0]);
-        //       if (feature) {
-        //         const pathData = {
-        //           resource: [feature.models],
-        //           feature: feature,
-        //           label: feature.label,
-        //           provenanceTaxonomy: feature.taxons,
-        //           alert: feature.alert,
-        //         };
-        //         filteredPathsWithData.push(pathData);
-        //         prom1.push({
-        //           title: pathData.label,
-        //           featureId: [path]
-        //         })
-        //       }
-        //     }
-        //     this.tooltipEntry = await Promise.all(prom1)
-        //     // Emit placeholders first.
-        //     this.$emit('connectivity-info-open', this.tooltipEntry);
-
-        //     /**
-        //      * This event is emitted to highlight the same paths on other display maps.
-        //      */
-        //     this.$emit('neuron-connection-click', paths);
-
-        //     // loading data
-        //     for (let i = 0; i < filteredPathsWithData.length; i++) {
-        //       const pathData = filteredPathsWithData[i];
-        //       const tooltipEntryData = await this.getKnowledgeTooltip(pathData);
-        //       prom2.push(tooltipEntryData)
-        //     }
-        //     this.tooltipEntry = await Promise.all(prom2)
-        //     this.displayTooltip(filteredPaths)
-        //   }
-        // })
+          if (this.connectionType.toLowerCase() === 'all') {
+            const searchTerms = uniqueTerms.join();
+            this.$emit('neuron-connection-feature-click', {
+              filters: [],
+              search: searchTerms,
+            });
+          } else {
+            this.$emit('neuron-connection-feature-click', {
+              filters: this.connectivityFilters,
+              search: '',
+            });
+          }
+        } else {
+          // clicking on paths
+          // do nothing for origin, destination, via
+          const searchTerms = resources.join();
+
+          if (this.connectionType.toLowerCase() === 'all') {
+            this.$emit('neuron-connection-feature-click', {
+              filters: [],
+              search: searchTerms,
+            });
+          }
+        }
       } else {
         // load and store knowledge
         loadAndStoreKnowledge(this.mapImp, this.flatmapQueries);
@@ -2208,14 +2192,14 @@ export default {
      */
     updateConnectivityFilters: function (payload) {
       if (!payload.length) return;
-      this.connectivityfilters = payload.filter((filterItem) => (
+      this.connectivityFilters = payload.filter((filterItem) => (
         filterItem.facet.toLowerCase() !== 'show all'
       ));
     },
     resetConnectivityfilters: function (payload) {
       if (payload.length) {
         // remove not found items
-        this.connectivityfilters = this.connectivityfilters.filter((connectivityfilter) =>
+        this.connectivityFilters = this.connectivityFilters.filter((connectivityfilter) =>
           payload.some((notFoundItem) => (
             notFoundItem.facetPropPath === connectivityfilter.facetPropPath &&
             notFoundItem.facet !== connectivityfilter.facet
@@ -2223,7 +2207,7 @@ export default {
         )
       } else {
         // full reset
-        this.connectivityfilters = [];
+        this.connectivityFilters = [];
       }
     },
     getKnowledgeTooltip: async function (data) {
@@ -2929,7 +2913,7 @@ export default {
       }
       return filterSources
     },
-    getFilterOptions: async function (_flatmapKnowledge) {
+    getFilterOptions: async function (providedKnowledge) {
       let filterOptions = [];
       if (this.mapImp) {
         const filterRanges = this.mapImp.featureFilterRanges()
@@ -2985,16 +2969,39 @@ export default {
           }
         }
         const connectionFilters = [];
-        const flatmapKnowledge = _flatmapKnowledge || this.getFlatmapKnowledge();
-        const originItems = await extractOriginItems(this.flatmapAPI, flatmapKnowledge);
-        const viaItems = await extractViaItems(this.flatmapAPI, flatmapKnowledge);
-        const destinationItems = await extractDestinationItems(this.flatmapAPI, flatmapKnowledge);
+        const baseFlatmapKnowledge = providedKnowledge || this.getFlatmapKnowledge();
+        const mapKnowledge = this.mapImp.pathways.paths;
+        const flatmapKnowledge = baseFlatmapKnowledge.reduce((arr, knowledge) => {
+          const id = knowledge.id;
+          if (id) {
+            const mapKnowledgeObj = mapKnowledge[id];
+            if (mapKnowledgeObj && mapKnowledgeObj.connectivity && mapKnowledgeObj['node-phenotypes']) {
+              const mapConnectivity = mapKnowledgeObj.connectivity;
+              const mapNodePhenotypes = mapKnowledgeObj['node-phenotypes'];
+              // take only map connectivity
+              knowledge.connectivity = [...mapConnectivity];
+              for (let key in knowledge['node-phenotypes']) {
+                if (mapNodePhenotypes[key]) {
+                  // take only map node-phenotypes
+                  knowledge['node-phenotypes'][key] = [...mapNodePhenotypes[key]];
+                }
+              }
+              // to avoid mutation
+              arr.push(JSON.parse(JSON.stringify(knowledge)));
+            }
+          }
+          return arr;
+        }, []);
+        const knowledgeSource = this.mapImp.knowledgeSource;
+        const originItems = await extractOriginItems(this.flatmapAPI, knowledgeSource, flatmapKnowledge);
+        const viaItems = await extractViaItems(this.flatmapAPI, knowledgeSource, flatmapKnowledge);
+        const destinationItems = await extractDestinationItems(this.flatmapAPI, knowledgeSource, flatmapKnowledge);
 
         const transformItem = (facet, item) => {
           const key = JSON.stringify(item.key);
           return {
             key: `flatmap.connectivity.source.${facet}.${key}`,
-            label: item.label
+            label: item.label || key
           };
         }
 
@@ -3008,14 +3015,30 @@ export default {
             childrenList = destinationItems.map((item) => transformItem(facet, item));
           }
 
-          connectionFilters.push({
-            key: `flatmap.connectivity.source.${facet}`,
-            label: facet,
-            children: childrenList,
-          })
+          // Those without label but key should be below
+          childrenList = childrenList.sort((a, b) => {
+            const isAlpha = (str) => /^[a-zA-Z]/.test(str);
+            const aAlpha = isAlpha(a.label);
+            const bAlpha = isAlpha(b.label);
+
+            if (aAlpha && !bAlpha) return -1;
+            if (!aAlpha && bAlpha) return 1;
+
+            return a.label.localeCompare(b.label);
+          });
+
+          if (childrenList.length) {
+            connectionFilters.push({
+              key: `flatmap.connectivity.source.${facet}`,
+              label: facet,
+              children: childrenList,
+            })
+          }
         }
 
-        filterOptions.push(...connectionFilters)
+        if (connectionFilters.length) {
+          filterOptions.push(...connectionFilters)
+        }
       }
       return filterOptions;
     },
@@ -3041,6 +3064,7 @@ export default {
       //Async, pass the state for checking
       this.processTaxon(this.mapImp.taxonIdentifiers, state ? state['taxonSelection'] : undefined)
       this.containsAlert = "alert" in this.mapImp.featureFilterRanges()
+      this.flatmapLegends = this.mapImp.flatmapLegend
       this.addResizeButtonToMinimap()
       this.loading = false
       this.computePathControlsMaximumHeight()
@@ -3518,7 +3542,8 @@ export default {
       }),
       searchTerm: "",
       taxonLeaveDelay: undefined,
-      connectivityfilters: [],
+      connectivityFilters: [],
+      flatmapLegends: [],
     }
   },
   computed: {

package/src/components/MultiFlatmapVuer.vue

@@ -70,7 +70,6 @@
       @connectivity-info-open="onConnectivityInfoOpen"
       @connectivity-info-close="onConnectivityInfoClose"
       @connectivity-error="onConnectivityError"
-      @neuron-connection-click="onNeuronConnectionClick"
       @neuron-connection-feature-click="onNeuronConnectionFeatureClick"
       @open-map="$emit('open-map', $event)"
       @pathway-selection-changed="onSelectionsDataChanged"
@@ -101,7 +100,7 @@
 import { markRaw } from 'vue'
 import EventBus from './EventBus'
 import FlatmapVuer from './FlatmapVuer.vue'
-import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-viewer@4.2.8/+esm'
+import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-viewer@4.2.10/+esm'
 import {
   ElCol as Col,
   ElOption as Option,
@@ -307,9 +306,6 @@ export default {
     onConnectivityError: function (errorInfo) {
       this.$emit('connectivity-error', errorInfo);
     },
-    onNeuronConnectionClick: function (payload) {
-      this.$emit('neuron-connection-click', payload);
-    },
     onNeuronConnectionFeatureClick: function (payload) {
       this.$emit('neuron-connection-feature-click', payload);
     },

package/src/components/SelectionsGroup.vue

@@ -31,10 +31,9 @@
       </el-col>
     </el-row>
     <el-checkbox-group
-      :class="{ 'show-as-legend': showAsLegend }"
+      :class="{ 'show-as-legend': showAsLegend, 'checkbox-group': !showAsLegend }"
       v-model="checkedItems"
       size="small"
-      class="checkbox-group"
       @change="handleCheckedItemsChange"
     >
       <div class="checkbox-group-inner">
@@ -395,5 +394,8 @@ export default {
   :deep(.el-checkbox__input) {
     display: none;
   }
+  .checkbox-group-inner {
+    padding: 5px;
+  }
 }
 </style>

package/src/components/legends/DynamicLegends.vue

@@ -1,106 +1,123 @@
 <template>
-  <div>
-    <el-row>
-      <el-col :span="12">
-        <div class="title-display-text">{{ title }}</div>
-      </el-col>
-    </el-row>
-    <div class="legends-group">
-      <el-row
-        v-for="item in lists"
-        :key="item[identifierKey]"
-        :label="item[identifierKey]"
-      >
-        <div class="legends-container">
-          <div
-            class="legends-visual"
-            :style="{ background: item[colourKey] }"
-          ></div>
-          <div class="label">
-            {{ capitalise(item[identifierKey]) }}
-          </div>
-        </div>
-      </el-row>
+  <div class="legend-group">
+    <div
+      class="legend-container"
+      v-for="item in legends"
+      :key="item[identifierKey]"
+      :label="item[identifierKey]"
+    >
+      <div
+        v-if="legendStyle(item) === 'yellow-star'"
+        :class="legendStyle(item)"
+        v-html="showStarInLegend ? yellowstar : ''"
+      ></div>
+      <div v-else class="legend-item">
+        <div
+          :class="legendStyle(item)"
+          :style="{ 'background-color': item[colourKey] }"
+        ></div>
+        <div class="label">{{ capitalise(item[identifierKey]) }}</div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import yellowstar from "../../icons/yellowstar";
 /* eslint-disable no-alert, no-console */
-import Vue from 'vue'
-import { ElCol as Col, ElRow as Row } from 'element-plus'
-Vue.use(Col)
-Vue.use(Row)
-
 export default {
-  name: 'DynamicLegends',
+  name: "DynamicLegends",
   props: {
     identifierKey: {
       type: String,
-      default: 'id',
+      default: "id",
     },
     colourKey: {
       type: String,
-      default: 'colour',
+      default: "colour",
+    },
+    styleKey: {
+      type: String,
+      default: "style",
     },
     title: {
       type: String,
-      default: '',
+      default: "",
     },
-    lists: {
+    legends: {
       type: Array,
       default: function () {
-        return []
+        return [];
       },
     },
+    showStarInLegend: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: function () {
+    return {
+      yellowstar: yellowstar,
+    };
   },
   methods: {
     capitalise: function (label) {
-      return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase()
+      return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
+    },
+    legendStyle: function (item) {
+      if (item[this.styleKey] === "star") {
+        if (item[this.identifierKey] === "Featured dataset marker") {
+          return "yellow-star";
+        } else if (item[this.identifierKey] === "Gaglionated nerve plexus") {
+          return "hexagon-star";
+        }
+      }
+      return item[this.styleKey];
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@use 'element-plus/theme-chalk/src/row';
+.legend-group {
+  padding: 6px 0;
+}
 
-.legends-visual {
-  margin: 2px;
-  width: 11px;
-  margin-right: 5px;
-  display: inline-block;
+.legend-container {
+  width: max-content;
 }
 
-.title-display-text {
-  width: 59px;
-  height: 20px;
-  color: rgb(48, 49, 51);
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 20px;
-  margin-left: 8px;
+.legend-item {
+  display: flex;
+  align-items: center;
+  margin: 8px 12.5px;
 }
 
-.label {
-  padding-left: 35px;
-  color: $app-primary-color;
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0px;
-  line-height: 14px;
+.circle {
+  height: 20px;
+  width: 20px;
+  background-color: #ffffff;
+  border-radius: 50%;
+  display: inline-block;
 }
 
-.legends-container {
-  display: flex;
-  cursor: pointer;
+// hexagon
+.hexagon-star {
+  width: 21px;
+  height: 25px;
+  background-color: #ffffff;
+  opacity: 0.64;
+  clip-path: path(
+    "M10.48 0.76 c-2.12 3.72 -6.12 6.04 -10.44 6.04 l-0.16 0.24 c2.04 3.6 2.04 8 0 11.6 l0.16 0.24 c4.28 0 8.32 2.32 10.44 6.04 c2.12 -3.72 6.12 -6.04 10.44 -6.04 c-2.12 -3.72 -2.12 -8.36 0 -12.16 C16.64 6.84 12.68 4.52 10.48 0.76z"
+  );
+  -webkit-clip-path: path(
+    "M10.48 0.76 c-2.12 3.72 -6.12 6.04 -10.44 6.04 l-0.16 0.24 c2.04 3.6 2.04 8 0 11.6 l0.16 0.24 c4.28 0 8.32 2.32 10.44 6.04 c2.12 -3.72 6.12 -6.04 10.44 -6.04 c-2.12 -3.72 -2.12 -8.36 0 -12.16 C16.64 6.84 12.68 4.52 10.48 0.76z"
+  );
 }
 
-.legends-group {
-  width: 224;
-  border: 1px solid rgb(144, 147, 153);
-  border-radius: 4px;
-  background: #ffffff;
-  padding: 18px;
+.label {
+  margin-left: 14px;
+  font-size: 12px;
+  color: rgb(48, 49, 51);
 }
 </style>