@abi-software/map-side-bar 2.12.2 → 2.12.4-acupoint.1

package/src/components/AcupointsInfoSearch.vue

@@ -0,0 +1,468 @@
+<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>
+      <el-row>
+        <el-col :span="12">
+          <span class="filter-text">
+            Curated:&nbsp;&nbsp;
+          </span>
+          <el-radio-group v-model="currentFilters['curated']" size="small" class="acuRadioGroup">
+            <el-radio-button
+              v-for="(value, key) in curatedFilters"
+              :key="key"
+              :label="key"
+              :value="value"
+            />
+          </el-radio-group>
+        </el-col>
+        <el-col :span="12">
+          <span class="filter-text">
+            On MRI:&nbsp;&nbsp;
+          </span>
+          <el-radio-group v-model="currentFilters['mri']" size="small" class="acuRadioGroup">
+            <el-radio-button
+              v-for="(value, key) in mriFilters"
+              :key="key"
+              :label="key"
+              :value="value"
+            />
+          </el-radio-group>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <span class="filter-text">
+            WHO approved:&nbsp;&nbsp;
+          </span>
+          <el-radio-group v-model="currentFilters['who']" size="small" class="acuRadioGroup">
+            <el-radio-button
+              v-for="(value, key) in whoFilters"
+              :key="key"
+              :label="key"
+              :value="value"
+            />
+          </el-radio-group>
+        </el-col>
+      </el-row>
+    </div>
+    <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 {
+  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'
+
+export default {
+  components: {
+    AcupointsCard,
+    Button,
+    Card,
+    Col,
+    RadioButton,
+    RadioGroup,
+    Drawer,
+    Icon,
+    Input,
+    Pagination,
+    Row
+  },
+  name: 'AcupointsInfoSearch',
+  props: {
+    entry: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data: function () {
+    return {
+      curatedFilters: {
+        "Yes": "Curated",
+        "No": "Uncurated",
+        "Both": "Both"
+      },
+      mriFilters: {
+        "Yes": "On",
+        "No": "Off",
+        "Both": "Both"
+      },
+      whoFilters: {
+        "Yes": "Yes",
+        "No": "No",
+        "Both": "Both"
+      },
+      currentFilters: {
+        curated: "Both",
+        mri: "Both",
+        who: "Yes",
+      },
+      previousFilters: {
+        curated: "Both",
+        mri: "Both",
+        who: "Both",
+      },
+      previousInput: undefined,
+      results: [],
+      paginatedResults: [],
+      searchInput: "",
+      lastSearch: "",
+      numberOfHits: 0,
+      numberPerPage: 10,
+      page: 1,
+    }
+  },
+  watch: {
+    currentFilters: {
+      handler: function () {
+        this.search(
+          this.searchInput,
+          this.numberPerPage,
+          this.page
+        )
+      },
+      immediate: true,
+      deep: true,
+    },
+    entry: {
+      handler: function () {
+        this.search(
+          this.searchInput,
+          this.numberPerPage,
+          this.page
+        )
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    hoverChanged: function (data) {
+      this.$emit('hover-changed', data)
+    },
+    resetSearch: function () {
+      this.numberOfHits = 0
+      this.search(this.searchInput)
+    },
+    clearSearchClicked: function () {
+      this.searchInput = '';
+      this.search("");
+    },
+    searchUpdatedRequired: function(input) {
+      if (input !== this.previousInput) {
+        return true
+      }
+      for (const [key, value] of Object.entries(this.currentFilters)) {
+        if (value !== this.previousFilters[key]) {
+          return true
+        }
+      }
+      return false
+    },
+    getFilteredList: function() {
+      this.previousFilters['curated'] = this.currentFilters['curated']
+      this.previousFilters['mri'] = this.currentFilters['mri']
+      this.previousFilters['who'] = this.currentFilters['who']
+      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 curated = this.currentFilters['mri'] === "On" ? true : false
+        filteredList = filteredList.filter(
+          item => (item.onMRI ? true : false) === curated)
+      }
+      if (this.currentFilters['who'] !== "Both") {
+        const who = this.currentFilters['who'] === "Yes" ? true : false
+        filteredList = filteredList.filter(
+          item => (item["Meridian Point"] ? true : false) === who)
+      }
+      return filteredList;
+    },
+    search: function(input) {
+      this.results = []
+      if (this.searchUpdatedRequired(input)) {
+        let filteredList = this.getFilteredList()
+        this.previousInput = this.input
+        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)
+            }
+          }
+        }
+      }
+      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
+    },
+    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>

package/src/components/BadgesGroup.vue

@@ -32,12 +32,6 @@ export default {
         return []
       },
     },
-    datasetBiolucida: {
-      type: Object,
-      default: () => {
-        return {}
-      },
-    },
     entry: {
       type: Object,
       default: () => {
@@ -72,15 +66,6 @@ export default {
     },
   },
   watch: {
-    datasetBiolucida: {
-      deep: true,
-      immediate: true,
-      handler: function (biolucidaData) {
-        if ('dataset_images' in biolucidaData) {
-          this.addToCategories(biolucidaData['dataset_images'], 'Images')
-        }
-      },
-    },
     entry: {
       deep: true,
       immediate: true,
@@ -88,7 +73,6 @@ export default {
         this.addToCategories(this.entry.flatmaps, 'Flatmaps')
         this.addToCategories(this.entry.plots, 'Plots')
         this.addToCategories(this.entry.scaffolds, 'Scaffolds')
-        this.addToCategories(this.entry.segmentation, 'Segmentations')
         this.addSimulationsToCategories(this.entry.simulation)
         /** disable the following
         this.addToCategories(this.entry.images, 'Images');
@@ -117,7 +101,7 @@ export default {
       color: #fff!important;
     }
   }
-  
+
   .tag-button + .tag-button {
     margin-left: 0!important;
   }

package/src/components/DatasetCard.vue

@@ -12,7 +12,6 @@
             :envVars="envVars"
             :label="label"
             :datasetThumbnail="thumbnail"
-            :dataset-biolucida="biolucidaData"
             :category="currentCategory"
             @card-clicked="galleryClicked"
             @datalink-clicked="galleryDatalinkClicked"
@@ -42,7 +41,6 @@
           <div class="badges-container">
             <BadgesGroup
               :entry="entry"
-              :dataset-biolucida="biolucidaData"
               @categoryChanged="categoryChanged"
             />
           </div>
@@ -60,7 +58,6 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import { View as ElIconView } from '@element-plus/icons-vue'
-import { Base64  } from 'js-base64';
 import BadgesGroup from './BadgesGroup.vue'
 import {
   ElButton as Button,
@@ -109,7 +106,6 @@ export default {
       loading: true,
       version: 1,
       lastDoi: undefined,
-      biolucidaData: undefined,
       currentCategory: 'All',
       copyContent: '',
     }
@@ -237,7 +233,6 @@ export default {
             this.discoverId = data.id
             this.version = data.version
             this.dataLocation = `https://sparc.science/datasets/${data.id}?type=dataset`
-            this.getBiolucidaInfo()
             this.loading = false
             this.updateCopyContent();
           })
@@ -252,31 +247,6 @@ export default {
     lastName: function (fullName) {
       return fullName.split(',')[0]
     },
-    getBiolucidaInfo: function () {
-      const dataset_images = [];
-      const biolucida2DItems = 'biolucida-2d' in this.entry ? this.entry['biolucida-2d'] :[];
-      const biolucida3DItems = 'biolucida-3d' in this.entry ? this.entry['biolucida-3d'] :[];
-      // We use information from SciCrunch to create the sharelink
-      biolucida2DItems.concat(biolucida3DItems).forEach((bObject) => {
-        const image_id = bObject.biolucida?.identifier;
-        if (image_id) {
-          const sourcepkg_id = 'identifier' in bObject ? bObject['identifier'] : "";
-          // The encoded string is in the following format -
-          // ${image_id}-col-${collection_id}, collection id can be any valid collection id
-          // and 260 is used for now.
-          const code = encodeURIComponent(Base64.encode(`${image_id}-col-260`));
-          const share_link = `https://sparc.biolucida.net/image?c=${code}`
-          dataset_images.push({
-            share_link,
-            image_id,
-            sourcepkg_id,
-          });
-        }
-      });
-      if (dataset_images.length > 0) {
-        this.biolucidaData = { dataset_images };
-      }
-    },
     updateCopyContent: function () {
       const contentArray = [];
 

package/src/components/DatasetExplorer.vue

@@ -40,8 +40,6 @@
                 <li>
                   <strong>To find by multiple terms:</strong>
                   Searching for <code>nerve, vagus</code> will find data that contains either <code>nerve</code> OR <code>vagus</code>.
-                  <br/>
-                  Due to the limitation of the search engine, space between words in a comma block will be treated as comma when multiple terms search is active.
                 </li>
               </ul>
             </div>
@@ -501,7 +499,6 @@ export default {
             element['abi-contextual-information'].length > 0
               ? element['abi-contextual-information']
               : undefined,
-          segmentation: element['mbf-segmentation'],
           //omex format will be the preferred mimetype
           simulation: element['abi-simulation-omex-file'] ? element['abi-simulation-omex-file'] : element['abi-simulation-file'],
           flatmaps: element['abi-flatmap-file'],