@abi-software/map-side-bar 2.7.2-beta.0 → 2.7.2-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.7.2-beta.0",
+  "version": "2.7.2-beta.1",
   "files": [
     "dist/*",
     "src/*",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.4.1-beta.0",
+    "@abi-software/map-utilities": "^1.4.0",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

package/src/App.vue

@@ -16,21 +16,21 @@
       <el-button @click="keywordSearch">keyword search</el-button>
       <el-button @click="getFacets">Get facets</el-button>
       <el-button @click="toggleCreateData">Create Data/Annotation</el-button>
+      <el-button @click="openConnectivitySearch()">Connectivity Search</el-button>
     </div>
     <SideBar
       :envVars="envVars"
       class="side-bar"
       ref="sideBar"
       :visible="sideBarVisibility"
-      :tabs="tabs"
-      :activeTabId="activeId"
       :annotationEntry="annotationEntry"
       :createData="createData"
       :connectivityInfo="connectivityInput"
-      @tabClicked="tabClicked"
+      :connectivityKnowledge="connectivityKnowledge"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
-      @connectivity-component-click="onConnectivityComponentClick"
+      @connectivity-clicked="openConnectivitySearch"
+      @connectivity-hovered="onConnectivityHovered"
       @actionClick="action"
     />
   </div>
@@ -39,12 +39,31 @@
 <script>
 /* eslint-disable no-alert, no-console */
 // optionally import default styles
+import { markRaw } from "vue";
 import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
 import exampleConnectivityInput from './exampleConnectivityInput.js'
+// import { FlatmapQueries } from "@abi-software/map-utilities/src/services/flatmapQueries.js";
+// import { getKnowledgeSource, loadAndStoreKnowledge } from "@abi-software/map-utilities/src/services/flatmapKnowledge.js";
+
 
 const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
+const flatmapQuery = (flatmapApi, sql) => {
+  const data = { sql: sql };
+  return fetch(`${flatmapApi}knowledge/query/`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  })
+    .then((response) => response.json())
+    .catch((error) => {
+      console.error("Error:", error);
+    });
+};
+
 // let testContext = {
 //   "description": "3D digital tracings of the enteric plexus obtained from seven subjects (M11, M16, M162, M163, M164, M168) are mapped randomly on mouse proximal colon. The data depicts individual neural wiring patterns in enteric microcircuits, and revealed both neuron and fiber units wired in a complex organization.",
 //   "heading": "Digital tracings of enteric plexus",
@@ -94,27 +113,19 @@ export default {
   components: {
     SideBar,
   },
-  computed: {
-    tabs: function () {
-      let temp = [...this.tabArray]
-      for (let i in this.tabArray) {
-        temp[i].contextCard = this.contextArray[i]
-      }
-      return temp
-    },
+  provide() {
+    return {
+      $annotator: undefined,
+      userApiKey: undefined,
+    }
   },
   data: function () {
     return {
       annotationEntry: {
-        featureId :"epicardium",
-        resourceId: "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json","resource":"https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json"
+        featureId: "epicardium",
+        resourceId: "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json",
+        "resource": "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json"
       },
-      contextArray: [null, null],
-      tabArray: [
-        { title: 'Flatmap', id: 1, type: 'search'},
-        { title: 'Connectivity', id: 2, type: 'connectivity' },
-        { title: 'Annotation', id: 3, type: 'annotation' },
-      ],
       sideBarVisibility: true,
       envVars: {
         API_LOCATION: import.meta.env.VITE_APP_API_LOCATION,
@@ -128,7 +139,6 @@ export default {
         FLATMAPAPI_LOCATION: import.meta.env.VITE_FLATMAPAPI_LOCATION,
       },
       connectivityInput: exampleConnectivityInput,
-      activeId: 1,
       createData: {
         toBeConfirmed: false,
         points: [],
@@ -137,17 +147,75 @@ export default {
         y: 0,
       },
       createDataSet: false,
+      sckanVersion: 'sckan-2024-09-21-npo',
+      flatmapKnowledge: [],
+      connectivityKnowledge: [],
+      query: '',
+      filter: [],
+      target: [],
     }
   },
   methods: {
+    loadConnectivityKnowledge: async function (flatmap) {
+      // const sckanVersion = getKnowledgeSource(flatmap);
+      // const flatmapQueries = markRaw(new FlatmapQueries());
+      // flatmapQueries.initialise(this.envVars.FLATMAPAPI_LOCATION);
+      // const knowledge = await loadAndStoreKnowledge(flatmap, flatmapQueries);
+      const sql = `select knowledge from knowledge
+        where source="${this.sckanVersion}"
+        order by source desc`;
+      const response = await flatmapQuery(this.envVars.FLATMAPAPI_LOCATION, sql);
+      const mappedData = response.values.map(x => x[0]);
+      const knowledge = mappedData.map(x => JSON.parse(x));
+      this.flatmapKnowledge = knowledge.filter((item) => {
+        if (item.source === this.sckanVersion && item.connectivity?.length) return true;
+        return false;
+      });
+      this.connectivityKnowledge = this.flatmapKnowledge;
+    },
+    connectivityQueryFilter: async function (flatmap, payload) {
+      let results = this.flatmapKnowledge;
+      if (payload.type === "query-update") {
+        if (this.query !== payload.value) this.target = [];
+        this.query = payload.value;
+      } else if (payload.type === "filter-update") {
+        this.filter = payload.value;
+        this.target = [];
+      } else if (payload.type === "query-filter-update") {
+        this.query = payload.query;
+        this.filter = payload.filter;
+        this.target = payload.data;
+      }
+      if (this.query) {
+        let flag = "", order = [], suggestions = [], paths = [];
+        // this.searchSuggestions(this.query, suggestions);
+        // const labels = [...new Set(suggestions)];
+        const labels = ['neuron type aacar 11'];
+        flag = 'label';
+        order = labels;
+        if (labels.length === 1) {
+          // const options = {
+          //   type: this.filter.map(f => f.facet.toLowerCase()),
+          //   target: this.target.map(d => d.id),
+          // };
+          // paths = await flatmap.retrieveConnectedPaths(this.query, options);
+          paths =['ilxtr:neuron-type-aacar-11', 'ilxtr:neuron-type-bolew-unbranched-11'];
+          flag = 'id';
+          order = [this.query, ...paths.filter(item => item !== this.query)];
+        }
+        results = results.filter(item => paths.includes(item.id) || labels.includes(item.label));
+        results.sort((a, b) => order.indexOf(a[flag]) - order.indexOf(b[flag]));
+      }
+      this.connectivityKnowledge = results;
+    },
     hoverChanged: function (data) {
       console.log('hoverChanged', data)
     },
     searchChanged: function (data) {
       console.log(data)
-    },
-    tabClicked: function (tab) {
-      this.activeId = tab.id
+      if (data.id === 4) {
+        this.connectivityQueryFilter({}, data)
+      }
     },
     // For connectivity input actions
     action: function (action) {
@@ -279,11 +347,16 @@ export default {
         this.createDataSet = false
       }
     },
-    onConnectivityComponentClick: function(data) {
-      console.log("onConnectivityComponentClick" , data)
+    onConnectivityHovered: function(data) {
+      console.log("onConnectivityHovered" , data)
+    },
+    openConnectivitySearch: function (entry) {
+      const query = entry ? entry.query : 'ilxtr:neuron-type-aacar-5'
+      const filter = entry ? entry.filter : []
+      this.$refs.sideBar.openConnectivitySearch(filter, query)
     }
   },
-  mounted: function () {
+  mounted: async function () {
     console.log('mounted app')
     EventBus.on('contextUpdate', (payLoad) => {
       console.log('contextUpdate', payLoad)
@@ -291,6 +364,9 @@ export default {
     EventBus.on('datalink-clicked', (payLoad) => {
       console.log('datalink-clicked', payLoad)
     });
+    setTimeout(()=>{
+      this.loadConnectivityKnowledge({ 'provenance': { 'connectivity': { 'knowledge-source': this.sckanVersion } } });
+    }, 2000)
   },
 }
 </script>

package/src/components/ConnectivityCard.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="connectivity-card-container" ref="container">
+    <div class="connectivity-card" ref="card">
+      <div class="seperator-path"></div>
+      <div class="card">
+        <div class="title" @click="cardClicked(entry)">{{ entry.label }}</div>
+        <template v-for="field in displayFields" :key="field">
+          <div class="details" v-if="entry[field]">
+            <strong>{{ field }}:</strong> {{ entry[field] }}
+          </div>
+        </template>
+        <el-button @click="cardClicked(entry)" size="small" class="button">
+          View connectivity
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import EventBus from "./EventBus.js";
+
+export default {
+  data() {
+    return {
+      displayFields: ["label", "id"],
+    };
+  },
+  name: "ConnectivityCard",
+  props: {
+    /**
+     * Object containing information for
+     * the required viewing.
+     */
+    entry: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  methods: {
+    cardClicked: function (data) {
+      EventBus.emit("connectivity-explorer-clicked", data);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.connectivity-card {
+  padding-left: 5px;
+  position: relative;
+  min-height: 8.5rem;
+}
+
+.card {
+  padding-top: 18px;
+  padding-left: 6px;
+}
+
+.title {
+  padding-bottom: 0.75rem;
+  font-weight: bold;
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+  cursor: pointer;
+}
+
+.details {
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+}
+
+.button {
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: normal;
+  background-color: $app-primary-color;
+  border: $app-primary-color;
+  color: white;
+  margin-top: 8px;
+}
+</style>