@abi-software/map-side-bar 2.3.1 → 2.4.0-alpha-1

package/src/components/EventBus.js

@@ -1,3 +1,3 @@
-import mitt from 'mitt';
-const EventBus = new mitt();
-export default EventBus;
+import mitt from 'mitt';
+const EventBus = new mitt();
+export default EventBus;

package/src/components/ExternalResourceCard.vue

@@ -1,113 +1,113 @@
-<template>
-  <div class="resource-container">
-    <template v-for="resource in resources" :key="resource.id">
-      <div class="resource">
-        <el-button
-          v-if="resource.id === 'pubmed'"
-          class="button"
-          id="open-pubmed-button"
-          :icon="ElIconNotebook"
-          @click="openUrl(resource.url)"
-        >
-          Open publications in PubMed
-        </el-button>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { shallowRef } from 'vue'
-import {
-  Notebook as ElIconNotebook,
-} from '@element-plus/icons-vue'
-/* eslint-disable no-alert, no-console */
-import { ElButton as Button } from 'element-plus'
-import EventBus from './EventBus'
-
-export default {
-  name: 'ExternalResourceCard',
-  components: {
-    Button,
-  },
-  props: {
-    resources: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data: function () {
-    return {
-      pubmeds: [],
-      pubmedIds: [],
-      ElIconNotebook: shallowRef(ElIconNotebook)
-    }
-  },
-  methods: {
-    capitalise: function (string) {
-      return string.charAt(0).toUpperCase() + string.slice(1)
-    },
-    openUrl: function (url) {
-      EventBus.emit('open-pubmed-url', url);
-      window.open(url, '_blank')
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.resource-container {
-  margin-top: 0.5em;
-}
-
-.attribute-title {
-  font-size: 16px;
-  font-weight: 600;
-  /* font-weight: bold; */
-  text-transform: uppercase;
-}
-
-.attribute-content {
-  font-size: 14px;
-  font-weight: 400;
-}
-
-.el-link {
-  color: $app-primary-color;
-  text-decoration: none;
-  word-wrap: break-word;
-  &:hover,
-  &:focus {
-    color: $app-primary-color;
-  }
-}
-
-:deep(.el-carousel__button) {
-  background-color: $app-primary-color;
-}
-
-.attribute-title {
-  font-size: 16px;
-  font-weight: 600;
-  /* font-weight: bold; */
-  text-transform: uppercase;
-}
-
-.button {
-  margin-left: 0px !important;
-  margin-top: 0px !important;
-  font-size: 14px !important;
-  background-color: $app-primary-color;
-  color: #fff;
-  &:hover {
-    color: #fff !important;
-    background: #ac76c5 !important;
-    border: 1px solid #ac76c5 !important;
-  }
-  & + .button {
-    margin-top: 10px !important;
-    background-color: $app-primary-color;
-    color: #fff;
-  }
-}
-</style>
+<template>
+  <div class="resource-container">
+    <template v-for="resource in resources" :key="resource.id">
+      <div class="resource">
+        <el-button
+          v-if="resource.id === 'pubmed'"
+          class="button"
+          id="open-pubmed-button"
+          :icon="ElIconNotebook"
+          @click="openUrl(resource.url)"
+        >
+          Open publications in PubMed
+        </el-button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { shallowRef } from 'vue'
+import {
+  Notebook as ElIconNotebook,
+} from '@element-plus/icons-vue'
+/* eslint-disable no-alert, no-console */
+import { ElButton as Button } from 'element-plus'
+import EventBus from './EventBus'
+
+export default {
+  name: 'ExternalResourceCard',
+  components: {
+    Button,
+  },
+  props: {
+    resources: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data: function () {
+    return {
+      pubmeds: [],
+      pubmedIds: [],
+      ElIconNotebook: shallowRef(ElIconNotebook)
+    }
+  },
+  methods: {
+    capitalise: function (string) {
+      return string.charAt(0).toUpperCase() + string.slice(1)
+    },
+    openUrl: function (url) {
+      EventBus.emit('open-pubmed-url', url);
+      window.open(url, '_blank')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.resource-container {
+  margin-top: 0.5em;
+}
+
+.attribute-title {
+  font-size: 16px;
+  font-weight: 600;
+  /* font-weight: bold; */
+  text-transform: uppercase;
+}
+
+.attribute-content {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.el-link {
+  color: $app-primary-color;
+  text-decoration: none;
+  word-wrap: break-word;
+  &:hover,
+  &:focus {
+    color: $app-primary-color;
+  }
+}
+
+:deep(.el-carousel__button) {
+  background-color: $app-primary-color;
+}
+
+.attribute-title {
+  font-size: 16px;
+  font-weight: 600;
+  /* font-weight: bold; */
+  text-transform: uppercase;
+}
+
+.button {
+  margin-left: 0px !important;
+  margin-top: 0px !important;
+  font-size: 14px !important;
+  background-color: $app-primary-color;
+  color: #fff;
+  &:hover {
+    color: #fff !important;
+    background: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
+  & + .button {
+    margin-top: 10px !important;
+    background-color: $app-primary-color;
+    color: #fff;
+  }
+}
+</style>

package/src/components/FlatmapDatasetCard.vue

@@ -0,0 +1,171 @@
+<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">
+          <img class="banner-img" :src="thumbnail" @click="openDataset" />
+        </span>
+        <div class="card-right" @click="openDataset">
+          {{entry[0]}}
+          {{entry [1]}}
+          <el-button class="button">View on flatmap</el-button>
+          <el-button class="button">View connectivity</el-button>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+/* eslint-disable no-alert, no-console */
+import {
+  ElButton,
+  ElIcon
+} from 'element-plus'
+
+export default {
+  name: "PMRDatasetCard",
+  components: {
+    ElButton,
+    ElIcon
+  },
+  props: {
+    /**
+     * Object containing information for
+     * the required viewing.
+     */
+    entry: {
+      type: Array,
+      default: () => []
+    },
+    envVars: {
+      type: Object,
+      default: () => {}
+    },
+  },
+  data: function () {
+    return {
+      // url below is a missing image icon
+      thumbnail: 'assets/missing-image.svg',
+      dataLocation: this.entry.doi,
+      discoverId: undefined,
+      loading: false,
+      version: 1,
+      lastDoi: undefined,
+      biolucidaData: undefined,
+      currentCategory: "All"
+    };
+  },
+  methods: {
+    openDataset() {
+      window.open(this.entry.model, "_blank");
+    },
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+.dataset-card {
+  padding-left: 16px;
+  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 ::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;
+}
+
+.button {
+  width: 150px;
+  height: 40px;
+  background-color: $app-primary-color;
+  border: $app-primary-color;
+  color: white;
+}
+</style>