@abi-software/map-side-bar 2.7.2-beta.2 → 2.7.2-beta.4

package/src/components/flatmapQueries.js

@@ -0,0 +1,291 @@
+/**
+ * Temporary: flatmapQueries from flatmapVuer
+**/
+const cachedTaxonLabels = [];
+let uberons = [];
+
+const query = async function (flatmapApi, sql, params) {
+  const url = `${flatmapApi}knowledge/query/`;
+  const query = { sql, params };
+
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        "Accept": "application/json; charset=utf-8",
+        "Cache-Control": "no-store",
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(query)
+    });
+
+    if (!response.ok) {
+      throw new Error(`Cannot access ${url}`);
+    }
+    return await response.json();
+  } catch {
+    return {
+      values: []
+    };
+  }
+}
+
+const removeDuplicates = function (arrayOfAnything) {
+  if (!arrayOfAnything) return []
+  return [...new Set(arrayOfAnything.map((e) => JSON.stringify(e)))].map((e) =>
+    JSON.parse(e)
+  )
+}
+
+const queryLabels = async function (flatmapApi, knowledgeSource, entities) {
+  const entityLabels = []
+  const entityArray = Array.isArray(entities) ? entities
+                    : entities ? [entities]
+                    : []
+  if (entityArray.length > 0) {
+    const rows = await query(
+      flatmapApi,
+      `select source, entity, knowledge from knowledge
+        where (source=? or source is null)
+        and entity in (?${', ?'.repeat(entityArray.length-1)})
+        order by entity, source desc`,
+      [knowledgeSource, ...entityArray]
+    )
+    let last_entity = null
+    for (const row of rows.values) {
+        // In entity, source[desc] order; we use the most recent label
+        if (row[1] !== last_entity) {
+            const knowledge = JSON.parse(row[2])
+            entityLabels.push({
+                entity: row[1],
+                label: knowledge['label'] || row[1]
+            })
+            last_entity = row[1]
+        }
+    }
+  }
+  return entityLabels
+}
+
+const inArray = function (ar1, ar2) {
+  if (!ar1 || !ar2) return false
+  let as1 = JSON.stringify(ar1)
+  let as2 = JSON.stringify(ar2)
+  return as1.indexOf(as2) !== -1
+}
+
+const findComponents = function (connectivity) {
+  let dnodes = connectivity.connectivity.flat() // get nodes from edgelist
+  let nodes = removeDuplicates(dnodes)
+
+  let found = []
+  let terminal = false
+  nodes.forEach((node) => {
+    terminal = false
+    // Check if the node is an destination or origin (note that they are labelled dendrite and axon as opposed to origin and destination)
+    if (inArray(connectivity.axons, node)) {
+      terminal = true
+    }
+    if (connectivity.somas && inArray(connectivity.somas, node)) {
+      terminal = true
+    }
+    if (inArray(connectivity.dendrites, node)) {
+      terminal = true
+    }
+    if (!terminal) {
+      found.push(node)
+    }
+  })
+
+  return found
+}
+
+const findAllIdsFromConnectivity = function (connectivity) {
+  let dnodes = connectivity.connectivity.flat() // get nodes from edgelist
+  let nodes = [...new Set(dnodes)] // remove duplicates
+  let found = []
+  nodes.forEach((n) => {
+    if (Array.isArray(n)) {
+      found.push(n.flat())
+    } else {
+      found.push(n)
+    }
+  })
+  return [...new Set(found.flat())]
+}
+
+const findTaxonomyLabels = async function (flatmapApi, knowledgeSource, taxonomies) {
+  const intersectionTaxonomies = taxonomies.filter((taxonomy) =>
+    cachedTaxonLabels.some((obj) => obj.taxon === taxonomy)
+  );
+
+  const foundCachedTaxonLabels = cachedTaxonLabels.filter((obj) =>
+    intersectionTaxonomies.includes(obj.taxon)
+  );
+
+  const leftoverTaxonomies = taxonomies.filter((taxonomy) =>
+    !intersectionTaxonomies.includes(taxonomy)
+  );
+
+  if (!leftoverTaxonomies.length) {
+    return foundCachedTaxonLabels;
+  } else {
+    const entityLabels = await queryLabels(flatmapApi, knowledgeSource, leftoverTaxonomies);
+    if (entityLabels.length) {
+      entityLabels.forEach((entityLabel) => {
+        let { entity: taxon, label } = entityLabel;
+        if (label === 'Mammalia') {
+          label = 'Mammalia not otherwise specified'
+        }
+        const item = { taxon, label };
+        foundCachedTaxonLabels.push(item);
+        cachedTaxonLabels.push(item);
+      });
+      return foundCachedTaxonLabels;
+    }
+  }
+}
+
+const createLabelLookup = function (flatmapApi, knowledgeSource, _uberons) {
+  return new Promise(async (resolve) => {
+    let uberonMap = {}
+    uberons = []
+    const entityLabels = await findTaxonomyLabels(flatmapApi, knowledgeSource, _uberons);
+    if (entityLabels.length) {
+      entityLabels.forEach((entityLabel) => {
+        const { taxon: entity, label } = entityLabel;
+        uberonMap[entity] = label;
+        uberons.push({
+          id: entity,
+          name: label,
+        })
+      });
+      resolve(uberonMap)
+    }
+  })
+}
+
+const findIfNodeIsSingle = function (node) {
+  if (node.length === 1) { // If the node is in the form [id]
+    console.error("Server returns a single node", node)
+    return node[0]
+  } else {
+    if (node.length === 2 && node[1].length === 0) { // If the node is in the form [id, []]
+      return node[0]
+    } else {
+      return false // If the node is in the form [id, [id1, id2]]
+    }
+  }
+}
+
+const createLabelFromNeuralNode = function (node, lookUp) {
+
+  // Check if the node is a single node or a node with multiple children
+  let nodeIsSingle = findIfNodeIsSingle(node)
+
+  // Case where node is in the form [id]
+  if (nodeIsSingle) {
+    return lookUp[nodeIsSingle]
+  }
+
+  // Case where node is in the form [id, [id1 (,id2)]]
+  let label = lookUp[node[0]]
+  if (node.length === 2 && node[1].length > 0) {
+    node[1].forEach((n) => {
+      if (lookUp[n] == undefined) {
+        label += `, ${n}`
+      } else {
+        label += `, ${lookUp[n]}`
+      }
+    })
+  }
+  return label
+}
+
+const flattenConntectivity = function (connectivity) {
+  let dnodes = connectivity.flat() // get nodes from edgelist
+  let nodes = [...new Set(dnodes)] // remove duplicates
+  let found = []
+  nodes.forEach((n) => {
+    if (Array.isArray(n)) {
+      found.push(n.flat())
+    } else {
+      found.push(n)
+    }
+  })
+  return found.flat()
+}
+
+const flattenAndFindDatasets = function (components, axons, dendrites) {
+  // process the nodes for finding datasets (Note this is not critical to the tooltip, only for the 'search on components' button)
+  let componentsFlat = flattenConntectivity(components)
+  let axonsFlat = flattenConntectivity(axons)
+  let dendritesFlat = flattenConntectivity(dendrites)
+
+  // Filter for the anatomy which is annotated on datasets
+  const destinationsWithDatasets = uberons.filter(
+    (ub) => axonsFlat.indexOf(ub.id) !== -1
+  )
+  const originsWithDatasets = uberons.filter(
+    (ub) => dendritesFlat.indexOf(ub.id) !== -1
+  )
+  const componentsWithDatasets = uberons.filter(
+    (ub) => componentsFlat.indexOf(ub.id) !== -1
+  )
+
+  return {
+    destinationsWithDatasets,
+    originsWithDatasets,
+    componentsWithDatasets
+  }
+}
+
+export const processConnectivity = async function (flatmapApi, knowledgeSource, connectivity) {
+  return new Promise((resolve) => {
+    // Filter the origin and destinations from components
+    let components = findComponents(connectivity)
+
+    // Remove duplicates
+    let axons = removeDuplicates(connectivity.axons)
+    //Somas will become part of origins, support this for future proof
+    let dendrites = []
+    if (connectivity.somas && connectivity.somas.length > 0) {
+      dendrites.push(...connectivity.somas)
+    }
+    if (connectivity.dendrites && connectivity.dendrites.length > 0) {
+      dendrites.push(...connectivity.dendrites)
+    }
+    dendrites = removeDuplicates(dendrites)
+
+    // Create list of ids to get labels for
+    let conIds = findAllIdsFromConnectivity(connectivity)
+
+    // Create readable labels from the nodes. Setting this to 'this.origins' updates the display
+    createLabelLookup(flatmapApi, knowledgeSource, conIds).then((lookUp) => {
+      const _destinations = axons.map((a) =>
+        createLabelFromNeuralNode(a, lookUp)
+      )
+      const _origins = dendrites.map((d) =>
+        createLabelFromNeuralNode(d, lookUp)
+      )
+      const _components = components.map((c) =>
+        createLabelFromNeuralNode(c, lookUp)
+      )
+      const withDatasets = flattenAndFindDatasets(components, axons, dendrites)
+      const result = {
+        ids: {
+          axons: axons,
+          dendrites: dendrites,
+          components: components,
+        },
+        labels: {
+          destinations: _destinations,
+          origins: _origins,
+          components: _components,
+        },
+        withDatasets
+      }
+      resolve(result);
+    })
+  })
+}

package/src/components.d.ts

@@ -9,14 +9,32 @@ declare module 'vue' {
   export interface GlobalComponents {
     AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
-    ConnectivityCard: typeof import('./components/ConnectivityCard.vue')['default']
-    ConnectivityExplorer: typeof import('./components/ConnectivityExplorer.vue')['default']
     ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
     DatasetCard: typeof import('./components/DatasetCard.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
+    ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
+    ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
+    ElIconWarnTriangleFilled: typeof import('@element-plus/icons-vue')['WarnTriangleFilled']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
@@ -24,4 +42,7 @@ declare module 'vue' {
     SidebarContent: typeof import('./components/SidebarContent.vue')['default']
     Tabs: typeof import('./components/Tabs.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

package/src/exampleConnectivityInput.js

@@ -287,4 +287,4 @@ export default {
         "Domestic Pig"
     ],
     "knowledge-source": "sckan-2024-03-26-npo",
-}
+}

package/src/components/ConnectivityCard.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="connectivity-card-container" ref="container">
-    <div class="connectivity-card" ref="card">
-      <div class="seperator-path"></div>
-      <div class="card" @click="cardClicked(entry)">
-        <div class="title">{{ 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: () => {},
-    },
-  },
-  methods: {
-    cardClicked: function (data) {
-      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>