@abi-software/map-side-bar 2.7.0 → 2.7.1-isan.1

package/src/mixins/mixedPageCalculation.vue

@@ -0,0 +1,108 @@
+<script>
+// The functions below are needed because the number of results shown on the page is dependent what is available from each index.
+// We fix this by calcuting how many results we have shown before the requested page and then calculating the offset based on that.
+
+// Note that this.RatioOfPMRResults is a number that determines how many PMR results are shown compared to SPARC results. It is grabbed from a constant in 
+//  SidebarContent.vue.
+
+export default {
+  data: function () {
+    return {
+      variableRatio: 0.2
+    }
+  },
+  methods: {
+    
+    // Calculate Variable Ratio is used as a number to determine how the ratio of PMR results to SPARC results
+    //   will be shown on the page. 1 means only PMR results, 0 means only SPARC results. 
+    calculateVariableRatio: function () {
+      if (this.page === 1) {
+        this.variableRatio = this.RatioOfPMRResults
+
+      // Check if we have run out of Sparc results
+      } else if( this.npp_SPARC * (this.page -1) >= this.sparcNumberOfHits) {
+        this.variableRatio = 1
+      
+      // Check if we have run out of PMR results
+      } else if(this.npp_PMR * (this.page - 1) >= this.pmrNumberOfHits) {
+        this.variableRatio = 0
+      } else {
+
+        // Set the ratio to the same as the previous page if both indeces have results
+        this.variableRatio = this.RatioOfPMRResults
+      }
+    },
+
+    // calculatePMROffest is used to calculate how many PMR results we have shown before the requested page
+    calculatePMROffest: function() {
+
+      console.log(this.variableRatio, this.RatioOfPMRResults)
+      // If variable ratio has not changed, we have not run out of results.
+      //   we can use the the number per page PMR to calculate the offset
+      if (this.variableRatio === this.RatioOfPMRResults) {
+        return (this.page-1)*this.npp_PMR
+
+      // If we have run out of SPARC results, we need to calculate how many PMR results we have shown before the requested page
+      } else if (this.variableRatio === 1) {
+
+        // calculate how many results we showed before the requested page
+        // We want our offset to be the number of PMR results shown before the requested page
+        //  This can be though of as numberOfPMRResultsShownInMixed + numberOfPMRResultsShownInPMROnly = offset
+        let pageWhereSPARCResultsRanOut = Math.ceil(this.sparcNumberOfHits / this.npp_SPARC)
+        let numberOfPMRResultsShownInMixed = this.npp_PMR * pageWhereSPARCResultsRanOut
+        let numberOfPMRResultsShownInPMROnly = (this.page - 1 - pageWhereSPARCResultsRanOut) * this.numberPerPage
+        return numberOfPMRResultsShownInMixed + numberOfPMRResultsShownInPMROnly
+      }
+    },
+    
+    // calculateSPARCOffest is used to calculate how many SPARC results we have shown before the requested page. See above for details
+    calculateSPARCOffest: function() {
+      if(this.variableRatio === this.RatioOfPMRResults) {
+        return (this.page-1)*this.npp_SPARC
+      } else if (this.variableRatio === 0) {
+        
+        // calculate how many results we showed before the requested page
+        let pageWherePMRResultsRanOut = Math.ceil(this.pmrNumberOfHits / this.npp_PMR)
+        let numberOfSPARCResultsShownInMixed = this.npp_SPARC * pageWherePMRResultsRanOut
+        let numberOfSPARCResultsShownInSPARCOnly = (this.page - 1 - pageWherePMRResultsRanOut) * this.numberPerPage
+        let offset = numberOfSPARCResultsShownInMixed + numberOfSPARCResultsShownInSPARCOnly
+        return offset
+      }
+    },
+
+    // PMRLimit is used to calculate how many PMR results we can show on the page.
+    PMRLimit: function(pmrResultsOnlyFlag=false) {
+      // If we only want PMR results, return the number per page  
+      if (pmrResultsOnlyFlag) {
+        return this.numberPerPage
+      }
+      // If the variable ratio is the same as the ratio of PMR results, return the number per page set for PMR
+      if (this.variableRatio === this.RatioOfPMRResults) {
+        return this.npp_PMR
+
+      // if we have run out of sparc results, we want to show pmr results equal to the total number of results per page
+      } else if (this.variableRatio === 1) {
+        return this.numberPerPage
+
+      // if we have run out of pmr results, we want to show 0 pmr results
+      } else if (this.variableRatio === 0) {
+        return 0
+      }
+    },
+    SPARCLimit: function(pmrResultsOnlyFlag=false) {
+      if(pmrResultsOnlyFlag) {
+        return 0
+      }
+      if (this.variableRatio === this.RatioOfPMRResults) {
+        return this.npp_SPARC
+      } else if (this.variableRatio === 0) {
+        return this.numberPerPage
+      } else if (this.variableRatio === 1) {
+        return 0
+      }
+    },
+  }
+};
+</script>
+
+

package/src/components/ConnectivityCard.vue

@@ -1,163 +0,0 @@
-<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">
-          <div class="title">{{ entry.label }}</div>
-          <template v-for="field in displayFields" :key="field">
-            <div class="details" v-if="entry[field]">
-              <strong>{{ field }}:</strong> {{ entry[field] }}
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import EventBus from './EventBus.js'
-/* eslint-disable no-alert, no-console */
-
-export default {
-  data() {
-    return {
-      displayFields: [
-        "label",
-        "id",
-      ]
-    }
-  },
-  name: 'ConnectivityCard',
-  props: {
-    /**
-     * Object containing information for
-     * the required viewing.
-     */
-    entry: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  methods: {
-    cardClicked: function (data) {
-      EventBus.emit('connectivity-clicked', data);
-    },
-    cardHovered: function (data) {
-      EventBus.emit('connectivity-hovered', data);
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.dataset-card {
-  padding-left: 5px;
-  padding-right: 5px;
-  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;
-  cursor: pointer;
-}
-.card {
-  padding-top: 18px;
-  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;
-}
-
-.float-button-container {
-  position: absolute;
-  bottom: 8px;
-  right: 16px;
-  opacity: 0;
-  visibility: hidden;
-
-  .card:hover & {
-    opacity: 1;
-    visibility: visible;
-  }
-}
-</style>

package/src/components/ConnectivityExplorer.vue

@@ -1,352 +0,0 @@
-<template>
-  <div v-if="flatmapKnowledge" class="main">
-    <div class="header">
-      <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>
-    </div>
-    <div class="content scrollbar" ref="content">
-      <div v-for="result in paginatedResults" :key="result.id" class="step-item">
-        <connectivity-card
-          class="dataset-card"
-          :entry="result"
-          @mouseenter="hoverChanged(result)"
-          @mouseleave="hoverChanged(undefined)"
-        />
-      </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>
-
-const flatmapQuery = (flatmapApi, sql) => {
-  const data = { sql: sql }
-  return fetch(`${flatmapApi}knowledge/query/`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(data),
-  })
-    .then((response) => response.json())
-    .catch((error) => {
-      console.error('Error:', error)
-  })
-}
-
-const filterKnowledge = (knowledge, sckanVersion) => {
-  const result = knowledge.filter((item) => {
-    if (item?.source && item.source === sckanVersion) {
-      if ("connectivity" in item) {
-        return true
-      }
-    }
-    return false
-  })
-  return result
-}
-
-
-/* eslint-disable no-alert, no-console */
-import {
-  ElButton as Button,
-  ElCard as Card,
-  ElDrawer as Drawer,
-  ElIcon as Icon,
-  ElInput as Input,
-  ElPagination as Pagination,
-} from 'element-plus'
-import ConnectivityCard from './ConnectivityCard.vue'
-
-export default {
-  components: {
-    ConnectivityCard,
-    Button,
-    Card,
-    Drawer,
-    Icon,
-    Input,
-    Pagination
-  },
-  name: 'ConnectivityExplorer',
-  props: {
-    sckanVersion: {
-      type: String,
-      default: "sckan-2024-09-21-npo",
-    },
-    envVars: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data: function () {
-    return {
-      mapServer: "",
-      flatmapKnowledge: [],
-      results: [],
-      paginatedResults: [],
-      searchInput: "",
-      lastSearch: "",
-      numberOfHits: 0,
-      numberPerPage: 10,
-      page: 1,
-      previousSearch: undefined
-    }
-  },
-  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.previousSearch) {
-        if (input === "") {
-          this.results = this.flatmapKnowledge
-        } else {
-          for (const value of this.flatmapKnowledge) {
-            const lowerCase = input.toLowerCase()
-            const myJSON = JSON.stringify(value).toLowerCase()
-            if (myJSON.includes(lowerCase)) {
-              this.results.push(value)
-            }
-          }
-        }
-      }
-      console.log(this.flatmapKnowledge, this.results)
-      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
-      console.log(this.numberOfHits)
-    },
-    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
-    },
-  },
-  mounted: function () {
-    this.mapServer = this.envVars.FLATMAPAPI_LOCATION
-    console.log(this.mapServer)
-    if (this.mapServer) {
-      const sql = `select knowledge from knowledge
-        where source="${this.sckanVersion}"
-        order by source desc`;
-      flatmapQuery(this.mapServer, sql).then((response) => {
-        const mappedData = response.values.map(x => x[0])
-        const parsedData = mappedData.map(x => JSON.parse(x))
-        this.flatmapKnowledge = filterKnowledge(parsedData, this.sckanVersion)
-        this.search("");
-      });
-    }
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.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: 1.75rem;
-  padding: 1rem;
-}
-
-.step-item {
-  font-size: 14px;
-  margin-bottom: 18px;
-  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;
-}
-
-.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;
-}
-</style>