From 3ff86c5dc680348915c6daa5e9750aed7da88629 Mon Sep 17 00:00:00 2001
From: Mike VanDenburgh <michael.vandenburgh@kitware.com>
Date: Mon, 30 Jan 2023 13:51:42 -0500
Subject: [PATCH 1/2] Convert OverviewTab.vue to <script setup>

---
 web/src/components/DLP/OverviewTab.vue | 150 +++++++++++--------------
 1 file changed, 68 insertions(+), 82 deletions(-)

diff --git a/web/src/components/DLP/OverviewTab.vue b/web/src/components/DLP/OverviewTab.vue
index 383ef52ea..136b73692 100644
--- a/web/src/components/DLP/OverviewTab.vue
+++ b/web/src/components/DLP/OverviewTab.vue
@@ -223,12 +223,14 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { AssociatedProjects, DandisetMetadata, RelatedResource } from '@/types';
 import {
   computed,
   ComputedRef,
-  defineComponent, getCurrentInstance, onMounted, PropType,
+  getCurrentInstance,
+  onMounted,
+  PropType,
 } from 'vue';
 
 import MetadataCard from '@/components/DLP/MetadataCard.vue';
@@ -255,97 +257,81 @@ function isURL(str: string): boolean {
   return url.protocol === 'http:' || url.protocol === 'https:';
 }
 
-export default defineComponent({
-  name: 'OverviewTab',
-  components: { MetadataCard },
-  props: {
-    schema: {
-      type: Object,
-      required: true,
-    },
-    meta: {
-      type: Object as PropType<DandisetMetadata>,
-      required: true,
-    },
+const props = defineProps({
+  schema: {
+    type: Object,
+    required: true,
   },
-  setup(props) {
-    const $vuetify = computed(() => getCurrentInstance()?.proxy.$vuetify);
+  meta: {
+    type: Object as PropType<DandisetMetadata>,
+    required: true,
+  },
+});
+
+const $vuetify = computed(() => getCurrentInstance()?.proxy.$vuetify);
 
-    const store = useDandisetStore();
-    const currentDandiset = computed(() => store.dandiset);
+const store = useDandisetStore();
+const currentDandiset = computed(() => store.dandiset);
 
-    const contributors = computed(
-      () => props.meta.contributor?.filter(
-        (contributor) => !!(contributor.includeInCitation) && !!(contributor.schemaKey === 'Person'),
-      ),
-    );
-    const fundingInformation = computed(
-      () => props.meta.contributor?.filter(
-        (contributor) => !!(contributor.schemaKey === 'Organization')
+const contributors = computed(
+  () => props.meta.contributor?.filter(
+    (contributor) => !!(contributor.includeInCitation) && !!(contributor.schemaKey === 'Person'),
+  ),
+);
+const fundingInformation = computed(
+  () => props.meta.contributor?.filter(
+    (contributor) => !!(contributor.schemaKey === 'Organization')
         // Only include organizations with "Sponsor" or "Funder" roles in Funding Information
         && (contributor.roleName?.includes('dcite:Funder') || contributor.roleName?.includes('dcite:Sponsor')),
-      ) || [],
-    );
+  ) || [],
+);
 
-    const relatedResources: ComputedRef<RelatedResource|undefined> = computed(
-      () => props.meta.relatedResource,
-    );
+const relatedResources: ComputedRef<RelatedResource|undefined> = computed(
+  () => props.meta.relatedResource,
+);
 
-    const associatedProjects: ComputedRef<AssociatedProjects|undefined> = computed(
-      () => props.meta.wasGeneratedBy,
-    );
+const associatedProjects: ComputedRef<AssociatedProjects|undefined> = computed(
+  () => props.meta.wasGeneratedBy,
+);
 
-    const assetSummary = computed<Record<string, any>>(
-      () => Object.fromEntries(Object.entries(props.meta.assetsSummary).filter(
-        // filter out assetSummary fields we don't want to display
-        ([key, value]) => !!value && !ASSET_SUMMARY_BLACKLIST.has(key),
-      ).map(
-        // convert from camelCase to space-delimited string (i.e. "dataStandard" to "data Standard")
-        ([key, value]) => [key.replace(/[A-Z]/g, (letter) => ` ${letter.toUpperCase()}`), value],
-      ).map(
-        // capitalize the first letter in the string
-        ([key, value]: any) => [key.charAt(0).toUpperCase() + key.slice(1), value],
-      )
-        // convert primitive types to single-element arrays so they can be more easily rendered
-        .map(([key, value]: any) => (typeof value === 'object' ? [key, value] : [key, [value]]))),
-    );
+const assetSummary = computed<Record<string, any>>(
+  () => Object.fromEntries(Object.entries(props.meta.assetsSummary).filter(
+    // filter out assetSummary fields we don't want to display
+    ([key, value]) => !!value && !ASSET_SUMMARY_BLACKLIST.has(key),
+  ).map(
+    // convert from camelCase to space-delimited string (i.e. "dataStandard" to "data Standard")
+    ([key, value]) => [key.replace(/[A-Z]/g, (letter) => ` ${letter.toUpperCase()}`), value],
+  ).map(
+    // capitalize the first letter in the string
+    ([key, value]: any) => [key.charAt(0).toUpperCase() + key.slice(1), value],
+  )
+  // convert primitive types to single-element arrays so they can be more easily rendered
+    .map(([key, value]: any) => (typeof value === 'object' ? [key, value] : [key, [value]]))),
+);
 
-    // Approximate a good column count for asset summary card
-    const assetSummaryColumnCount = computed(
-      () => ($vuetify.value?.breakpoint.mdAndDown ? 1
-        : Math.min(Object.keys(assetSummary.value).length, 3)),
-    );
+// Approximate a good column count for asset summary card
+const assetSummaryColumnCount = computed(
+  () => ($vuetify.value?.breakpoint.mdAndDown ? 1
+    : Math.min(Object.keys(assetSummary.value).length, 3)),
+);
 
-    const assetSummaryBeingComputed = computed<boolean>(() => currentDandiset.value?.status === 'Pending');
+const assetSummaryBeingComputed = computed<boolean>(() => currentDandiset.value?.status === 'Pending');
 
-    const contactPeople = computed(
-      () => new Set(contributors.value
-        .filter((contributor) => contributor.roleName?.includes('dcite:ContactPerson'))
-        .map((contributor) => contributor.name)),
-    );
+const contactPeople = computed(
+  () => new Set(contributors.value
+    .filter((contributor) => contributor.roleName?.includes('dcite:ContactPerson'))
+    .map((contributor) => contributor.name)),
+);
 
-    onMounted(() => {
-      setInterval(async () => {
-        if (!currentDandiset.value || !assetSummaryBeingComputed.value) {
-          return;
-        }
-        const { identifier } = currentDandiset.value.dandiset;
-        const { version } = currentDandiset.value;
-        await store.fetchDandiset({ identifier, version });
-      }, 5000);
-    });
-
-    return {
-      contributors,
-      fundingInformation,
-      relatedResources,
-      associatedProjects,
-      assetSummary,
-      assetSummaryColumnCount,
-      assetSummaryBeingComputed,
-      contactPeople,
-      isURL,
-    };
-  },
+onMounted(() => {
+  setInterval(async () => {
+    if (!currentDandiset.value || !assetSummaryBeingComputed.value) {
+      return;
+    }
+    const { identifier } = currentDandiset.value.dandiset;
+    const { version } = currentDandiset.value;
+    await store.fetchDandiset({ identifier, version });
+  }, 5000);
 });
+
 </script>

From f19f72d5173576d709a7f854b820d2801341a077 Mon Sep 17 00:00:00 2001
From: Mike VanDenburgh <michael.vandenburgh@kitware.com>
Date: Mon, 30 Jan 2023 13:52:57 -0500
Subject: [PATCH 2/2] Use `import type` syntax in OverviewTab.vue

---
 web/src/components/DLP/OverviewTab.vue | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/web/src/components/DLP/OverviewTab.vue b/web/src/components/DLP/OverviewTab.vue
index 136b73692..90947dfa6 100644
--- a/web/src/components/DLP/OverviewTab.vue
+++ b/web/src/components/DLP/OverviewTab.vue
@@ -224,18 +224,13 @@
 </template>
 
 <script setup lang="ts">
-import { AssociatedProjects, DandisetMetadata, RelatedResource } from '@/types';
-import {
-  computed,
-  ComputedRef,
-  getCurrentInstance,
-  onMounted,
-  PropType,
-} from 'vue';
-
+import { computed, getCurrentInstance, onMounted } from 'vue';
 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';
+
 // Asset summary fields to hide
 const ASSET_SUMMARY_BLACKLIST = new Set([
   'numberOfBytes',