Merge pull request #124 from OpenTechStrategies/123-toggleable-metadata

123 toggleable metadata
OpenTechStrategies · Oct 4, 2024 · d3cc6e6 · d3cc6e6
2 parents 109adac + 7b66c97
commit d3cc6e6
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 20 deletions.
diff --git a/archesdataviewer/static/vite_build/.vite/manifest.json b/archesdataviewer/static/vite_build/.vite/manifest.json
@@ -1,11 +1,11 @@
 {
   "index.html": {
-    "file": "assets/index-D59f8yLq.js",
+    "file": "assets/index-BQr2MO2B.js",
     "name": "index",
     "src": "index.html",
     "isEntry": true,
     "css": [
-      "assets/index-BIL9014k.css"
+      "assets/index-BzCkL01G.css"
     ]
   }
 }
diff --git a/archesdataviewer/static/vite_build/assets/index-BIL9014k.css b/archesdataviewer/static/vite_build/assets/index-BIL9014k.css
diff --git a/...tatic/vite_build/assets/index-D59f8yLq.js → ...tatic/vite_build/assets/index-BQr2MO2B.js b/...tatic/vite_build/assets/index-D59f8yLq.js → ...tatic/vite_build/assets/index-BQr2MO2B.js
diff --git a/archesdataviewer/static/vite_build/assets/index-BzCkL01G.css b/archesdataviewer/static/vite_build/assets/index-BzCkL01G.css
diff --git a/archesdataviewer/static/vite_build/index.html b/archesdataviewer/static/vite_build/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Arches Data Viewer</title>
-    <script type="module" crossorigin src="/assets/index-D59f8yLq.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BIL9014k.css">
+    <script type="module" crossorigin src="/assets/index-BQr2MO2B.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BzCkL01G.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/front-end/src/components/ResourceDetail.vue b/front-end/src/components/ResourceDetail.vue
@@ -9,19 +9,32 @@
   </div>
 
   <slot name="items"></slot>
+
   <div v-if="$slots['more-by-artist']" class="resource-detail-more-by-artist">
     <slot name="more-by-artist"></slot>
   </div>
 
-  <div class="resource-detail-metadata">
+  <button type="button" class="toggle-metadata" @click="toggleMetadata">
+    <span>{{ showMetadata ? 'Hide arches metadata' : 'Show arches metadata' }}</span>
+  </button>
+
+  <div :class="['resource-detail-metadata', { collapsed: !showMetadata }]">
     <div class="resource-detail-metadata-title">Arches metadata:</div>
     <div class="resource-detail-metadata-content">
       <slot name="metadata"></slot>
     </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const showMetadata = ref<boolean>(false);
+
+const toggleMetadata = () => {
+  showMetadata.value = !showMetadata.value;
+};
+</script>
 
 <style scoped>
 .resource-detail-header {
@@ -50,13 +63,22 @@
 }
 
 .resource-detail-metadata {
-  display: flex;
-  flex-direction: column;
-  gap: var(--wac--semantic-spacing--quartary);
+  overflow: hidden;
+  max-height: 50px;
+  transition: max-height 0.5s ease;
   color: var(--wac--color--gray);
 }
 
+.resource-detail-metadata.collapsed {
+  max-height: 0px;
+}
+
 .resource-detail-metadata-title {
   font-weight: var(--wac--font-weight--bold);
 }
+
+.toggle-metadata {
+  display: inline-block;
+  max-width: 180px;
+}
 </style>
diff --git a/front-end/src/components/ResourcePanel.vue b/front-end/src/components/ResourcePanel.vue
@@ -65,7 +65,6 @@
         />
       </template>
       <template #metadata>
-        <div>Graph ID: {{ props.resource.graph_id }}</div>
         <div>
           Resource Instance ID:
           <a :href="`${archesUrl}/report/${props.resource.resourceinstanceid}`">{{