@abi-software/flatmapvuer 1.10.3-beta.6 → 1.10.3-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.10.3-beta.6",
+  "version": "1.10.3-beta.7",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -44,7 +44,7 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/map-utilities": "^1.6.1-beta.4",
+    "@abi-software/map-utilities": "^1.6.1-beta.5",
     "@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'
@@ -1333,6 +1343,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 : [];
@@ -2102,13 +2119,13 @@ 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);
           }
 
           if (this.connectionType.toLowerCase() === 'all') {
@@ -2119,16 +2136,21 @@ export default {
             });
           } else {
             this.$emit('neuron-connection-feature-click', {
-              filters: this.connectivityfilters,
+              filters: this.connectivityFilters,
               search: '',
             });
           }
         } else {
+          // clicking on paths
+          // do nothing for origin, destination, via
           const searchTerms = resources.join();
-          this.$emit('neuron-connection-feature-click', {
-            filters: [],
-            search: searchTerms,
-          });
+
+          if (this.connectionType.toLowerCase() === 'all') {
+            this.$emit('neuron-connection-feature-click', {
+              filters: [],
+              search: searchTerms,
+            });
+          }
         }
       } else {
         // load and store knowledge
@@ -2164,14 +2186,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
@@ -2179,7 +2201,7 @@ export default {
         )
       } else {
         // full reset
-        this.connectivityfilters = [];
+        this.connectivityFilters = [];
       }
     },
     getKnowledgeTooltip: async function (data) {
@@ -3032,6 +3054,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()
@@ -3509,7 +3532,8 @@ export default {
       }),
       searchTerm: "",
       taxonLeaveDelay: undefined,
-      connectivityfilters: [],
+      connectivityFilters: [],
+      flatmapLegends: [],
     }
   },
   computed: {

package/src/components/MultiFlatmapVuer.vue

@@ -100,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,

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>