From f8123e575f7c12fc147313642ccf875d3c25ddcc Mon Sep 17 00:00:00 2001
From: Yaroslav Halchenko <debian@onerussian.com>
Date: Mon, 9 Dec 2024 17:47:14 -0500
Subject: [PATCH 1/7] DLP: Add "Protocols" card

Closes #2071
---
 web/src/components/DLP/OverviewTab.vue | 30 +++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/web/src/components/DLP/OverviewTab.vue b/web/src/components/DLP/OverviewTab.vue
index 5bd94335c..854675478 100644
--- a/web/src/components/DLP/OverviewTab.vue
+++ b/web/src/components/DLP/OverviewTab.vue
@@ -67,6 +67,30 @@
       </template>
     </MetadataCard>
 
+    <MetadataCard
+      :items="protocols"
+      v-if="protocols && protocols.length"
+      name="Protocols"
+      icon="mdi-protocol"
+    >
+      <template #content="slotProps">
+        <div class="text-caption grey--text text--darken-1">
+          <span class="pl-2">
+            - {{ slotProps.item }}
+               <v-btn
+                      v-if="isURL(slotProps.item)"
+                      icon
+                      :href="slotProps.item"
+                      target="_blank"
+                      rel="noopener"
+               >
+                   <v-icon>mdi-link</v-icon>
+               </v-btn>
+          </span>
+        </div>
+      </template>
+    </MetadataCard>
+
     <MetadataCard
       v-if="relatedResources && relatedResources.length"
       :items="relatedResources"
@@ -232,7 +256,7 @@ import MetadataCard from '@/components/DLP/MetadataCard.vue';
 import { useDandisetStore } from '@/stores/dandiset';
 
 import type { ComputedRef, PropType } from 'vue';
-import type { AssociatedProjects, DandisetMetadata, RelatedResource } from '@/types';
+import type { AssociatedProjects, DandisetMetadata, RelatedResource, Protocol } from '@/types';
 
 // Asset summary fields to hide
 const ASSET_SUMMARY_BLACKLIST = new Set([
@@ -288,6 +312,10 @@ const relatedResources: ComputedRef<RelatedResource|undefined> = computed(
   () => props.meta.relatedResource,
 );
 
+const protocols: ComputedRef<Protocol|undefined> = computed(
+  () => props.meta.protocol,
+);
+
 const associatedProjects: ComputedRef<AssociatedProjects|undefined> = computed(
   () => props.meta.wasGeneratedBy,
 );

From 2084fd56c9f2384338cdbed4c7a212b38b447f06 Mon Sep 17 00:00:00 2001
From: Roni Choudhury <2903332+waxlamp@users.noreply.github.com>
Date: Tue, 17 Dec 2024 10:14:54 -0500
Subject: [PATCH 2/7] Use a better icon for "protocol" concept

Co-authored-by: Yaroslav Halchenko <debian@onerussian.com>
---
 web/src/components/DLP/OverviewTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/DLP/OverviewTab.vue b/web/src/components/DLP/OverviewTab.vue
index 854675478..79cf5c513 100644
--- a/web/src/components/DLP/OverviewTab.vue
+++ b/web/src/components/DLP/OverviewTab.vue
@@ -71,7 +71,7 @@
       :items="protocols"
       v-if="protocols && protocols.length"
       name="Protocols"
-      icon="mdi-protocol"
+      icon="mdi-file-document-check"
     >
       <template #content="slotProps">
         <div class="text-caption grey--text text--darken-1">

From a3d620c9aa71d46d5dbcec8fa0a3e1c225d70786 Mon Sep 17 00:00:00 2001
From: Mike VanDenburgh <michael.vandenburgh@kitware.com>
Date: Tue, 17 Dec 2024 10:40:53 -0500
Subject: [PATCH 3/7] Wrap Contributors box with v-row/v-col

The `MetadataCard` wraps its contents in a `v-row` and `v-col`, which
adds some additional padding around the card. The "Contributors" card,
however, is the only DLP card that doesn't use the `MetadataCard`
component. Prior to this change, the "Contributors" card didn't use
`v-row` and `v-col`, so it didn't have the same padding as the other
cards.
---
 web/src/components/DLP/OverviewTab.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/components/DLP/OverviewTab.vue b/web/src/components/DLP/OverviewTab.vue
index 79cf5c513..f60b09f83 100644
--- a/web/src/components/DLP/OverviewTab.vue
+++ b/web/src/components/DLP/OverviewTab.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
+    <v-row>
+      <v-col>
     <v-card
       v-if="contributors && contributors.length"
       outlined
@@ -42,7 +44,8 @@
         </v-chip>
       </div>
     </v-card>
-
+      </v-col>
+    </v-row>
     <MetadataCard
       :items="fundingInformation"
       name="Funding information"

From 5f4e7a451645253d7cb256a56fa83aff09337f27 Mon Sep 17 00:00:00 2001
From: Mike VanDenburgh <michael.vandenburgh@kitware.com>
Date: Tue, 17 Dec 2024 10:44:03 -0500
Subject: [PATCH 4/7] Format template

---
 web/src/components/DLP/OverviewTab.vue | 78 +++++++++++++-------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/web/src/components/DLP/OverviewTab.vue b/web/src/components/DLP/OverviewTab.vue
index f60b09f83..428dd9f1c 100644
--- a/web/src/components/DLP/OverviewTab.vue
+++ b/web/src/components/DLP/OverviewTab.vue
@@ -2,48 +2,48 @@
   <div>
     <v-row>
       <v-col>
-    <v-card
-      v-if="contributors && contributors.length"
-      outlined
-      height="100%"
-    >
-      <v-card-title class="font-weight-regular">
-        <v-icon class="mr-3 grey--text text--lighten-1">
-          mdi-account-multiple
-        </v-icon>
-        Contributors
-      </v-card-title>
-      <div class="px-2 mb-2">
-        <v-chip
-          v-for="(contributor, i) in contributors"
-          :key="i"
-          style="margin: 5px;"
+        <v-card
+          v-if="contributors && contributors.length"
           outlined
+          height="100%"
         >
-          {{ contributor.name }}
-          <a
-            v-if="contributor.identifier && contributor.schemaKey === 'Person'"
-            :href="`https://orcid.org/${contributor.identifier}`"
-            target="_blank"
-            class="mx-1 d-flex align-center"
-          >
-            <img
-              alt="ORCID logo"
-              src="https://info.orcid.org/wp-content/uploads/2019/11/orcid_16x16.png"
-              width="16"
-              height="16"
+          <v-card-title class="font-weight-regular">
+            <v-icon class="mr-3 grey--text text--lighten-1">
+              mdi-account-multiple
+            </v-icon>
+            Contributors
+          </v-card-title>
+          <div class="px-2 mb-2">
+            <v-chip
+              v-for="(contributor, i) in contributors"
+              :key="i"
+              style="margin: 5px;"
+              outlined
             >
-          </a>
-          <a
-            v-if="contactPeople.has(contributor.name)"
-            :href="contributor.email ? `mailto:${contributor.email}` : undefined"
-            class="mx-1 text-decoration-none"
-          >
-            <v-icon color="info">mdi-card-account-mail</v-icon>
-          </a>
-        </v-chip>
-      </div>
-    </v-card>
+              {{ contributor.name }}
+              <a
+                v-if="contributor.identifier && contributor.schemaKey === 'Person'"
+                :href="`https://orcid.org/${contributor.identifier}`"
+                target="_blank"
+                class="mx-1 d-flex align-center"
+              >
+                <img
+                  alt="ORCID logo"
+                  src="https://info.orcid.org/wp-content/uploads/2019/11/orcid_16x16.png"
+                  width="16"
+                  height="16"
+                >
+              </a>
+              <a
+                v-if="contactPeople.has(contributor.name)"
+                :href="contributor.email ? `mailto:${contributor.email}` : undefined"
+                class="mx-1 text-decoration-none"
+              >
+                <v-icon color="info">mdi-card-account-mail</v-icon>
+              </a>
+            </v-chip>
+          </div>
+        </v-card>
       </v-col>
     </v-row>
     <MetadataCard

From 191b15345ae3ae771aeda73650c0e732a6de7464 Mon Sep 17 00:00:00 2001
From: Mike VanDenburgh <michael.vandenburgh@kitware.com>
Date: Tue, 17 Dec 2024 10:50:34 -0500
Subject: [PATCH 5/7] Wrap `Assets Summary` box with v-row/v-col

See previous commit about `Contributors` card, this is the same issue.
---
 web/src/components/DLP/OverviewTab.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/src/components/DLP/OverviewTab.vue b/web/src/components/DLP/OverviewTab.vue
index 428dd9f1c..9c06626c8 100644
--- a/web/src/components/DLP/OverviewTab.vue
+++ b/web/src/components/DLP/OverviewTab.vue
@@ -135,6 +135,8 @@
       </template>
     </MetadataCard>
 
+    <v-row>
+      <v-col>
     <v-card
       v-if="assetSummary"
       outlined
@@ -230,6 +232,8 @@
         </div>
       </v-list>
     </v-card>
+      </v-col>
+    </v-row>
 
     <MetadataCard
       v-if="associatedProjects && associatedProjects.length"

From d18ab818728ba46073d1fce34d9d9fe2e99303d5 Mon Sep 17 00:00:00 2001
From: Mike VanDenburgh <michael.vandenburgh@kitware.com>
Date: Tue, 17 Dec 2024 10:51:15 -0500
Subject: [PATCH 6/7] Format template

---
 web/src/components/DLP/OverviewTab.vue | 168 ++++++++++++-------------
 1 file changed, 84 insertions(+), 84 deletions(-)

diff --git a/web/src/components/DLP/OverviewTab.vue b/web/src/components/DLP/OverviewTab.vue
index 9c06626c8..8d5da96d7 100644
--- a/web/src/components/DLP/OverviewTab.vue
+++ b/web/src/components/DLP/OverviewTab.vue
@@ -137,101 +137,101 @@
 
     <v-row>
       <v-col>
-    <v-card
-      v-if="assetSummary"
-      outlined
-    >
-      <v-card-title class="font-weight-regular">
-        <v-progress-circular
-          v-if="assetSummaryBeingComputed"
-          class="mr-3"
-          size="20"
-          indeterminate
-        />
-        <v-icon
-          v-else
-          class="mr-3 grey--text text--lighten-1"
-        >
-          mdi-clipboard-list
-        </v-icon>
-        Assets Summary
-      </v-card-title>
-      <v-list
-        :style="`column-count: ${assetSummaryColumnCount};`"
-        class="px-3 ml-2"
-      >
-        <div
-          v-if="assetSummaryBeingComputed"
-          class="text-subtitle-2"
-        >
-          The assets summary is being computed, please wait.
-        </div>
-        <div
-          v-else-if="!assetSummary || !Object.keys(assetSummary).length"
-          class="font-italic font-weight-bold"
-        >
-          This Dandiset does not contain any assets.
-        </div>
-        <div
-          v-for="([type, items], i) in Object.entries(assetSummary)"
-          v-else
-          :key="i"
+        <v-card
+          v-if="assetSummary"
+          outlined
         >
-          <div
-            v-if="items && items.length"
-            class="d-inline-block"
-            style="width: 100%;"
+          <v-card-title class="font-weight-regular">
+            <v-progress-circular
+              v-if="assetSummaryBeingComputed"
+              class="mr-3"
+              size="20"
+              indeterminate
+            />
+            <v-icon
+              v-else
+              class="mr-3 grey--text text--lighten-1"
+            >
+              mdi-clipboard-list
+            </v-icon>
+            Assets Summary
+          </v-card-title>
+          <v-list
+            :style="`column-count: ${assetSummaryColumnCount};`"
+            class="px-3 ml-2"
           >
-            <span class="font-weight-bold">
-              {{ type }}
-            </span>
             <div
-              v-for="(item, ii) in items"
-              :key="ii"
-              :title="type"
-              background-color="grey lighten-4"
-              class="grey lighten-4"
-              style="width: 100%;"
+              v-if="assetSummaryBeingComputed"
+              class="text-subtitle-2"
+            >
+              The assets summary is being computed, please wait.
+            </div>
+            <div
+              v-else-if="!assetSummary || !Object.keys(assetSummary).length"
+              class="font-italic font-weight-bold"
+            >
+              This Dandiset does not contain any assets.
+            </div>
+            <div
+              v-for="([type, items], i) in Object.entries(assetSummary)"
+              v-else
+              :key="i"
             >
               <div
-                class="pl-2 my-1 py-1"
-                :style="`border-left: medium solid ${$vuetify.theme.themes.light.primary};
-                         line-height: 1.25`"
+                v-if="items && items.length"
+                class="d-inline-block"
+                style="width: 100%;"
               >
-                <v-row
-                  no-gutters
-                  class="align-center py-0"
-                  style="min-height: 2em;"
+                <span class="font-weight-bold">
+                  {{ type }}
+                </span>
+                <div
+                  v-for="(item, ii) in items"
+                  :key="ii"
+                  :title="type"
+                  background-color="grey lighten-4"
+                  class="grey lighten-4"
+                  style="width: 100%;"
                 >
-                  <v-col
-                    cols="10"
+                  <div
+                    class="pl-2 my-1 py-1"
+                    :style="`border-left: medium solid ${$vuetify.theme.themes.light.primary};
+                            line-height: 1.25`"
                   >
-                    <span>{{ item.name || item.identifier || item.id || item }}</span>
-                  </v-col>
-                  <v-col>
-                    <v-btn
-                      v-if="isURL(item.identifier)"
-                      icon
-                      :href="item.identifier"
-                      target="_blank"
-                      rel="noopener"
+                    <v-row
+                      no-gutters
+                      class="align-center py-0"
+                      style="min-height: 2em;"
                     >
-                      <v-icon>mdi-link</v-icon>
-                    </v-btn>
-                  </v-col>
-                </v-row>
-                <span
-                  v-if="!isURL(item.identifier)"
-                  class="text-caption grey--text text--darken-1"
-                >
-                  {{ item.identifier }}
-                </span>
+                      <v-col
+                        cols="10"
+                      >
+                        <span>{{ item.name || item.identifier || item.id || item }}</span>
+                      </v-col>
+                      <v-col>
+                        <v-btn
+                          v-if="isURL(item.identifier)"
+                          icon
+                          :href="item.identifier"
+                          target="_blank"
+                          rel="noopener"
+                        >
+                          <v-icon>mdi-link</v-icon>
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                    <span
+                      v-if="!isURL(item.identifier)"
+                      class="text-caption grey--text text--darken-1"
+                    >
+                      {{ item.identifier }}
+                    </span>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
-      </v-list>
-    </v-card>
+          </v-list>
+        </v-card>
       </v-col>
     </v-row>
 

From d50ace4b5b9145074ffecd58fb8ead4886dda78b Mon Sep 17 00:00:00 2001
From: Roni Choudhury <2903332+waxlamp@users.noreply.github.com>
Date: Thu, 19 Dec 2024 13:35:58 -0500
Subject: [PATCH 7/7] Display protocol links as hyperlinks

---
 web/src/components/DLP/OverviewTab.vue | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/web/src/components/DLP/OverviewTab.vue b/web/src/components/DLP/OverviewTab.vue
index 8d5da96d7..4a03df129 100644
--- a/web/src/components/DLP/OverviewTab.vue
+++ b/web/src/components/DLP/OverviewTab.vue
@@ -78,18 +78,13 @@
     >
       <template #content="slotProps">
         <div class="text-caption grey--text text--darken-1">
-          <span class="pl-2">
-            - {{ slotProps.item }}
-               <v-btn
-                      v-if="isURL(slotProps.item)"
-                      icon
-                      :href="slotProps.item"
-                      target="_blank"
-                      rel="noopener"
-               >
-                   <v-icon>mdi-link</v-icon>
-               </v-btn>
-          </span>
+            <a
+                :href="slotProps.item"
+                target="_blank"
+                rel="noopener"
+            >
+                {{ slotProps.item }}
+            </a>
         </div>
       </template>
     </MetadataCard>