@abi-software/map-side-bar 2.12.0-acupoints.2 → 2.12.2

package/src/components/AcupointsInfoSearch.vue

@@ -1,430 +0,0 @@
-<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>
-        <span class="filterText">
-          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-row>
-      <el-row>
-        <span class="filterText">
-          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-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,
-  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,
-    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"
-      },
-      currentFilters: {
-        curated: "Both",
-        mri: "Both",
-      },
-      previousFilters: {
-        curated: "Both",
-        mri: "Both",
-      },
-      previousInput: undefined,
-      results: [],
-      paginatedResults: [],
-      searchInput: "",
-      lastSearch: "",
-      numberOfHits: 0,
-      numberPerPage: 10,
-      page: 1,
-    }
-  },
-  watch: {
-    "currentFilters.curated": {
-      handler: function () {
-        this.search(
-          this.searchInput,
-          this.numberPerPage,
-          this.page
-        )
-      },
-    },
-    "currentFilters.mri": {
-      handler: function () {
-        this.search(
-          this.searchInput,
-          this.numberPerPage,
-          this.page
-        )
-      },
-    },
-    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("");
-    },
-    search: function(input) {
-      this.results = []
-      if ((input !== this.previousInput) ||
-        (this.currentFilters['curated'] !== this.previousFilters['curated']) ||
-        (this.currentFilters['mri'] !== this.previousFilters['mri'])
-        ) {
-        this.previousFilters['curated'] = this.currentFilters['curated'];
-        this.previousFilters['mri'] = this.currentFilters['mri'];
-        this.previousInput = this.input
-        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 (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;
-}
-
-.filterText {
-  margin-top:8px;
-}
-
-.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/services/flatmapKnowledge.js

@@ -1,94 +0,0 @@
-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,
-}