@abi-software/map-side-bar 2.4.0-isan-1 → 2.4.0

package/src/components/SidebarContent.vue

@@ -34,29 +34,18 @@
       ref="searchHistory"
       @search="searchHistorySearch"
     ></SearchHistory>
-      pmr hits: {{ pmrNumberOfHits }}
     <div class="content scrollbar" v-loading="loadingCards" ref="content">
       <div class="error-feedback" v-if="results.length === 0 && !loadingCards">
         No results found - Please change your search / filter criteria.
       </div>
-      <div v-for="(result, i) in results" :key="result.doi || i" class="step-item">
+      <div v-for="result in results" :key="result.doi" class="step-item">
         <DatasetCard
-          v-if="result.dataSource === 'SPARC'"
           class="dataset-card"
           :entry="result"
           :envVars="envVars"
           @mouseenter="hoverChanged(result)"
           @mouseleave="hoverChanged(undefined)"
-        ></DatasetCard>
-        <PMRDatasetCard
-          v-else-if="result.dataSource === 'PMR'"
-          class="dataset-card"
-          :entry="result"
-          :envVars="envVars"
-          @pmr-action-click="onPmrActionClick"
-          @mouseenter="hoverChanged(result)"
-          @mouseleave="hoverChanged(undefined)"
-        ></PMRDatasetCard>
+        />
       </div>
       <el-pagination
         class="pagination"
@@ -84,17 +73,12 @@ import {
 } from 'element-plus'
 import SearchFilters from './SearchFilters.vue'
 import SearchHistory from './SearchHistory.vue'
+import DatasetCard from './DatasetCard.vue'
 import EventBus from './EventBus.js'
 
-import DatasetCard from "./DatasetCard.vue";
-import PMRDatasetCard from "./PMRDatasetCard.vue";
-
 import { AlgoliaClient } from '../algolia/algolia.js'
 import { getFilters, facetPropPathMapping } from '../algolia/utils.js'
-import FlatmapQueries from '../flatmapQueries/flatmapQueries.js'
-import mixedPageCalculation from '../mixins/mixedPageCalculation.vue'
-
-const RatioOfPMRResults = 0.2; // Ratio of PMR results to Sparc results
+import { markRaw } from 'vue'
 
 // handleErrors: A custom fetch error handler to recieve messages from the server
 //    even when an error is found
@@ -114,26 +98,21 @@ var initial_state = {
   searchInput: '',
   lastSearch: '',
   results: [],
-  pmrNumberOfHits: 0,
-  sparcNumberOfHits: 0,
+  numberOfHits: 0,
   filter: [],
   loadingCards: false,
   numberPerPage: 10,
   page: 1,
-  pmrResultsOnlyFlag: false,
+  pageModel: 1,
+  start: 0,
   hasSearched: false,
   contextCardEnabled: false,
-  pmrResults: [],
-  RatioOfPMRResults: RatioOfPMRResults,
-};
-
-
+}
 
 export default {
   components: {
     SearchFilters,
     DatasetCard,
-    PMRDatasetCard,
     SearchHistory,
     Button,
     Card,
@@ -143,7 +122,6 @@ export default {
     Pagination
   },
   name: 'SideBarContent',
-  mixins: [mixedPageCalculation],
   props: {
     visible: {
       type: Boolean,
@@ -165,6 +143,7 @@ export default {
   data: function () {
     return {
       ...this.entry,
+      algoliaClient: undefined,
       bodyStyle: {
         flex: '1 1 auto',
         'flex-flow': 'column',
@@ -181,64 +160,21 @@ export default {
         filterFacets: this.filter,
       }
     },
-    // npp_SPARC: Number per page for SPARC datasets
-    npp_SPARC: function () {
-      return Math.round(this.numberPerPage * (1 - RatioOfPMRResults))
-    },
-    // npp_PMR: Number per page for PMR datasets
-    npp_PMR: function () {
-      return Math.round(this.numberPerPage * RatioOfPMRResults)
-    },
-    numberOfHits: function () {
-      return this.sparcNumberOfHits + this.pmrNumberOfHits
-    },
-
   },
   methods: {
     hoverChanged: function (data) {
       this.$emit('hover-changed', data)
     },
-    onPmrActionClick: function (data) {
-      this.$emit('pmr-action-click', data);
-    },
-    // resetSearch: Resets the results, and page, and variable results ratio
-    //     Does not: reset filters, search input, or search history
     resetSearch: function () {
-      this.pmrNumberOfHits = 0
-      this.sparcNumberOfHits = 0
-      this.page = 1
-      this.calculateVariableRatio()
+      this.numberOfHits = 0
       this.discoverIds = []
       this._dois = []
       this.results = []
       this.loadingCards = false
     },
-    // openSearch: Resets the results, populates dataset cards and filters. Will use Algolia and SciCrunch data uness pmr mode is set
-    openSearch: function(filter, search = '', resetSearch = true) {
-      if (resetSearch) {
-        this.resetSearch();
-        this.openAlgoliaSearch(filter, search);
-      } else {
-        this.searchAlgolia(filter, search);
-      }
-      this.openPMRSearch(filter, search)
-    },
-
-    // openPMRSearch: Resets the results, populates dataset cards and filters with PMR data.
-    openPMRSearch: function (filter, search = '') {
-      this.flatmapQueries.updateOffset(this.calculatePMROffest())
-      this.flatmapQueries.updateLimit(this.PMRLimit(this.pmrResultsOnlyFlag))
-      this.flatmapQueries.pmrSearch(filter, search).then((data) => {
-        data.forEach((result) => {
-          this.results.push(result)
-        })
-        this.pmrNumberOfHits = this.flatmapQueries.numberOfHits
-      })
-    },
-
-    // openAlgoliaSearch: Resets the results, populates dataset cards and filters with Algloia and SciCrunch data.
-    openAlgoliaSearch: function (filter, search = '') {
+    openSearch: function (filter, search = '') {
       this.searchInput = search
+      this.resetPageNavigation()
       //Proceed normally if cascader is ready
       if (this.cascaderIsReady) {
         this.filter =
@@ -269,7 +205,7 @@ export default {
     },
     addFilter: function (filter) {
       if (this.cascaderIsReady) {
-        this.resetSearch()
+        this.resetPageNavigation()
         if (filter) {
           if (this.$refs.filtersRef.addFilter(filter))
             this.$refs.filtersRef.initiateSearch()
@@ -288,51 +224,31 @@ export default {
     },
     clearSearchClicked: function () {
       this.searchInput = ''
-      this.resetSearch()
-      this.openSearch(this.filter, this.searchInput)
+      this.resetPageNavigation()
+      this.searchAlgolia(this.filters, this.searchInput)
       this.$refs.searchHistory.selectValue = 'Full search history'
     },
     searchEvent: function (event = false) {
       if (event.keyCode === 13 || event instanceof MouseEvent) {
-        this.openSearch(this.filter, this.searchInput)
+        this.resetPageNavigation()
+        this.searchAlgolia(this.filters, this.searchInput)
         this.$refs.searchHistory.selectValue = 'Full search history'
         this.$refs.searchHistory.addSearchToHistory(
-          this.filter,
+          this.filters,
           this.searchInput
         )
       }
     },
-    updatePMROnlyFlag: function (filters) {
-      const pmrSearchObject = filters.find((tmp) => tmp.facet === 'PMR');
-      if (pmrSearchObject) {
-        this.pmrResultsOnlyFlag = true
-      } else {
-        this.pmrResultsOnlyFlag = false
-      }
-    },
     filterUpdate: function (filters) {
-      this.filter = [...filters]
-
-      // Check if PMR is in the filters
-      this.updatePMROnlyFlag(filters)
-
-      // Note that we cannot use the openSearch function as that modifies filters
-      this.resetSearch()
+      this.filters = [...filters]
+      this.resetPageNavigation()
       this.searchAlgolia(filters, this.searchInput)
-      this.openPMRSearch(filters, this.searchInput)
       this.$emit('search-changed', {
         value: filters,
         type: 'filter-update',
       })
     },
     searchAlgolia(filters, query = '') {
-
-      // Remove loading if we dont expect any results
-      if (this.SPARCLimit() === 0) {
-        this.loadingCards = false
-        return
-      }
-
       // Algolia search
 
       this.loadingCards = true
@@ -344,17 +260,12 @@ export default {
           EventBus.emit('number-of-datasets-for-anatomies', r.forScaffold)
         })
       this.algoliaClient
-        .search(getFilters(filters), query, this.calculateSPARCOffest(), this.SPARCLimit(this.pmrResultsOnlyFlag) )
+        .search(getFilters(filters), query, this.numberPerPage, this.page)
         .then((searchData) => {
-          this.sparcNumberOfHits = searchData.total
+          this.numberOfHits = searchData.total
           this.discoverIds = searchData.discoverIds
           this._dois = searchData.dois
-          searchData.items.forEach((item) => {
-            item.detailsReady = false
-            this.results.push(item)
-          })
-          // add the items to the results
-          this.results.concat(searchData.items)
+          this.results = searchData.items
           this.loadingCards = false
           this.scrollToTop()
           this.$emit('search-changed', {
@@ -376,10 +287,14 @@ export default {
       this.pageChange(1)
     },
     pageChange: function (page) {
+      this.start = (page - 1) * this.numberPerPage
       this.page = page
-      this.results = []
-      this.calculateVariableRatio()
-      this.openSearch(this.filter, this.searchInput, false)
+      this.searchAlgolia(
+        this.filters,
+        this.searchInput,
+        this.numberPerPage,
+        this.page
+      )
     },
     handleMissingData: function (doi) {
       let i = this.results.findIndex((res) => res.doi === doi)
@@ -421,6 +336,7 @@ export default {
       }
     },
     resetPageNavigation: function () {
+      this.start = 0
       this.page = 1
     },
     resultsProcessing: function (data) {
@@ -528,19 +444,13 @@ export default {
   },
   mounted: function () {
     // initialise algolia
-    this.algoliaClient = new AlgoliaClient(
+    this.algoliaClient = markRaw(new AlgoliaClient(
       this.envVars.ALGOLIA_ID,
       this.envVars.ALGOLIA_KEY,
       this.envVars.PENNSIEVE_API_LOCATION
-    )
+    ))
     this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX)
-
-    // initialise flatmap queries
-    this.flatmapQueries = new FlatmapQueries()
-    this.flatmapQueries.initialise(this.envVars.FLATMAP_API_LOCATION)
-
-    // open search
-    this.openSearch(this.filter, this.searchInput, this.mode )
+    this.openSearch(this.filter, this.searchInput)
   },
   created: function () {
     //Create non-reactive local variables
@@ -579,17 +489,6 @@ export default {
   display: flex;
 }
 
-.data-type-select {
-  width: 90px;
-  margin-left: 10px;
-}
-
-.button {
-  background-color: $app-primary-color;
-  border: $app-primary-color;
-  color: white;
-}
-
 .step-item {
   font-size: 14px;
   margin-bottom: 18px;

package/src/components.d.ts

@@ -27,7 +27,6 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
-    PMRDatasetCard: typeof import('./components/PMRDatasetCard.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
     SideBar: typeof import('./components/SideBar.vue')['default']

package/src/components/PMRDatasetCard.vue

@@ -1,317 +0,0 @@
-<template>
-  <div class="dataset-card-container"  ref="container">
-    <div class="dataset-card"  ref="card">
-      <div class="seperator-path"></div>
-      <div v-loading="loading" class="card" >
-        <span class="card-left">
-          <a class="card-image-container" :href="entry.exposure" target="_blank">
-            <img
-              class="card-image"
-              :src="thumbnail"
-              width="210"
-              height="210"
-              :alt="entry.title"
-              loading="lazy"
-            />
-          </a>
-        </span>
-        <div class="card-right">
-          <el-tag type="primary" class="source-tag">PMR</el-tag>
-          <div>
-            <h4 class="title">{{ entry.title }}</h4>
-            <div class="details">
-              {{ entry.authors }}
-            </div>
-          </div>
-          <div class="details" v-if="entry.description">
-            {{ entry.description }}
-          </div>
-          <div class="buttons-group">
-            <a
-              :href="entry.exposure"
-              target="_blank"
-              class="el-button el-button--small button"
-            >
-              Exposure
-            </a>
-            <a
-              v-if="entry.omex"
-              :href="entry.omex"
-              target="_blank"
-              class="el-button el-button--small button"
-            >
-              OMEX archive
-            </a>
-            <el-button v-if="entry.flatmap"
-              size="small"
-              class="button"
-              @click="onFlatmapClick(entry.flatmap)"
-            >
-              Flatmap
-            </el-button>
-            <el-button v-if="entry.simulation"
-              size="small"
-              class="button"
-              @click="onSimulationClick(entry.simulation)"
-            >
-              Simulation
-            </el-button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-
-<script>
-/* eslint-disable no-alert, no-console */
-import {
-  ElButton,
-  ElIcon,
-  ElTag
-} from 'element-plus'
-
-/**
- * Entry Object - Data types
- * ---------------------------------------
-"exposure"
-    type: String
-    description: The exposure URL
-
-"title"
-    type: String
-    description: The title
-
-"sha"
-    type: String
-    description:
-
-"workspace"
-    type: String
-    description: The workspace URL
-
-"omex"
-    type: String
-    description:
-
-"image"
-    type: String
-    description: The image URL
-
-"authors"
-    type: String
-    description: Comma separated values if more than one
-
-"description"
-    type: String
-    description: The description
-
-"flatmap"
-    type: String
-    descriptin: (Optional) to link to flatmap
-
-"simulation"
-    type: String
-    descriptin: (Optional) simulation resource
- * ---------------------------------------
- */
-
-const placeholderThumbnail = 'assets/missing-image.svg';
-
-export default {
-  name: "PMRDatasetCard",
-  components: {
-    ElButton,
-    ElIcon,
-    ElTag
-  },
-  props: {
-    /**
-     * Object containing information for
-     * the required viewing.
-     */
-    entry: {
-      type: Object,
-      default: () => {}
-    },
-    envVars: {
-      type: Object,
-      default: () => {}
-    },
-  },
-  data: function () {
-    return {
-      thumbnail: this.entry.image || placeholderThumbnail,
-      loading: false,
-    };
-  },
-  methods: {
-    onFlatmapClick: function (data) {
-      this.emitPMRActionClick({
-        type: 'Flatmap',
-        resource: data
-      });
-    },
-    onSimulationClick: function (data) {
-      this.emitPMRActionClick({
-        type: 'Simulation',
-        resource: data,
-      });
-    },
-    emitPMRActionClick: function (data) {
-      const payload = {
-        ...data,
-        name: this.entry.title,
-        description: this.entry.description,
-        apiLocation: this.envVars.API_LOCATION,
-      };
-      this.$emit('pmr-action-click', payload);
-    },
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-
-.dataset-card-container {
-  padding: 0 1rem;
-}
-
-.dataset-card {
-  position: relative;
-  min-height:17rem;
-}
-
-.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;
-}
-.card {
-  font-family: Asap;
-  padding-top: 18px;
-  position: relative;
-  display: flex;
-
-  h4,
-  p {
-    margin: 0;
-  }
-}
-
-.card-left{
-  flex: 1;
-}
-
-.card-right {
-  flex: 1.3;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  min-height: 17rem;
-}
-
-.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;
-}
-
-.el-button {
-  font-family: Asap;
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-}
-
-.button {
-  background-color: $app-primary-color;
-  border: $app-primary-color;
-  color: white;
-  transition: all 0.3s ease;
-
-  &:hover,
-  &:focus {
-    color: white;
-    background-color: $app-primary-color;
-    outline: none;
-  }
-}
-
-.card-image-container {
-  display: block;
-  width: 244px; // gallery image full-size width
-}
-
-.card-image {
-  max-width: 100%;
-  height: auto;
-  object-fit: cover;
-}
-
-.buttons-group {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-
-  .el-button {
-    border-radius: 4px!important;
-    font-size: 0.75rem!important;
-    padding: 0.2rem 0.2rem!important;
-    background: #f9f2fc!important;
-    border: 1px solid $app-primary-color!important;
-    color: $app-primary-color!important;
-
-    &.active {
-      background: $app-primary-color!important;
-      border: 1px solid $app-primary-color!important;
-      color: #fff!important;
-    }
-  }
-
-  .el-button + .el-button {
-    margin: 0;
-  }
-}
-
-.source-tag {
-  margin-bottom: 0.75rem;
-  margin-right: 2rem;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-
-.loading-icon {
-  z-index: 20;
-  width: 40px;
-  height: 40px;
-  left: 80px;
-}
-
-.loading-icon ::v-deep(.el-loading-mask) {
-  background-color: rgba(117, 190, 218, 0.0) !important;
-}
-
-.loading-icon ::v-deep(.el-loading-spinner .path) {
-  stroke: $app-primary-color;
-}
-</style>