@abi-software/flatmapvuer 1.10.3-beta.9 → 1.11.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.10.3-beta.9",
+  "version": "1.11.0-beta.2",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -44,7 +44,7 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/map-utilities": "^1.6.1-beta.6",
+    "@abi-software/map-utilities": "^1.6.1-beta.8",
     "@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

@@ -643,9 +643,6 @@ import {
   refreshFlatmapKnowledgeCache,
   getKnowledgeSource,
   getReferenceConnectivitiesByAPI,
-  filterPathsByOriginFromKnowledge,
-  filterPathsByDestinationFromKnowledge,
-  filterPathsByViaFromKnowledge,
 } from '../services/flatmapKnowledge.js'
 import { capitalise } from './utilities.js'
 import yellowstar from '../icons/yellowstar'
@@ -655,17 +652,11 @@ import { AnnotationService } from '@abi-software/sparc-annotation'
 import { mapState } from 'pinia'
 import { useMainStore } from '@/store/index'
 import {
-  queryPathsByOrigin,
-  queryPathsByViaLocation,
-  queryPathsByDestination,
-  extractOriginItems,
-  extractDestinationItems,
-  extractViaItems,
   fetchLabels,
-  queryAllConnectedPaths,
   DrawToolbar,
   Tooltip,
-  TreeControls
+  TreeControls,
+  getFlatmapFilterOptions
 } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
 import EventBus from './EventBus.js'
@@ -765,6 +756,11 @@ export default {
     return { annotator }
   },
   methods: {
+    enableFeatureResetOnClick: function (enable) {
+      if (this.mapImp) {
+        this.mapImp.enableFeatureResetOnClick(enable)
+      }
+    },
     /**
      *
      * @param filter format should follow #makeStyleFilter (flatmap-viewer)
@@ -828,7 +824,7 @@ export default {
             ? this.mapImp.featureProperties(numericId)
             : { feature: this.existDrawnFeatures.find(feature => feature.id === value.trim()) };
           let payload = { feature: featureObject }
-          this.checkAndCreatePopups([payload])
+          this.checkAndCreatePopups([payload], false)
         } else {
           this.closeTooltip()
         }
@@ -840,7 +836,7 @@ export default {
      */
     confirmDrawnFeature: function () {
       if (this.isValidDrawnCreated) {
-        this.checkAndCreatePopups([this.drawnCreatedEvent])
+        this.checkAndCreatePopups([this.drawnCreatedEvent], false)
         // Add connection if exist to annotationEntry
         // Connection will only be added in creating new drawn feature annotation
         // And will not be updated if move drawn features
@@ -1338,12 +1334,6 @@ 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 = [];
@@ -1517,7 +1507,7 @@ export default {
      * @arg {String} `models`
      */
     ftuSelected: function (models) {
-      this.searchAndShowResult(models, true)
+      this.searchAndShowResult(models, true, true)
     },
     /**
      * @public
@@ -2022,7 +2012,7 @@ export default {
      * _checkNeuronClicked shows a neuron path pop up if a path was recently clicked._
      * @arg {Object} `data`
      */
-    checkAndCreatePopups: async function (data, connectivityExplorerClicked) {
+    checkAndCreatePopups: async function (data, mapclick = true) {
       // Call flatmap database to get the connection data
       if (this.viewingMode === 'Annotation') {
         const features = data.filter(d => d.feature).map(d => d.feature)
@@ -2072,7 +2062,7 @@ export default {
       }
       // clicking on a connectivity explorer card will be the same as exploration mode
       // the card should be opened without doing other functions
-      else if (this.viewingMode === 'Neuron Connection' && !connectivityExplorerClicked) {
+      else if (this.viewingMode === 'Neuron Connection' && mapclick) {
         const resources = data.map(tooltip => tooltip.resource[0]);
 
         // filter out paths
@@ -2087,11 +2077,16 @@ export default {
           const featureId = data[0].feature?.featureId;
           const annotation = this.mapImp.annotations.get(featureId);
           const anatomicalNodes = annotation?.['anatomical-nodes'];
+          const annotationModels = annotation?.['models'];
           let anatomicalNode;
           let uniqueResource = transformResources;
           const models = annotation?.['models'];
           if (anatomicalNodes?.length) {
-            anatomicalNode = anatomicalNodes[anatomicalNodes.length - 1];
+            // get the node which match the feature in a location
+            // [feature, location]
+            anatomicalNode = anatomicalNodes.find((node) =>
+              JSON.parse(node)[0] === annotationModels
+            );
           }
           if (anatomicalNode) {
             uniqueResource = JSON.parse(anatomicalNode);
@@ -2134,18 +2129,10 @@ export default {
             this.connectivityFilters.push(newConnectivityfilter);
           }
 
-          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: '',
-            });
-          }
+          this.$emit('neuron-connection-feature-click', {
+            filters: this.connectivityFilters,
+            search: '',
+          });
         } else {
           // clicking on paths
           // do nothing for origin, destination, via
@@ -2728,7 +2715,7 @@ export default {
         if (state.background) this.backgroundChangeCallback(state.background)
         if (state.searchTerm) {
           const searchTerm = state.searchTerm
-          this.searchAndShowResult(searchTerm, true)
+          this.searchAndShowResult(searchTerm, true, true)
         }
         this.setVisibilityState(state)
       }
@@ -2913,130 +2900,11 @@ export default {
       }
       return filterSources
     },
-    getFilterOptions: async function (providedKnowledge) {
-      let filterOptions = [];
-      if (this.mapImp) {
-        const filterRanges = this.mapImp.featureFilterRanges()
-        for (const [key, value] of Object.entries(filterRanges)) {
-          let main = {
-            key: `flatmap.connectivity.${key}`,
-            label: "",
-            children: []
-          }
-          let children = []
-          if (key === "kind") {
-            main.label = "Pathways"
-            for (const facet of value) {
-              const pathway = this.pathways.find(path => path.type === facet)
-              if (pathway) {
-                children.push({
-                  key: `${main.key}.${facet}`,
-                  label: pathway.label,
-                  colour: pathway.colour,
-                  colourStyle: 'line',
-                  dashed: pathway.dashed,
-                })
-              }
-            }
-          } else if (key === "taxons") {
-            main.label = "Studied in"
-            const entityLabels = await findTaxonomyLabels(this.mapImp, this.mapImp.taxonIdentifiers)
-            if (entityLabels.length) {
-              for (const facet of value) {
-                const taxon = entityLabels.find(p => p.taxon === facet)
-                if (taxon) {
-                  children.push({
-                    key: `${main.key}.${facet}`,
-                    // space added at the end of label to make sure the display name will not be updated
-                    // prevent sidebar searchfilter convertReadableLabel
-                    label: `${taxon.label} `
-                  })
-                }
-              }
-            }
-          } else if (key === "alert") {
-            main.label = "Alert"
-            for (const facet of ["with", "without"]) {
-              children.push({
-                key: `${main.key}.${facet}`,
-                label: `${facet} alerts`
-              })
-            }
-          }
-          main.children = children.sort((a, b) => a.label.localeCompare(b.label));
-          if (main.label && main.children.length) {
-            filterOptions.push(main)
-          }
-        }
-        const connectionFilters = [];
-        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) {
-              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 || key
-          };
-        }
-
-        for (const facet of ["origin", "via", "destination"]) {
-          let childrenList = []
-          if (facet === 'origin') {
-            childrenList = originItems.map((item) => transformItem(facet, item));
-          } else if (facet === 'via') {
-            childrenList = viaItems.map((item) => transformItem(facet, item));
-          } else if (facet === 'destination') {
-            childrenList = destinationItems.map((item) => transformItem(facet, item));
-          }
-
-          // 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);
-          });
-
-          connectionFilters.push({
-            key: `flatmap.connectivity.source.${facet}`,
-            label: facet,
-            children: childrenList,
-          })
-        }
-
-        filterOptions.push(...connectionFilters)
-      }
-      return filterOptions;
+    getFilterOptions: async function (mapImp, _providedKnowledge) {
+      const providedKnowledge = _providedKnowledge || this.getFlatmapKnowledge();
+      const providedPathways = this.pathways;
+      const flatmapFilterOptions = await getFlatmapFilterOptions(this.flatmapAPI, mapImp, providedKnowledge, providedPathways);
+      return flatmapFilterOptions;
     },
     /**
      * @public
@@ -3113,8 +2981,9 @@ export default {
      * with the option to display the label/connectivity information using displayInfo flag.
      * @arg {String} `term`,
      * @arg {String} `displayInfo`
+     * @arg {String} `mapclick` Similate the event as it is triggered by an user click
      */
-    searchAndShowResult: function (term, displayInfo, connectivityExplorerClicked) {
+    searchAndShowResult: function (term, displayInfo, mapclick = true) {
       if (this.mapImp) {
         if (term === undefined || term === '') {
           this.mapImp.clearSearchResults()
@@ -3146,7 +3015,7 @@ export default {
                   alert: feature.alert,
                 }
                 // Show popup for all modes
-                this.checkAndCreatePopups([data], connectivityExplorerClicked)
+                this.checkAndCreatePopups([data], mapclick)
                 this.mapImp.showPopup(featureId, capitalise(feature.label), {
                   className: 'custom-popup',
                   positionAtLastClick: false,

package/src/components/legends/DynamicLegends.vue

@@ -6,12 +6,7 @@
       :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="legend-item" v-if="legendStyle(item)">
         <div
           :class="legendStyle(item)"
           :style="{ 'background-color': item[colourKey] }"
@@ -23,7 +18,6 @@
 </template>
 
 <script>
-import yellowstar from "../../icons/yellowstar";
 /* eslint-disable no-alert, no-console */
 export default {
   name: "DynamicLegends",
@@ -55,11 +49,6 @@ export default {
       default: false,
     },
   },
-  data: function () {
-    return {
-      yellowstar: yellowstar,
-    };
-  },
   methods: {
     capitalise: function (label) {
       return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
@@ -67,6 +56,9 @@ export default {
     legendStyle: function (item) {
       if (item[this.styleKey] === "star") {
         if (item[this.identifierKey] === "Featured dataset marker") {
+          if (!this.showStarInLegend) {
+            return;
+          }
           return "yellow-star";
         } else if (item[this.identifierKey] === "Gaglionated nerve plexus") {
           return "hexagon-star";
@@ -101,20 +93,31 @@ export default {
   display: inline-block;
 }
 
-// hexagon
 .hexagon-star {
-  width: 21px;
+  width: 20px;
   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"
+    "M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z"
   );
   -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"
+    "M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z"
   );
 }
 
+.yellow-star {
+  width: 25px;
+  height: 25px;
+  background-color: #ffffff !important;
+  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22yellow%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20d%3D%22M11.0748%203.25583C11.4141%202.42845%2012.5859%202.42845%2012.9252%203.25583L14.6493%207.45955C14.793%207.80979%2015.1221%208.04889%2015.4995%208.07727L20.0303%208.41798C20.922%208.48504%2021.2841%209.59942%2020.6021%2010.1778L17.1369%2013.1166C16.8482%2013.3614%2016.7225%2013.7483%2016.8122%2014.1161L17.8882%2018.5304C18.1%2019.3992%2017.152%2020.0879%2016.3912%2019.618L12.5255%2017.2305C12.2034%2017.0316%2011.7966%2017.0316%2011.4745%2017.2305L7.60881%2019.618C6.84796%2020.0879%205.90001%2019.3992%206.1118%2018.5304L7.18785%2014.1161C7.2775%2013.7483%207.1518%2013.3614%206.86309%2013.1166L3.3979%2010.1778C2.71588%209.59942%203.07796%208.48504%203.96971%208.41798L8.50046%208.07727C8.87794%208.04889%209.20704%207.80979%209.35068%207.45955L11.0748%203.25583Z%22/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+  display: inline-block;
+  margin: -3px;
+  padding-right: 2px;
+}
+
 .label {
   margin-left: 14px;
   font-size: 12px;

package/src/services/flatmapKnowledge.js

@@ -25,9 +25,8 @@ async function getReferenceConnectivitiesByAPI(mapImp, resource, flatmapQueries)
   const sql = `select knowledge from knowledge
     where source="${knowledgeSource}" and
     knowledge like "%${resource}%" order by source desc`;
-  const response = await flatmapQueries.flatmapQuery(sql);
-  const mappedData = response.values.map((x) => x[0]);
-  const parsedData = mappedData.map((x) => JSON.parse(x));
+  const response = await flatmapQueries.queryKnowledge(sql);
+  const parsedData = response.map((x) => JSON.parse(x));
   const featureIds = parsedData.map((x) => x.id);
   return featureIds;
 }
@@ -97,9 +96,8 @@ async function loadAndStoreKnowledge(mapImp, flatmapQueries) {
   const flatmapKnowledgeSource = sessionStorage.getItem('flatmap-knowledge-source');
 
   if (!flatmapKnowledge || flatmapKnowledgeSource !== knowledgeSource) {
-    const response = await flatmapQueries.flatmapQuery(sql);
-    const mappedData = response.values.map(x => x[0]);
-    const parsedData = mappedData.map(x => JSON.parse(x));
+    const response = await flatmapQueries.queryKnowledge(sql);
+    const parsedData = response.map(x => JSON.parse(x));
 
     sessionStorage.setItem('flatmap-knowledge', JSON.stringify(parsedData));
     sessionStorage.setItem('flatmap-knowledge-source', knowledgeSource);

package/src/services/flatmapQueries.js

@@ -104,6 +104,7 @@ let FlatmapQueries = function () {
     this.uberons = []
     this.lookUp = []
     this.connectivitySource = 'map' // 'sckan'
+    this.noMapConnectivity = false
   }
 
   this.createTooltipData = async function (mapImp, eventData) {
@@ -144,7 +145,8 @@ let FlatmapQueries = function () {
       hyperlinks: hyperlinks,
       provenanceTaxonomy: eventData.provenanceTaxonomy,
       provenanceTaxonomyLabel: taxonomyLabel,
-      connectivitySource: this.connectivitySource
+      connectivitySource: this.connectivitySource,
+      noMapConnectivity: this.noMapConnectivity,
     }
     return tooltipData
   }
@@ -158,7 +160,8 @@ let FlatmapQueries = function () {
       componentsWithDatasets: this.componentsWithDatasets,
       destinations: this.destinations,
       destinationsWithDatasets: this.destinationsWithDatasets,
-      connectivitySource: this.connectivitySource
+      connectivitySource: this.connectivitySource,
+      noMapConnectivity: this.noMapConnectivity,
     };
   }
 
@@ -300,6 +303,9 @@ let FlatmapQueries = function () {
       queryAPI
         .then((response) => {
           if (this.checkConnectivityExists(response)) {
+            if (connectivitySource === 'map') {
+              this.noMapConnectivity = false;
+            }
             let connectivity = response;
             if (processConnectivity) {
               this.processConnectivity(mapImp, connectivity).then((processedConnectivity) => {
@@ -312,6 +318,32 @@ let FlatmapQueries = function () {
               })
             }
             else resolve(connectivity)
+          } else if (connectivitySource === 'map') {
+            // switch to SCKAN
+            // when there has no connectivity data from Map
+            // and add the noMapConnectivity flag to disable the option
+            this.connectivitySource = 'sckan';
+            this.noMapConnectivity = true;
+            mapImp.queryKnowledge(keastId)
+              .then((fallbackResponse) => {
+                if (this.checkConnectivityExists(fallbackResponse)) {
+                  let connectivity = fallbackResponse;
+                  if (processConnectivity) {
+                    this.processConnectivity(mapImp, connectivity).then((processedConnectivity) => {
+                      // response.references is publication urls
+                      if (fallbackResponse.references) {
+                        // with publications from both PubMed and Others
+                        this.rawURLs = [...fallbackResponse.references];
+                      }
+                      resolve(processedConnectivity)
+                    })
+                  }
+                  else resolve(connectivity)
+                } else {
+                  resolve(false)
+                }
+              })
+              .catch(() => resolve(false));
           } else {
             resolve(false)
           }
@@ -536,19 +568,24 @@ let FlatmapQueries = function () {
     return `select distinct publication from publications where entity = '${model}'`
   }
 
-  this.flatmapQuery = function (sql) {
-    const data = { sql: sql }
-    return fetch(`${this.flatmapAPI}knowledge/query/`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(data),
+  this.queryKnowledge = async (sql, params) => {
+    const url = `${this.flatmapAPI}/knowledge/query/`;
+    const query = { sql, params };
+    const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+            "Accept": "application/json"
+        },
+        body: JSON.stringify(query),
     })
-      .then((response) => response.json())
-      .catch((error) => {
-        console.error('Error:', error)
-      })
+    if (!response.ok) {
+        throw new Error(`Cannot access ${url}`);
+    }
+    const data = await response.json();
+    if ('error' in data) {
+        throw new TypeError(data.error);
+    }
+    return data.values
   }
 }