diff --git a/package-lock.json b/package-lock.json
index c5fe3122..443230ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.13.0",
+  "version": "2.13.0-acupoint.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@abi-software/map-side-bar",
-      "version": "2.13.0",
+      "version": "2.13.0-acupoint.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@abi-software/gallery": "1.3.0",
@@ -779,15 +779,19 @@
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.4.0",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "eslint-visitor-keys": "^3.3.0"
+        "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
       "peerDependencies": {
         "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
@@ -823,9 +827,10 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.57.0",
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
@@ -850,11 +855,13 @@
       "license": "MIT"
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.14",
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "deprecated": "Use @eslint/config-array instead",
       "dev": true,
-      "license": "Apache-2.0",
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.2",
+        "@humanwhocodes/object-schema": "^2.0.3",
         "debug": "^4.3.1",
         "minimatch": "^3.0.5"
       },
@@ -876,8 +883,10 @@
     },
     "node_modules/@humanwhocodes/object-schema": {
       "version": "2.0.3",
-      "dev": true,
-      "license": "BSD-3-Clause"
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true
     },
     "node_modules/@iconify-json/simple-icons": {
       "version": "1.2.26",
@@ -2885,15 +2894,17 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.57.0",
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.0",
-        "@humanwhocodes/config-array": "^0.11.14",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "@ungap/structured-clone": "^1.2.0",
@@ -2939,24 +2950,25 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "9.24.0",
+      "version": "9.33.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.33.0.tgz",
+      "integrity": "sha512-174lJKuNsuDIlLpjeXc5E2Tss8P44uIimAfGD0b90k0NoirJqpG7stLuU9Vp/9ioTOrQdWVREc4mRd1BD+CvGw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "globals": "^13.24.0",
         "natural-compare": "^1.4.0",
         "nth-check": "^2.1.1",
         "postcss-selector-parser": "^6.0.15",
-        "semver": "^7.6.0",
-        "vue-eslint-parser": "^9.4.2",
+        "semver": "^7.6.3",
+        "vue-eslint-parser": "^9.4.3",
         "xml-name-validator": "^4.0.0"
       },
       "engines": {
         "node": "^14.17.0 || >=16.0.0"
       },
       "peerDependencies": {
-        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
+        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0"
       }
     },
     "node_modules/eslint-scope": {
@@ -4280,17 +4292,6 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/lru-cache": {
-      "version": "6.0.0",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "license": "MIT",
@@ -5532,12 +5533,10 @@
       "peer": true
     },
     "node_modules/semver": {
-      "version": "7.6.0",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -6564,9 +6563,10 @@
       }
     },
     "node_modules/vue-eslint-parser": {
-      "version": "9.4.2",
+      "version": "9.4.3",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
+      "integrity": "sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "debug": "^4.3.4",
         "eslint-scope": "^7.1.1",
@@ -6713,11 +6713,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/yallist": {
-      "version": "4.0.0",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "dev": true,
diff --git a/package.json b/package.json
index 307f953f..5952d51d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.13.0",
+  "version": "2.13.0-acupoint.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
diff --git a/src/App.vue b/src/App.vue
index 3299be0d..c82fe1cb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,6 +18,7 @@
       <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="searchAcupoints">Search Acupoints</el-button>
       <el-button @click="openConnectivitySearch()">Connectivity Search</el-button>
     </div>
     <SideBar
@@ -26,14 +27,19 @@
       ref="sideBar"
       :visible="sideBarVisibility"
       :annotationEntry="annotationEntry"
+      :acupointsInfoList="acupoints"
       :createData="createData"
       :connectivityEntry="connectivityEntry"
       :connectivityKnowledge="connectivityKnowledge"
       :showVisibilityFilter="true"
+      :tabs="tabArray"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
       @connectivity-hovered="onConnectivityHovered"
       @actionClick="action"
+      @acupoints-clicked="onAcupointsClicked"
+      @acupoints-hovered="onAcupointsHovered"
+      @acupoints-result="onAcupointsResult"
       @connectivity-collapse-change="onConnectivityCollapseChange"
     />
   </div>
@@ -42,6 +48,7 @@
 <script>
 /* eslint-disable no-alert, no-console */
 // optionally import default styles
+import { acupointEntries } from './acupoints.js'
 import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
 import exampleConnectivityInput from './exampleConnectivityInput.js'
@@ -121,6 +128,14 @@ export default {
   },
   data: function () {
     return {
+      acupoints: acupointEntries,
+      contextArray: [null, null],
+      tabArray: [
+        { title: 'Dataset Explorer', id: 1, type: 'datasetExplorer', closable: false },
+        { title: 'Connectivity Explorer', id: 2, type: 'connectivityExplorer', closable: false },
+        { title: 'Annotation', id: 3, type: 'annotation', closable: true },
+        {title: 'Acupoints', id: 4, type: 'acupoints' },
+      ],
       annotationEntry: [{
         featureId: "epicardium",
         resourceId: "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json",
@@ -155,6 +170,15 @@ export default {
     }
   },
   methods: {
+    onAcupointsClicked: function (data) {
+      console.log("acupoints-clicked", data)
+    },
+    onAcupointsHovered: function (data) {
+      console.log("acupoints-hovered", data)
+    },
+    onAcupointsResult: function (data) {
+      console.log("acupoints-result", data)
+    },
     loadConnectivityKnowledge: async function () {
       const sql = `select knowledge from knowledge
         where source="${this.sckanVersion}"
@@ -231,6 +255,9 @@ export default {
         'http://purl.obolibrary.org/obo/UBERON_0001103'
       )
     },
+    searchAcupoints: function() {
+      this.$refs.sideBar.openAcupointsSearch("LU 1")
+    },
     singleFacets: function () {
       this.$refs.sideBar.addFilter({
         facet: 'Cardiovascular system',
@@ -405,4 +432,4 @@ body {
   align-items: center;
   gap: 0.5rem;
 }
-</style>
+</style>./acupoints.js
diff --git a/src/acupoints.js b/src/acupoints.js
new file mode 100644
index 00000000..330081de
--- /dev/null
+++ b/src/acupoints.js
@@ -0,0 +1,78 @@
+export const acupointEntries = {
+  "LU 1": {
+      "Acupoint": "LU 1",
+      "Label": "LU 1",
+      "Synonym": "Test data",
+      "UMLS CUI": "",
+      "Meridian": "LTest data",
+      "Chinese Name": "Zhongfu",
+      "English Name": "Central Treasury",
+      "Location": " z zxczc.",
+      "Reference": "Test data",
+      "Indications": "Test data",
+      "Acupuncture Method": "Test data",
+      "Vasculature": "Test data",
+      "Innervation": "Test data",
+      "Curated": false,
+      "onMRI": true,
+      "Meridian Point": true,
+      "Link": "https://tara-repository.mgb.org/term_resolution/tara.html"
+  },
+  "LU 2": {
+      "Acupoint": "LU 2",
+      "Label": "LU 2",
+      "Synonym": "Test data",
+      "UMLS CUI": "",
+      "Meridian": "LTest data",
+      "Chinese Name": "Yunmen",
+      "English Name": "Cloud Gate",
+      "Location": " z zxczc.",
+      "Reference": "Test data",
+      "Indications": "Test data",
+      "Acupuncture Method": "Test data",
+      "Vasculature": "Test data",
+      "Innervation": "Test data",
+      "Curated": true,
+      "onMRI": true,
+      "Meridian Point": false,
+      "Link": "https://tara-repository.mgb.org/term_resolution/tara.html"
+  },
+  "ST 3": {
+    "Acupoint": "ST 3",
+    "Label": "ST 3",
+    "Synonym": "Test data",
+    "UMLS CUI": "",
+    "Meridian": "STest data",
+    "Chinese Name": "Cheng Qi",
+    "English Name": "Not Available",
+    "Location": " z zxcxadadadzc.",
+    "Reference": "Test data",
+    "Indications": "Test data",
+    "Acupuncture Method": "Test data",
+    "Vasculature": "Test data",
+    "Innervation": "Test data",
+    "Curated": true,
+    "onMRI": false,
+    "Meridian Point": false,
+    "Link": "https://tara-repository.mgb.org/term_resolution/tara.html"
+  },
+  "LR 4": {
+    "Acupoint": "LR 4",
+    "Label": "LR 4",
+    "Synonym": "Test data",
+    "UMLS CUI": "",
+    "Meridian": "STest data",
+    "Chinese Name": "Zhongfeng",
+    "English Name": "Not Available",
+    "Location": " z zxcxadadadzc.",
+    "Reference": "Test data",
+    "Indications": "Test data",
+    "Acupuncture Method": "Test data",
+    "Vasculature": "Test data",
+    "Innervation": "Test data",
+    "Curated": false,
+    "onMRI": false,
+    "Meridian Point": true,
+    "Link": "https://tara-repository.mgb.org/term_resolution/tara.html"
+  }
+}
\ No newline at end of file
diff --git a/src/components.d.ts b/src/components.d.ts
index cdb0bf47..d901801f 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,6 +7,8 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AcupointsCard: typeof import('./components/AcupointsCard.vue')['default']
+    AcupointsInfoSearch: typeof import('./components/AcupointsInfoSearch.vue')['default']
     AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
     ConnectivityCard: typeof import('./components/ConnectivityCard.vue')['default']
@@ -19,6 +21,8 @@ declare module 'vue' {
     ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
diff --git a/src/components/AcupointsCard.vue b/src/components/AcupointsCard.vue
new file mode 100644
index 00000000..4773e8e0
--- /dev/null
+++ b/src/components/AcupointsCard.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="dataset-card-container" ref="container">
+    <div class="dataset-card" ref="card">
+      <div class="seperator-path"></div>
+      <div class="card"
+        @click="cardClicked(entry)"
+        @mouseover="cardHovered(entry)"
+        @mouseleave="cardHovered(undefined)"
+      >
+        <div class="card-right">
+          <el-collapse class="collapse-card" v-model="expanded" @change="expandedChanged">
+            <el-collapse-item :title="entry.Acupoint" name="1" class="collapse-card">
+              <template #title>
+                <div>
+                  <span class="title">{{ entry.Acupoint }}</span>
+                  <el-tag
+                    v-for="tag in tags"
+                    :key="tag.name"
+                    :type="tag.type"
+                    effect="plain"
+                    class="acupointTags"
+                    size="small"
+                  >
+                    {{ tag.name }}
+                  </el-tag>
+                </div>
+              </template>
+              <template v-for="field in displayFields" :key="field['name']">
+                <div class="details" >
+                  <strong>{{ field['name'] }}: </strong>
+                  <template v-if="field['name'] === 'Link'">
+                    <a :href="entry['Link']" target="_blank">
+                      <span>
+                        Click here for more information
+                      </span>
+                    </a>
+                  </template>
+                  <template v-else>
+                    <span
+                      v-if="!field['isEditing']"
+                      @click="setFieldToEditing(field)"
+                    >
+                      {{ entry[field['name']] || 'Not Available' }}
+                    </span>
+                    <el-input
+                      v-else
+                      v-model="entry[field['name']]"
+                      @blur="field['isEditing'] = false"
+                      @keyup.enter="field['isEditing'] = false"
+                      @vue:mounted="inputMounted"
+                      type="textarea"
+                    />
+                  </template>
+                </div>
+              </template>
+          </el-collapse-item>
+          </el-collapse>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import EventBus from './EventBus.js'
+import {
+  ElCollapse as Collapse,
+  ElCollapseItem as CollapseItem,
+  ElTag as Tag
+} from 'element-plus'
+/* eslint-disable no-alert, no-console */
+
+export default {
+  components: {
+    Collapse,
+    CollapseItem,
+    Tag
+  },
+  data() {
+    return {
+      expanded: [],
+      tags: [],
+      displayFields: [
+        {name: "Synonym", isEditing: false},
+        {name: "Chinese Name", isEditing: false},
+        {name: "English Name", isEditing: false},
+        {name: "Meridian", isEditing: false},
+        {name: "Reference", isEditing: false},
+        {name: "Indications", isEditing: false},
+        {name: "Acupuncture Method", isEditing: false},
+        {name: "Vasculature", isEditing: false},
+        {name: "Innervation", isEditing: false},
+        {name: "Link", isEditing: false},
+        //{name: "Notes", isEditing: false},
+      ]
+    }
+  },
+  name: 'AcupointsCard',
+  props: {
+    /**
+     * Object containing information for
+     * the required viewing.
+     */
+    entry: {
+      type: Object,
+      default: () => {},
+    },
+    allowEditing: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  created: function () {
+    if (this.entry["Meridian Point"]) {
+      this.tags.push({ name: 'WHO', type: 'success' })
+    }
+    if (this.entry.Meridian) {
+      this.tags.push({ name: this.entry.Meridian, type: 'info' })
+    }
+    if (!this.entry.onMRI) {
+      this.tags.push({ name: 'Implied', type: 'info' })
+    }
+    if (this.entry.userDefined) {
+      this.tags.push({ name: 'User Defined', type: 'warning' })
+    }
+  },
+  methods: {
+    expandedChanged: function() {
+      if (this.expanded.length > 0) {
+        EventBus.emit('acupoints-clicked', this.entry);
+      }
+    },
+    cardClicked: function (data) {
+      EventBus.emit('acupoints-clicked', data);
+    },
+    cardHovered: function (data) {
+      EventBus.emit('acupoints-hovered', data);
+    },
+    inputMounted: function(event) {
+      event.el?.querySelector('textarea')?.focus();
+    },
+    setFieldToEditing: function(field) {
+      if (this.allowEditing) {
+        field['isEditing'] = true;
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+:deep(.el-collapse-item__header) {
+  font-weight: bold;
+}
+
+:deep(.el-collapse-item__content) {
+  padding-bottom: 4px;
+}
+
+:deep(.el-collapse-item__wrap) {
+  border: none;
+}
+
+.collapse-card {
+  border-top: none;
+  :deep(.el-collapse-item__header) {
+    border-bottom: none;
+  }
+}
+
+.dataset-card {
+  padding-left: 5px;
+  padding-right: 5px;
+  position: relative;
+}
+
+.title {
+  padding-bottom: 0.75rem;
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+  color: #484848;
+  cursor: pointer;
+}
+.card {
+  padding-top: 12px;
+  position: relative;
+  display: flex;
+}
+
+.card-left {
+  flex: 1;
+}
+
+.card-right {
+  flex: 1.3;
+  padding-left: 6px;
+}
+
+.button {
+  z-index: 10;
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  background-color: $app-primary-color;
+  border: $app-primary-color;
+  color: white;
+  cursor: pointer;
+  margin-top: 8px;
+}
+
+.button:hover {
+  background-color: $app-primary-color;
+  color: white;
+}
+
+.banner-img {
+  width: 128px;
+  height: 128px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
+  background-color: #ffffff;
+  cursor: pointer;
+}
+.details {
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+  color: #484848;
+}
+
+.badges-container {
+  margin-top: 0.75rem;
+}
+
+.loading-icon {
+  z-index: 20;
+  width: 40px;
+  height: 40px;
+  left: 80px;
+}
+
+.loading-icon :deep(.el-loading-mask) {
+  background-color: rgba(117, 190, 218, 0) !important;
+}
+
+.loading-icon :deep(.el-loading-spinner .path) {
+  stroke: $app-primary-color;
+}
+
+.title {
+  font: inherit;
+  margin-top:4px;
+  padding-right:30px;
+  vertical-align:middle;
+}
+
+.acupointTags {
+  margin-right:4px;
+}
+
+.float-button-container {
+  position: absolute;
+  bottom: 8px;
+  right: 16px;
+  opacity: 0;
+  visibility: hidden;
+
+  .card:hover & {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+</style>
diff --git a/src/components/AcupointsInfoSearch.vue b/src/components/AcupointsInfoSearch.vue
new file mode 100644
index 00000000..9241e182
--- /dev/null
+++ b/src/components/AcupointsInfoSearch.vue
@@ -0,0 +1,624 @@
+<template>
+  <div v-if="entry" class="main">
+    <div class="header">
+      <el-row>
+        <el-input
+          class="search-input"
+          placeholder="Search"
+          v-model="searchInput"
+          @keyup="search(searchInput)"
+          clearable
+          @clear="clearSearchClicked"
+        ></el-input>
+        <el-button
+          v-show="false"
+          type="primary"
+          class="button"
+          @click="search(searchInput)"
+          size="large"
+        >
+          Search
+        </el-button>
+      </el-row>
+    </div>
+    <SearchFilters
+      v-if="filterEntry.options"
+      class="filters"
+      ref="filtersRef"
+      :entry="filterEntry"
+      @filterResults="filterUpdate"
+      @numberPerPage="numberPerPageUpdate"
+      @cascaderReady="cascaderReady"
+    ></SearchFilters>
+    <div class="content scrollbar" ref="content">
+      <div v-if="paginatedResults.length > 0" v-for="result in paginatedResults" :key="result.Acupoint" class="step-item">
+        <AcupointsCard
+          class="dataset-card"
+          :entry="result"
+          @mouseenter="hoverChanged(result)"
+          @mouseleave="hoverChanged(undefined)"
+        />
+      </div>
+      <div v-else class="error-feedback">
+        No results found - Please change your search / filter criteria.
+      </div>
+      <el-pagination
+        class="pagination"
+        v-model:current-page="page"
+        hide-on-single-page
+        large
+        layout="prev, pager, next"
+        :page-size="numberPerPage"
+        :total="numberOfHits"
+        @current-change="pageChange"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import { markRaw } from 'vue';
+import {
+  ElButton as Button,
+  ElCard as Card,
+  ElCol as Col,
+  ElRadioButton as RadioButton,
+  ElRadioGroup as RadioGroup,
+  ElDrawer as Drawer,
+  ElIcon as Icon,
+  ElInput as Input,
+  ElPagination as Pagination,
+  ElRow as Row,
+} from 'element-plus'
+import AcupointsCard from './AcupointsCard.vue'
+import SearchFilters from "./SearchFilters.vue"
+
+export default {
+  components: {
+    AcupointsCard,
+    Button,
+    Card,
+    Col,
+    RadioButton,
+    RadioGroup,
+    SearchFilters,
+    Drawer,
+    Icon,
+    Input,
+    Pagination,
+    Row
+  },
+  name: 'AcupointsInfoSearch',
+  props: {
+    entry: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  created: function() {
+    if (this.entry) {
+      let entries = Object.values(this.entry)
+      const meridians = []
+      let others = false
+      entries.forEach((acupoint) => {
+        let meridian = acupoint.Meridian
+        if (!meridian) {
+          others = true
+        } else if (!(meridians.includes(meridian))) {
+          meridians.push(meridian)
+        }
+      });
+      meridians.sort();
+      if (others) {
+        meridians.push("Others")
+      }
+      if (meridians.length > 1) {
+        const filterOption = {
+          "key": "acupoints.meridian",
+          "label": "Meridian",
+          "children": [
+          ],
+        }
+        meridians.forEach(meridian => {
+          const entry = {
+            "key": `acupoints.meridian.${meridian}`,
+            "label": meridian,
+            "value": meridian,
+          }
+          filterOption.children.push(entry)
+        })
+        this.filterOptions.unshift(filterOption)
+        this.filters.unshift({
+          "facetPropPath": "acupoints.meridian",
+          "facet": "Show all",
+          "term": "Meridian"
+        })
+      }
+    }
+  },
+  computed: {
+    // This computed property populates filter data's entry object with $data from this sidebar
+    filterEntry: function () {
+      return {
+        numberOfHits: this.numberOfHits,
+        filterFacets: this.filters,
+        options: this.filterOptions,
+        showFilters: true,
+      };
+    },
+  },
+  data: function () {
+    return {
+      filters: [
+          {
+              "facetPropPath": "acupoints.WHO",
+              "facet": "Show all",
+              "term": "WHO",
+
+          },
+          {
+              "facetPropPath": "acupoints.visualized",
+              "facet": "Show all",
+              "term": "Visualized"
+          },
+          {
+              "facetPropPath": "acupoints.implied",
+              "facet": "Show all",
+              "term": "Implied"
+          },
+          {
+              "facetPropPath": "acupoints.userDefined",
+              "facet": "Show all",
+              "term": "User defined"
+          }
+      ],
+      filterOptions: [
+        {
+          "key": "acupoints.visualized",
+          "label": "Visualized",
+          "children": [
+            {
+                "key": "acupoints.visualized.yes",
+                "label": "Visualized",
+                "value": "Visualized>Yes"
+            },
+            {
+              "key": "acupoints.visualized.no",
+              "label": "Non visualized",
+              "value": "Visualized>No"
+            },
+          ],
+        },
+        {
+          "key": "acupoints.implied",
+          "label": "Implied",
+          "children": [
+            {
+                "key": "acupoints.implied.yes",
+                "label": "Implied",
+                "value": "Implied>Yes"
+            },
+            {
+              "key": "acupoints.implied.no",
+              "label": "Non Implied",
+              "value": "Implied>No"
+            },
+          ],
+        },
+        {
+          "key": "acupoints.WHO",
+          "label": "WHO",
+          "children": [
+            {
+                "key": "acupoints.WHO.yes",
+                "label": "WHO",
+                "value": "WHO>Yes"
+            },
+            {
+              "key": "acupoints.WHO.no",
+              "label": "Non WHO",
+              "value": "WHO>No"
+            },
+          ],
+        },
+        {
+          "key": "acupoints.userDefined",
+          "label": "User Defined",
+          "children": [
+            {
+                "key": "acupoints.userDefined.yes",
+                "label": "User data",
+                "value": "userDefined>Yes"
+            },
+            {
+              "key": "acupoints.userDefined.no",
+              "label": "Official data",
+              "value": "userDefined>No"
+            },
+          ],
+        },
+      ],
+      currentFilters: markRaw({
+        curated: "Both",
+        mri: "Both",
+        who: "Both",
+        userDefined: "Both",
+        meridian: {
+          showAll: true,
+          list: []
+        },
+      }),
+      results: [],
+      paginatedResults: [],
+      searchInput: "",
+      lastSearch: "",
+      numberOfHits: 0,
+      numberPerPage: 10,
+      page: 1,
+    }
+  },
+  watch: {
+    entry: {
+      handler: function () {
+        this.filterUpdate(this.filters)
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    cascaderReady: function () {
+      this.cascaderIsReady = true;
+      this.search(this.searchInput);
+    },
+    filterUpdate: function (filters) {
+      this.filters = [...filters]
+      this.currentFilters['meridian']['list'] = []
+      this.filters.forEach((filter) => {
+        if (filter.facetPropPath === "acupoints.visualized") {
+          if (filter.facet === "Visualized") {
+            this.currentFilters['curated'] = 'Curated'
+          } else if (filter.facet === 'Non visualized') {
+            this.currentFilters['curated'] = 'Uncurated'
+          } else {
+            this.currentFilters['curated'] = 'Both'
+          }
+        }
+        if (filter.facetPropPath === "acupoints.implied") {
+          if (filter.facet === "Implied") {
+            this.currentFilters['mri'] = 'Off'
+          } else if (filter.facet === 'Non Implied') {
+            this.currentFilters['mri'] = 'On'
+          } else {
+            this.currentFilters['mri'] = 'Both'
+          }
+        }
+        if (filter.facetPropPath === "acupoints.WHO") {
+          if (filter.facet === "WHO") {
+            this.currentFilters['who'] = 'Yes'
+          } else if (filter.facet === 'Non who') {
+            this.currentFilters['who'] = 'No'
+          } else {
+            this.currentFilters['who'] = 'Both'
+          }
+        }
+        if (filter.facetPropPath === "acupoints.userDefined") {
+          if (filter.facet === "User data") {
+            this.currentFilters['userDefined'] = 'Yes'
+          } else if (filter.facet === 'Official data') {
+            this.currentFilters['userDefined'] = 'No'
+          } else {
+            this.currentFilters['userDefined'] = 'Both'
+          }
+        }
+        if (filter.facetPropPath === "acupoints.meridian") {
+          if (filter.facet === "Show all") {
+            this.currentFilters['meridian']['showAll'] = true
+          } else {
+            this.currentFilters['meridian']['showAll'] = false
+            this.currentFilters['meridian']['list'].push(filter.facet.toLowerCase())
+          }
+        }
+      });
+
+      this.search( this.searchInput)
+
+      //this.search();
+      // this.$emit("search-changed", {
+      //   value: filters,
+      //   tabType: "connectivity",
+      //   type: "filter-update",
+      // });
+    },
+    numberPerPageUpdate: function (val) {
+      this.numberPerPage = val;
+      this.pageChange(1);
+    },
+    hoverChanged: function (data) {
+      this.$emit('hover-changed', data)
+    },
+    resetSearch: function () {
+      this.numberOfHits = 0
+      this.search(this.searchInput)
+    },
+    clearSearchClicked: function () {
+      this.searchInput = '';
+      this.search("");
+    },
+    getFilteredList: function() {
+      let filteredList = Object.values(this.entry)
+      if (this.currentFilters['curated'] !== "Both") {
+        const curated = this.currentFilters['curated'] === "Curated" ? true : false
+        filteredList = filteredList.filter(
+          item => (item.Curated ? true : false) === curated)
+      }
+      if (this.currentFilters['mri'] !== "Both") {
+        const mri = this.currentFilters['mri'] === "On" ? true : false
+        filteredList = filteredList.filter(
+          item => (item.onMRI ? true : false) === mri)
+      }
+      if (this.currentFilters['who'] !== "Both") {
+        const who = this.currentFilters['who'] === "Yes" ? true : false
+        filteredList = filteredList.filter(
+          item => (item["Meridian Point"] ? true : false) === who)
+      }
+      if (this.currentFilters['userDefined'] !== "Both") {
+        const user = this.currentFilters['userDefined'] === "Yes" ? true : false
+        filteredList = filteredList.filter(
+          item => (item["userDefined"] ? true : false) === user)
+      }
+      if (!this.currentFilters['meridian']['showAll']) {
+        filteredList = filteredList.filter((item) => {
+          let meridian = "others"
+          if (item.Meridian) {
+            meridian = item.Meridian.toLowerCase()
+          }
+          return this.currentFilters['meridian']['list'].includes(meridian)
+        })
+      }
+      return filteredList;
+    },
+    search: function(input) {
+      this.results = []
+      let filteredList = this.getFilteredList()
+      if (input === "") {
+        this.results = filteredList
+      } else {
+        const lowerCase = input.toLowerCase()
+        for (const value of filteredList) {
+          const searchFields = [
+            value["Acupoint"],
+            value["Synonym"],
+            value["Chinese Name"],
+            value["English Name"],
+            value["Reference"],
+            value["Indications"],
+            value["Acupuncture Method"],
+            value["Vasculature"],
+            value["Innervation"],
+            value["Note"],
+          ];
+          const allstrings = searchFields.join();
+          const myJSON = allstrings.toLowerCase();
+          if (myJSON.includes(lowerCase)) {
+            this.results.push(value)
+          }
+        }
+      }
+      this.results.sort((a, b) => {
+        if (a["Meridian Point"] == b["Meridian Point"]) {
+          return 0
+        } else if (a["Meridian Point"]) {
+          return -1
+        } else {
+          return 1
+        }
+      })
+
+      const start = this.numberPerPage * (this.page - 1)
+      this.paginatedResults = this.results.slice(start, start + this.numberPerPage)
+      this.numberOfHits = this.results.length
+      this.searchInput = input
+      this.lastSearch = input
+      this.$emit("acupoints-result", {
+        list: this.results
+      });
+    },
+    numberPerPageUpdate: function (val) {
+      this.numberPerPage = val
+      this.pageChange(1)
+    },
+    pageChange: function (page) {
+      this.page = page
+      this.search( this.searchInput)
+    },
+    scrollToTop: function () {
+      if (this.$refs.content) {
+        this.$refs.content.scroll({ top: 0, behavior: 'smooth' })
+      }
+    },
+    resetPageNavigation: function () {
+      this.page = 1
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.acuRadioGroup {
+  padding-top: 8px;
+}
+
+.dataset-card {
+  position: relative;
+
+  &::before {
+    content: "";
+    display: block;
+    width: calc(100% - 15px);
+    height: 100%;
+    position: absolute;
+    top: 7px;
+    left: 7px;
+    border-style: solid;
+    border-radius: 5px;
+    border-color: transparent;
+  }
+
+  &:hover {
+    &::before {
+      border-color: var(--el-color-primary);
+    }
+  }
+}
+
+.main {
+  font-size: 14px;
+  text-align: left;
+  line-height: 1.5em;
+  font-family: Asap, sans-serif, Helvetica;
+  font-weight: 400;
+  /* outline: thin red solid; */
+  overflow-y: auto;
+  scrollbar-width: thin;
+  min-width: 16rem;
+  background-color: #f7faff;
+  height: 100%;
+  border-left: 1px solid var(--el-border-color);
+  border-top: 1px solid var(--el-border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.step-item {
+  font-size: 14px;
+  margin-bottom: 8px;
+  text-align: left;
+}
+
+.search-input {
+  width: 298px !important;
+  height: 40px;
+  padding-right: 14px;
+
+  :deep(.el-input__inner) {
+    font-family: inherit;
+  }
+}
+
+.header {
+  .el-button {
+    font-family: inherit;
+
+    &:hover,
+    &:focus {
+      background: $app-primary-color;
+      box-shadow: -3px 2px 4px #00000040;
+      color: #fff;
+    }
+  }
+}
+
+.pagination {
+  padding-bottom: 16px;
+  background-color: white;
+  padding-left: 95px;
+  font-weight: bold;
+}
+
+.pagination :deep(button) {
+  background-color: white !important;
+}
+.pagination :deep(li) {
+  background-color: white !important;
+}
+.pagination :deep(li.is-active) {
+  color: $app-primary-color;
+}
+
+.error-feedback {
+  font-family: Asap;
+  font-size: 14px;
+  font-style: italic;
+  padding-top: 15px;
+}
+
+.content-card :deep(.el-card__header) {
+  background-color: #292b66;
+  padding: 1rem;
+}
+
+.content-card :deep(.el-card__body) {
+  background-color: #f7faff;
+  overflow-y: hidden;
+  padding: 1rem;
+}
+
+.content {
+  // width: 515px;
+  flex: 1 1 auto;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  border: solid 1px #e4e7ed;
+  background-color: #ffffff;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+  border-radius: var(--el-border-radius-base);
+}
+
+.content :deep(.el-loading-spinner .path) {
+  stroke: $app-primary-color;
+}
+
+.content :deep(.step-item:first-child .seperator-path) {
+  display: none;
+}
+
+.content :deep(.step-item:not(:first-child) .seperator-path) {
+  width: 455px;
+  height: 0px;
+  border: solid 1px #e4e7ed;
+  background-color: #e4e7ed;
+}
+
+.filter-text {
+  top:4px;
+  position:relative;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: #f5f5f5;
+}
+
+.scrollbar::-webkit-scrollbar {
+  width: 12px;
+  right: -12px;
+  background-color: #f5f5f5;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  background-color: #979797;
+}
+
+:deep(.el-input__suffix) {
+  padding-right: 0px;
+}
+
+:deep(.my-drawer) {
+  background: rgba(0, 0, 0, 0);
+  box-shadow: none;
+}
+
+.error-feedback {
+  font-family: Asap;
+  font-size: 14px;
+  font-style: italic;
+  padding-top: 15px;
+}
+</style>
diff --git a/src/components/SearchFilters.vue b/src/components/SearchFilters.vue
index ec21d8b5..5a3a447e 100644
--- a/src/components/SearchFilters.vue
+++ b/src/components/SearchFilters.vue
@@ -105,10 +105,10 @@
             trigger="hover"
             popper-class="filter-help-popover"
           >
-            <template #reference>
+            <template v-if="entry.helper" #reference>
               <MapSvgIcon icon="help" class="help" />
             </template>
-            <div>
+            <div v-if="entry.helper">
               <strong>Within categories:</strong> OR
               <br />
               example: {{ entry.helper.within }}
@@ -362,7 +362,7 @@ export default {
       })
 
       // trigger reactivity only once
-      Object.assign(this.options, processedOptions);
+      Object.assign(this.options, processedOptions)
     },
     populateCascader: function () {
       if (this.entry.options) {
@@ -542,6 +542,13 @@ export default {
         })
         return count
       }
+      const found = facet.children.find((item) => {
+        return item.label === "Show all"
+      })
+      if (found) {
+        return facet.children.length - 1
+      }
+
       return facet.children.length
     },
     /**
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 377bd0bc..d743695c 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -64,6 +64,15 @@
                 @connectivity-item-close="onConnectivityItemClose"
               />
             </template>
+            <template v-else-if="tab.type === 'acupoints' && acupointsInfoList">
+              <acupoints-info-search
+                :ref="'acupointsTab_' + tab.id"
+                :entry="acupointsInfoList"
+                @on-acupoints-click="acupointsClicked"
+                @acupoints-result="acupointsResult"
+                v-show="tab.id === activeTabId"
+              />
+            </template>
             <template v-else>
               <DatasetExplorer
                 class="sidebar-content-container"
@@ -92,6 +101,7 @@ import { ElDrawer as Drawer, ElIcon as Icon } from 'element-plus'
 import DatasetExplorer from './DatasetExplorer.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
+import AcupointsInfoSearch from './AcupointsInfoSearch.vue'
 import AnnotationTool from './AnnotationTool.vue'
 import ConnectivityExplorer from './ConnectivityExplorer.vue'
 import { removeShowAllFacets } from '../algolia/utils.js'
@@ -150,6 +160,13 @@ export default {
       type: Array,
       default: [],
     },
+    /**
+     * The acupoints info to show in sidebar.
+     */
+    acupointsInfoList: {
+      type: Object,
+      default: null,
+    },
     /**
      * The annotation data to show in sidebar.
      */
@@ -203,6 +220,16 @@ export default {
     }
   },
   methods: {
+  /**
+     * This event is emitted with a mouse click on acupoint card
+     * @arg data
+     */
+    acupointsClicked: function (data) {
+      this.$emit('acupoints-clicked', data)
+    },
+    acupointsResult: function (data) {
+      this.$emit('acupoints-result', data)
+    },
     onConnectivityCollapseChange: function (data) {
       this.$emit('connectivity-collapse-change', data)
     },
@@ -294,9 +321,6 @@ export default {
         datasetExplorerTabRef.openSearch(facets, query);
       })
     },
-    /**
-     * Get the ref id of the tab by id and type.
-     */
     getTabRef: function (id, type, switchTab = false) {
       const matchedTab = this.tabEntries.filter((tabEntry) => {
         return (id === undefined || tabEntry.id === id) &&
@@ -406,6 +430,14 @@ export default {
     updateConnectivityError: function (errorInfo) {
       EventBus.emit('connectivity-error', errorInfo);
     },
+    openAcupointsSearch: function (term) {
+      this.drawerOpen = true
+      // Because refs are in v-for, nextTick is needed here
+      this.$nextTick(() => {
+        const tabRef = this.getTabRef(undefined, 'acupoints', true);
+        tabRef.search(term);
+      })
+    },
     /**
      * Store available anatomy facets data for connectivity list component
      */
@@ -502,6 +534,11 @@ export default {
     // This should respect the information provided by the property
     tabEntries: function () {
       return this.tabs.filter((tab) =>
+        (tab.type === "acupoints" &&
+          (
+            this.acupointsInfoList &&
+            Object.keys(this.acupointsInfoList).length > 0
+        )) ||
         tab.type === "datasetExplorer" ||
         tab.type === "connectivityExplorer" ||
         (
@@ -564,6 +601,16 @@ export default {
       this.$emit('connectivity-source-change', payLoad);
     })
 
+    // Emit acupoints clicked event
+    EventBus.on('acupoints-clicked', (payLoad) => {
+      this.$emit('acupoints-clicked', payLoad);
+    })
+
+    // Emit acupoints hovered event
+    EventBus.on('acupoints-hovered', (payLoad) => {
+      this.$emit('acupoints-hovered', payLoad);
+    })
+
     // Get available anatomy facets for the connectivity info
     EventBus.on('available-facets', (payLoad) => {
         this.availableAnatomyFacets = payLoad.find((facet) => facet.label === 'Anatomical Structure').children
diff --git a/src/services/flatmapKnowledge.js b/src/services/flatmapKnowledge.js
new file mode 100644
index 00000000..e5116292
--- /dev/null
+++ b/src/services/flatmapKnowledge.js
@@ -0,0 +1,94 @@
+async function getReferenceConnectivitiesFromStorage(resource) {
+  const flatmapKnowledgeRaw = sessionStorage.getItem('flatmap-knowledge');
+
+  if (flatmapKnowledgeRaw) {
+    const flatmapKnowledge = JSON.parse(flatmapKnowledgeRaw);
+    const dataWithRefs = flatmapKnowledge.filter((x) => x.references && x.references.length);
+    const foundData = dataWithRefs.filter((x) => x.references.includes(resource));
+
+    if (foundData.length) {
+      const featureIds = foundData.map((x) => x.id);
+      return featureIds;
+    }
+  }
+  return [];
+}
+
+async function getReferenceConnectivitiesByAPI(mapImp, resource, flatmapQueries) {
+  const knowledgeSource = getKnowledgeSource(mapImp);
+  const sql = `select knowledge from knowledge
+    where source="${knowledgeSource}" and
+    knowledge like "%${resource}%" order by source desc`;
+  console.log(sql)
+  const response = await flatmapQueries.flatmapQuery(sql);
+  const mappedData = response.values.map((x) => x[0]);
+  const parsedData = mappedData.map((x) => JSON.parse(x));
+  const featureIds = parsedData.map((x) => x.id);
+  return featureIds;
+}
+
+function getKnowledgeSource(mapImp) {
+  let mapKnowledgeSource = '';
+  if (mapImp.provenance?.connectivity) {
+    const sckanProvenance = mapImp.provenance.connectivity;
+    if ('knowledge-source' in sckanProvenance) {
+      mapKnowledgeSource = sckanProvenance['knowledge-source'];
+    } else if ('npo' in sckanProvenance) {
+      mapKnowledgeSource = `${sckanProvenance.npo.release}-npo`;
+    }
+  }
+
+  return mapKnowledgeSource;
+}
+
+function loadAndStoreKnowledge(mapImp, flatmapQueries) {
+  const knowledgeSource = getKnowledgeSource(mapImp);
+  const sql = `select knowledge from knowledge
+    where source="${knowledgeSource}"
+    order by source desc`;
+  const flatmapKnowledge = sessionStorage.getItem('flatmap-knowledge');
+
+  if (!flatmapKnowledge) {
+    flatmapQueries.flatmapQuery(sql).then((response) => {
+      const mappedData = response.values.map(x => x[0]);
+      const parsedData = mappedData.map(x => JSON.parse(x));
+      sessionStorage.setItem('flatmap-knowledge', JSON.stringify(parsedData));
+      updateFlatmapKnowledgeCache();
+    });
+  }
+}
+
+function updateFlatmapKnowledgeCache() {
+  const CACHE_LIFETIME = 24 * 60 * 60 * 1000; // One day
+  const now = new Date();
+  const expiry = now.getTime() + CACHE_LIFETIME;
+
+  sessionStorage.setItem('flatmap-knowledge-expiry', expiry);
+}
+
+function removeFlatmapKnowledgeCache() {
+  const keys = [
+    'flatmap-knowledge',
+    'flatmap-knowledge-expiry',
+  ];
+  keys.forEach((key) => {
+    sessionStorage.removeItem(key);
+  });
+}
+
+function refreshFlatmapKnowledgeCache() {
+  const expiry = sessionStorage.getItem('flatmap-knowledge-expiry');
+  const now = new Date();
+
+  if (now.getTime() > expiry) {
+    removeFlatmapKnowledgeCache();
+  }
+}
+
+export {
+  getReferenceConnectivitiesFromStorage,
+  getReferenceConnectivitiesByAPI,
+  loadAndStoreKnowledge,
+  getKnowledgeSource,
+  refreshFlatmapKnowledgeCache,
+}
diff --git a/src/services/flatmapQueries.js b/src/services/flatmapQueries.js
new file mode 100644
index 00000000..b343a043
--- /dev/null
+++ b/src/services/flatmapQueries.js
@@ -0,0 +1,498 @@
+/* eslint-disable no-alert, no-console */
+// remove duplicates by stringifying the objects
+const removeDuplicates = function (arrayOfAnything) {
+  if (!arrayOfAnything) return []
+  return [...new Set(arrayOfAnything.map((e) => JSON.stringify(e)))].map((e) =>
+    JSON.parse(e)
+  )
+}
+
+const cachedLabels = {}
+const cachedTaxonLabels = [];
+
+const findTaxonomyLabel = async function (flatmapAPI, taxonomy) {
+  if (cachedLabels && cachedLabels.hasOwnProperty(taxonomy)) {
+    return cachedLabels[taxonomy]
+  }
+
+  return new Promise((resolve) => {
+    fetch(`${flatmapAPI}knowledge/label/${taxonomy}`, {
+      method: 'GET',
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        let label = data.label
+        if (label === 'Mammalia') {
+          label = 'Mammalia not otherwise specified'
+        }
+        cachedLabels[taxonomy] = label
+        resolve(label)
+      })
+      .catch((error) => {
+        console.error('Error:', error)
+        cachedLabels[taxonomy] = taxonomy
+        resolve(taxonomy)
+      })
+  })
+}
+
+const findTaxonomyLabels = async function (mapImp, 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 mapImp.queryLabels(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 inArray = function (ar1, ar2) {
+  if (!ar1 || !ar2) return false
+  let as1 = JSON.stringify(ar1)
+  let as2 = JSON.stringify(ar2)
+  return as1.indexOf(as2) !== -1
+}
+
+let FlatmapQueries = function () {
+  this.initialise = function (flatmapApi) {
+    this.flatmapApi = flatmapApi
+    this.destinations = []
+    this.origins = []
+    this.components = []
+    this.rawURLs = []
+    this.controller = undefined
+    this.uberons = []
+    this.lookUp = []
+  }
+
+  this.createTooltipData = async function (mapImp, eventData) {
+    let hyperlinks = []
+    if (
+      eventData.feature.hyperlinks &&
+      eventData.feature.hyperlinks.length > 0
+    ) {
+      hyperlinks = eventData.feature.hyperlinks
+    } else {
+      hyperlinks = this.rawURLs;
+    }
+    let taxonomyLabel = undefined
+    if (eventData.provenanceTaxonomy) {
+      taxonomyLabel = []
+      const entityLabels = await findTaxonomyLabels(mapImp, eventData.provenanceTaxonomy);
+      if (entityLabels.length) {
+        entityLabels.forEach((entityLabel) => {
+          const { label } = entityLabel;
+          taxonomyLabel.push(label);
+        });
+      }
+    }
+
+    let tooltipData = {
+      destinations: this.destinations,
+      origins: this.origins,
+      components: this.components,
+      destinationsWithDatasets: this.destinationsWithDatasets,
+      originsWithDatasets: this.originsWithDatasets,
+      componentsWithDatasets: this.componentsWithDatasets,
+      title: eventData.label,
+      featureId: eventData.resource,
+      hyperlinks: hyperlinks,
+      provenanceTaxonomy: eventData.provenanceTaxonomy,
+      provenanceTaxonomyLabel: taxonomyLabel,
+    }
+    return tooltipData
+  }
+
+  this.createComponentsLabelList = function (components, lookUp) {
+    let labelList = []
+    components.forEach((n) => {
+      labelList.push(this.createLabelFromNeuralNode(n[0]), lookUp)
+      if (n.length === 2) {
+        labelList.push(this.createLabelFromNeuralNode(n[1]), lookUp)
+      }
+    })
+    return labelList
+  }
+
+  this.createLabelLookup = function (mapImp, uberons) {
+    return new Promise(async (resolve) => {
+      let uberonMap = {}
+      this.uberons = []
+      const entityLabels = await findTaxonomyLabels(mapImp, uberons);
+      if (entityLabels.length) {
+        entityLabels.forEach((entityLabel) => {
+          const { taxon: entity, label } = entityLabel;
+          uberonMap[entity] = label;
+          this.uberons.push({
+            id: entity,
+            name: label,
+          })
+        });
+        resolve(uberonMap)
+      }
+    })
+  }
+
+  this.buildConnectivitySqlStatement = function (keastIds) {
+    let sql = 'select knowledge from knowledge where entity in ('
+    if (keastIds.length === 1) {
+      sql += `'${keastIds[0]}')`
+    } else if (keastIds.length > 1) {
+      for (let i in keastIds) {
+        sql += `'${keastIds[i]}'${i >= keastIds.length - 1 ? ')' : ','} `
+      }
+    }
+    return sql
+  }
+
+  this.buildLabelSqlStatement = function (uberons) {
+    let sql = 'select entity, label from labels where entity in ('
+    if (uberons.length === 1) {
+      sql += `'${uberons[0]}')`
+    } else if (uberons.length > 1) {
+      for (let i in uberons) {
+        sql += `'${uberons[i]}'${i >= uberons.length - 1 ? ')' : ','} `
+      }
+    }
+    return sql
+  }
+
+  this.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())]
+  }
+
+  this.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()
+  }
+
+  this.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
+  }
+
+  this.retrieveFlatmapKnowledgeForEvent = async function (mapImp, eventData) {
+    // check if there is an existing query
+    if (this.controller) this.controller.abort()
+
+    // set up the abort controller
+    this.controller = new AbortController()
+    const signal = this.controller.signal
+
+    const keastIds = eventData.resource
+    this.destinations = []
+    this.origins = []
+    this.components = []
+    this.rawURLs = []
+    if (!keastIds || keastIds.length == 0 || !keastIds[0]) return
+
+    let prom1 = this.queryForConnectivityNew(mapImp, keastIds, signal) // This on returns a promise so dont need 'await'
+    let results = await Promise.all([prom1])
+    return results
+  }
+
+  this.queryForConnectivityNew = function (mapImp, keastIds, signal, processConnectivity=true) {
+    return new Promise((resolve) => {
+      mapImp.queryKnowledge(keastIds[0])
+        .then((response) => {
+          if (this.checkConnectivityExists(response)) {
+            let connectivity = response;
+            if (processConnectivity) {
+              this.processConnectivity(mapImp, connectivity).then((processedConnectivity) => {
+                // response.references is publication urls
+                if (response.references) {
+                  // with publications from both PubMed and Others
+                  this.rawURLs = [...response.references];
+                  resolve(processedConnectivity)
+                } else {
+                  // without publications
+                  resolve(processedConnectivity)
+                }
+              })
+            }
+            else resolve(connectivity)
+          } else {
+            resolve(false)
+          }
+        })
+        .catch((error) => {
+          if (error.name === 'AbortError') {
+            // This error is from AbortController's abort method.
+          } else {
+            // console.error('Error:', error)
+            // TODO: to update after queryKnowledge method update
+            console.warn(`Unable to get the knowledge for the entity ${keastIds[0]}.`)
+          }
+          resolve(false)
+        })
+    })
+  }
+
+  this.queryForConnectivity = function (mapImp, keastIds, signal, processConnectivity=true) {
+    const data = { sql: this.buildConnectivitySqlStatement(keastIds) }
+    const headers = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+      ...(signal ? { signal: signal } : {}), // add signal to header if it exists
+    }
+    return new Promise((resolve) => {
+      fetch(`${this.flatmapApi}knowledge/query/`, headers)
+        .then((response) => response.json())
+        .then((data) => {
+          if (this.connectivityExists(data)) {
+            let connectivity = JSON.parse(data.values[0][0])
+            if (processConnectivity) {
+              this.processConnectivity(mapImp, connectivity).then((processedConnectivity) => {
+                resolve(processedConnectivity)
+              })
+            }
+            else resolve(connectivity)
+          } else {
+            resolve(false)
+          }
+        })
+        .catch((error) => {
+          if (error.name === 'AbortError') {
+            // This error is from AbortController's abort method.
+          } else {
+            console.error('Error:', error)
+          }
+          resolve(false)
+        })
+    })
+  }
+
+  this.checkConnectivityExists = function (data) {
+    return data && data.connectivity?.length;
+  };
+
+  this.connectivityExists = function (data) {
+    if (
+      data.values &&
+      data.values.length > 0 &&
+      JSON.parse(data.values[0][0]).connectivity &&
+      JSON.parse(data.values[0][0]).connectivity.length > 0
+    ) {
+      return true
+    } else {
+      return false
+    }
+  }
+
+  // This function is used to determine if a node is a single node or a node with multiple children
+  //  Returns the id of the node if it is a single node, otherwise returns false
+  this.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]]
+      }
+    }
+  }
+
+  this.createLabelFromNeuralNode = function (node, lookUp) {
+
+    // Check if the node is a single node or a node with multiple children
+    let nodeIsSingle = this.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
+  }
+
+  this.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 = this.flattenConntectivity(components)
+    let axonsFlat = this.flattenConntectivity(axons)
+    let dendritesFlat = this.flattenConntectivity(dendrites)
+
+    // Filter for the anatomy which is annotated on datasets
+    this.destinationsWithDatasets = this.uberons.filter(
+      (ub) => axonsFlat.indexOf(ub.id) !== -1
+    )
+    this.originsWithDatasets = this.uberons.filter(
+      (ub) => dendritesFlat.indexOf(ub.id) !== -1
+    )
+    this.componentsWithDatasets = this.uberons.filter(
+      (ub) => componentsFlat.indexOf(ub.id) !== -1
+    )
+  }
+
+  this.processConnectivity = function (mapImp, connectivity) {
+    return new Promise((resolve) => {
+      // Filter the origin and destinations from components
+      let components = this.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 = this.findAllIdsFromConnectivity(connectivity)
+
+      // Create readable labels from the nodes. Setting this to 'this.origins' updates the display
+      this.createLabelLookup(mapImp, conIds).then((lookUp) => {
+        this.destinations = axons.map((a) =>
+          this.createLabelFromNeuralNode(a, lookUp)
+        )
+        this.origins = dendrites.map((d) =>
+          this.createLabelFromNeuralNode(d, lookUp)
+        )
+        this.components = components.map((c) =>
+          this.createLabelFromNeuralNode(c, lookUp)
+        )
+        this.flattenAndFindDatasets(components, axons, dendrites)
+        resolve({
+          ids: {
+            axons: axons,
+            dendrites: dendrites,
+            components: components,
+          },
+          labels: {
+            destinations: this.destinations,
+            origins: this.origins,
+            components: this.components,
+          }
+        })
+      })
+    })
+  }
+
+  this.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()
+  }
+
+  this.buildPubmedSqlStatement = function (keastIds) {
+    let sql = 'select distinct publication from publications where entity in ('
+    if (keastIds.length === 1) {
+      sql += `'${keastIds[0]}')`
+    } else if (keastIds.length > 1) {
+      for (let i in keastIds) {
+        sql += `'${keastIds[i]}'${i >= keastIds.length - 1 ? ')' : ','} `
+      }
+    }
+    return sql
+  }
+
+  this.buildPubmedSqlStatementForModels = function (model) {
+    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),
+    })
+      .then((response) => response.json())
+      .catch((error) => {
+        console.error('Error:', error)
+      })
+  }
+}
+
+export { FlatmapQueries, findTaxonomyLabel, findTaxonomyLabels }