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

package/package.json

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

package/src/App.vue

@@ -16,22 +16,22 @@
       <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"
+      :connectivityEntry="connectivityEntry"
+      :connectivityKnowledge="connectivityKnowledge"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
-      @connectivity-component-click="onConnectivityComponentClick"
+      @connectivity-hovered="onConnectivityHovered"
       @actionClick="action"
+      @connectivity-explorer-clicked="onConnectivityExplorerClicked"
     />
   </div>
 </template>
@@ -43,8 +43,24 @@ import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
 import exampleConnectivityInput from './exampleConnectivityInput.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 +110,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"
-      },
-      contextArray: [null, null],
-      tabArray: [
-        { title: 'Flatmap', id: 1, type: 'search'},
-        { title: 'Connectivity', id: 2, type: 'connectivity' },
-        { title: 'Annotation', id: 3, type: 'annotation' },
-      ],
+      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"
+      }],
       sideBarVisibility: true,
       envVars: {
         API_LOCATION: import.meta.env.VITE_APP_API_LOCATION,
@@ -127,8 +135,7 @@ export default {
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
         FLATMAPAPI_LOCATION: import.meta.env.VITE_FLATMAPAPI_LOCATION,
       },
-      connectivityInput: exampleConnectivityInput,
-      activeId: 1,
+      connectivityEntry: [],
       createData: {
         toBeConfirmed: false,
         points: [],
@@ -137,17 +144,66 @@ export default {
         y: 0,
       },
       createDataSet: false,
+      sckanVersion: 'sckan-2024-09-21-npo',
+      flatmapKnowledge: [],
+      connectivityKnowledge: [],
+      query: '',
+      filter: [],
+      target: [],
     }
   },
   methods: {
+    loadConnectivityKnowledge: async function () {
+      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 (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 = [], paths = [];
+        const labels = ['neuron type aacar 11'];
+        flag = 'label';
+        order = labels;
+        if (labels.length === 1) {
+          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 (!this.flatmapKnowledge.length) {
+        this.loadConnectivityKnowledge();
+      }
+      if (data.id === 2) {
+        this.connectivityQueryFilter(data)
+      }
     },
     // For connectivity input actions
     action: function (action) {
@@ -280,11 +336,19 @@ 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)
+    },
+    onConnectivityExplorerClicked: function () {
+      this.connectivityEntry = [...exampleConnectivityInput]
     }
   },
-  mounted: function () {
+  mounted: async function () {
     console.log('mounted app')
     EventBus.on('contextUpdate', (payLoad) => {
       console.log('contextUpdate', payLoad)

package/src/assets/pagination.scss

@@ -0,0 +1,21 @@
+@import '_variables';
+
+.pagination {
+  padding-bottom: 16px;
+  background-color: white;
+  font-weight: bold;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.pagination :deep(button) {
+  background-color: white !important;
+}
+.pagination :deep(li) {
+  background-color: white !important;
+}
+.pagination :deep(li.is-active) {
+  color: $app-primary-color;
+}

package/src/components/AnnotationTool.vue

@@ -65,7 +65,7 @@ export default {
   },
   props: {
     annotationEntry: {
-      type: Object,
+      type: Array,
     },
     createData: {
       type: Object,

package/src/components/ConnectivityCard.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="connectivity-card-container" ref="container">
+    <div class="connectivity-card" ref="card">
+      <div class="seperator-path"></div>
+      <div v-loading="loading" class="card" @click="cardClicked(entry)">
+        <div class="title">{{ capitalise(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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ConnectivityCard",
+  data() {
+    return {
+      displayFields: ["id"],
+    };
+  },
+  props: {
+    /**
+     * Object containing information for
+     * the required viewing.
+     */
+    entry: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    loading: function () {
+      // Only when click on overlay paths
+      if ("detailsReady" in this.entry) {
+        return !this.entry.detailsReady;
+      }
+      return false;
+    },
+  },
+  methods: {
+    capitalise: function (text) {
+      if (text) return text.charAt(0).toUpperCase() + text.slice(1);
+      return "";
+    },
+    cardClicked: function (data) {
+      if (!this.loading) {
+        this.$emit("connectivity-explorer-clicked", data);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.connectivity-card {
+  padding-left: 5px;
+  position: relative;
+  min-height: 5rem;
+}
+
+.card {
+  padding-top: 18px;
+  padding-left: 6px;
+  cursor: pointer;
+}
+
+.title {
+  padding-bottom: 0.75rem;
+  font-weight: bold;
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+}
+
+.details {
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+}
+
+.button {
+  margin-right: 3.5rem;
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: normal;
+  background-color: $app-primary-color;
+  border: $app-primary-color;
+  color: white;
+  margin-top: 8px;
+}
+</style>