From 7b044c0ddae1c0c6e2e936cf3a98b2312ba2393b Mon Sep 17 00:00:00 2001
From: Grady Ward <grady.b.ward@gmail.com>
Date: Mon, 22 Jan 2024 14:01:57 -0700
Subject: [PATCH] Formalizes URL Structure

---
 .../analysis/ContextualListView.vue           |   3 +-
 frontend/components/analysis/ListView.vue     |  35 +++-
 frontend/components/analysis/RunButton.vue    |   3 +-
 frontend/components/portfolio/ListView.vue    |  45 ++++-
 .../components/portfolio/group/ListView.vue   |  41 +++-
 frontend/lib/mydata/index.ts                  |  55 ++++++
 frontend/pages/audit-logs.vue                 |  13 +-
 frontend/pages/incomplete-uploads.vue         | 182 ------------------
 frontend/pages/my-data.vue                    |  79 ++++----
 frontend/pages/upload.vue                     |   3 +-
 10 files changed, 198 insertions(+), 261 deletions(-)
 create mode 100644 frontend/lib/mydata/index.ts
 delete mode 100644 frontend/pages/incomplete-uploads.vue

diff --git a/frontend/components/analysis/ContextualListView.vue b/frontend/components/analysis/ContextualListView.vue
index 37351c0..e34b0af 100644
--- a/frontend/components/analysis/ContextualListView.vue
+++ b/frontend/components/analysis/ContextualListView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { AnalysisType, type Analysis } from '@/openapi/generated/pacta'
+import { linkToAnalysis } from '@/lib/mydata'
 
 const { humanReadableTimeFromStandardString } = useTime()
 const i18n = useI18n()
@@ -98,7 +99,7 @@ const reportButtonClasses = computed(() => {
           <LinkButton
             class="p-button-outlined p-button-xs p-button-secondary"
             icon="pi pi-arrow-right"
-            :to="localePath(`/my-data?tab=a&analyses=${slotProps.data.id}`)"
+            :to="linkToAnalysis(localePath, slotProps.data.id)"
           />
         </template>
       </PVColumn>
diff --git a/frontend/components/analysis/ListView.vue b/frontend/components/analysis/ListView.vue
index df39910..64ed475 100644
--- a/frontend/components/analysis/ListView.vue
+++ b/frontend/components/analysis/ListView.vue
@@ -16,25 +16,27 @@ interface Props {
   portfolioGroups: PortfolioGroup[]
   initiatives: Initiative[]
   analyses: Analysis[]
-  selectedPortfolioIds: string[]
-  selectedPortfolioGroupIds: string[]
   selectedAnalysisIds: string[]
+  expandedAnalysisIds: string[]
 }
 const props = defineProps<Props>()
 interface Emits {
-  (e: 'update:selectedPortfolioIds', value: string[]): void
-  (e: 'update:selectedPortfolioGroupIds', value: string[]): void
   (e: 'update:selectedAnalysisIds', value: string[]): void
+  (e: 'update:expandedAnalysisIds', value: string[]): void
   (e: 'refresh'): void
 }
 const emit = defineEmits<Emits>()
 
 const refresh = () => { emit('refresh') }
 
-const selectedAnalysisIDs = computed({
+const selectedAnalysisIdsModel = computed({
   get: () => props.selectedAnalysisIds ?? [],
   set: (value: string[]) => { emit('update:selectedAnalysisIds', value) },
 })
+const expandedAnalysisIdsModel = computed({
+  get: () => props.expandedAnalysisIds ?? [],
+  set: (value: string[]) => { emit('update:expandedAnalysisIds', value) },
+})
 
 interface EditorObject extends ReturnType<typeof analysisEditor> {
   id: string
@@ -44,16 +46,33 @@ interface EditorObject extends ReturnType<typeof analysisEditor> {
 
 const prefix = 'components/analysis/ListView'
 const tt = (s: string) => t(`${prefix}.${s}`)
-const expandedRows = useState<EditorObject[]>(`${prefix}.expandedRows`, () => [])
 const selectedRows = computed<EditorObject[]>({
   get: () => {
-    const ids = selectedAnalysisIDs.value
+    const ids = selectedAnalysisIdsModel.value
+    return editorObjects.value.filter((editorObject) => ids.includes(editorObject.id))
+  },
+  set: (value: EditorObject[]) => {
+    const ids = value.map((row) => row.id)
+    ids.sort()
+    selectedAnalysisIdsModel.value = ids
+  },
+})
+const readyToExpand = useState<boolean>(`${prefix}.readyToExpand`, () => false)
+onMounted(() => {
+  readyToExpand.value = true
+})
+const expandedRows = computed<EditorObject[]>({
+  get: () => {
+    if (!readyToExpand.value) {
+      return []
+    }
+    const ids = expandedAnalysisIdsModel.value
     return editorObjects.value.filter((editorObject) => ids.includes(editorObject.id))
   },
   set: (value: EditorObject[]) => {
     const ids = value.map((row) => row.id)
     ids.sort()
-    selectedAnalysisIDs.value = ids
+    expandedAnalysisIdsModel.value = ids
   },
 })
 
diff --git a/frontend/components/analysis/RunButton.vue b/frontend/components/analysis/RunButton.vue
index 384fb9b..e8ebe4c 100644
--- a/frontend/components/analysis/RunButton.vue
+++ b/frontend/components/analysis/RunButton.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { type RunAnalysisReq, type Analysis, type AnalysisType } from '@/openapi/generated/pacta'
+import { linkToAnalysis } from '@/lib/mydata'
 
 const pactaClient = usePACTA()
 const { loading: { withLoading } } = useModal()
@@ -98,7 +99,7 @@ const completeBtnTo = computed(() => {
   if (!analysisId.value) {
     return ''
   }
-  return localePath(`/my-data?tab=a&analyses=${analysisId.value}`)
+  return linkToAnalysis(localePath, analysisId.value)
 })
 const completeBtnLabel = computed(() => {
   if (!analysisId.value) {
diff --git a/frontend/components/portfolio/ListView.vue b/frontend/components/portfolio/ListView.vue
index 9ddbef9..ce73b2c 100644
--- a/frontend/components/portfolio/ListView.vue
+++ b/frontend/components/portfolio/ListView.vue
@@ -2,6 +2,7 @@
 import { portfolioEditor } from '@/lib/editor'
 import { type Portfolio, type PortfolioGroup, type Initiative, type Analysis } from '@/openapi/generated/pacta'
 import { selectedCountSuffix } from '@/lib/selection'
+import { linkToPortfolioGroup } from '@/lib/mydata'
 
 const {
   humanReadableTimeFromStandardString,
@@ -18,24 +19,26 @@ interface Props {
   initiatives: Initiative[]
   analyses: Analysis[]
   selectedPortfolioIds: string[]
-  selectedPortfolioGroupIds: string[]
-  selectedAnalysisIds: string[]
+  expandedPortfolioIds: string[]
 }
 const props = defineProps<Props>()
 interface Emits {
   (e: 'update:selectedPortfolioIds', value: string[]): void
-  (e: 'update:selectedPortfolioGroupIds', value: string[]): void
-  (e: 'update:selectedAnalysisIds', value: string[]): void
+  (e: 'update:expandedPortfolioIds', value: string[]): void
   (e: 'refresh'): void
 }
 const emit = defineEmits<Emits>()
 
 const refresh = () => { emit('refresh') }
 
-const selectedPortfolioIDs = computed({
+const selectedPortfolioIdsModel = computed({
   get: () => props.selectedPortfolioIds ?? [],
   set: (value: string[]) => { emit('update:selectedPortfolioIds', value) },
 })
+const expandedPortfolioIdsModel = computed({
+  get: () => props.expandedPortfolioIds ?? [],
+  set: (value: string[]) => { emit('update:expandedPortfolioIds', value) },
+})
 
 interface EditorObject extends ReturnType<typeof portfolioEditor> {
   id: string
@@ -44,16 +47,36 @@ interface EditorObject extends ReturnType<typeof portfolioEditor> {
 
 const prefix = 'components/portfolio/ListView'
 const tt = (s: string) => t(`${prefix}.${s}`)
-const expandedRows = useState<EditorObject[]>(`${prefix}.expandedRows`, () => [])
+
 const selectedRows = computed<EditorObject[]>({
   get: () => {
-    const ids = selectedPortfolioIDs.value
+    const ids = selectedPortfolioIdsModel.value
     return editorObjects.value.filter((editorObject) => ids.includes(editorObject.id))
   },
   set: (value: EditorObject[]) => {
     const ids = value.map((row) => row.id)
     ids.sort()
-    selectedPortfolioIDs.value = ids
+    selectedPortfolioIdsModel.value = ids
+  },
+})
+const readyToExpand = useState<boolean>(`${prefix}.readyToExpand`, () => false)
+onMounted(() => {
+  readyToExpand.value = true
+})
+const expandedRows = computed<EditorObject[]>({
+  get: () => {
+    if (!readyToExpand.value) {
+      return []
+    }
+    const ids = expandedPortfolioIdsModel.value
+    const result = editorObjects.value.filter((editorObject) => ids.includes(editorObject.id))
+    console.log('expandedRows = ', result.length)
+    return result
+  },
+  set: (value: EditorObject[]) => {
+    const ids = value.map((row) => row.id)
+    ids.sort()
+    expandedPortfolioIdsModel.value = ids
   },
 })
 
@@ -85,6 +108,10 @@ const deleteSelected = () => Promise.all([selectedRows.value.map((row) => delete
 <template>
   <div class="flex flex-column gap-3">
     <div class="flex gap-2 flex-wrap">
+      <StandardDebug
+        :value="props.expandedPortfolioIds"
+        label="Expanded Portfolio IDs"
+      />
       <PVButton
         icon="pi pi-refresh"
         class="p-button-outlined p-button-secondary p-button-sm"
@@ -155,7 +182,7 @@ const deleteSelected = () => Promise.all([selectedRows.value.map((row) => delete
                 class="p-button-outlined p-button-xs"
                 icon="pi pi-table"
                 :label="membership.portfolioGroup.name"
-                :to="localePath(`/my-data?tab=pg&pgids=${membership.portfolioGroup.id}`)"
+                :to="linkToPortfolioGroup(localePath, membership.portfolioGroup.id)"
               />
             </div>
             <div
diff --git a/frontend/components/portfolio/group/ListView.vue b/frontend/components/portfolio/group/ListView.vue
index a8ebe86..b8ae8be 100644
--- a/frontend/components/portfolio/group/ListView.vue
+++ b/frontend/components/portfolio/group/ListView.vue
@@ -2,6 +2,7 @@
 import { portfolioGroupEditor } from '@/lib/editor'
 import { type Portfolio, type PortfolioGroup, type PortfolioGroupMembershipPortfolio, type Analysis } from '@/openapi/generated/pacta'
 import { selectedCountSuffix } from '@/lib/selection'
+import { linkToPortfolios } from '@/lib/mydata'
 
 const {
   humanReadableTimeFromStandardString,
@@ -16,23 +17,25 @@ interface Props {
   portfolios: Portfolio[]
   portfolioGroups: PortfolioGroup[]
   analyses: Analysis[]
-  selectedPortfolioIds: string[]
   selectedPortfolioGroupIds: string[]
-  selectedAnalysisIds: string[]
+  expandedPortfolioGroupIds: string[]
 }
 const props = defineProps<Props>()
 interface Emits {
-  (e: 'update:selectedPortfolioIds', value: string[]): void
   (e: 'update:selectedPortfolioGroupIds', value: string[]): void
-  (e: 'update:selectedAnalysisIds', value: string[]): void
+  (e: 'update:expandedPortfolioGroupIds', value: string[]): void
   (e: 'refresh'): void
 }
 const emit = defineEmits<Emits>()
 
-const selectedPortfolioGroupIDs = computed({
+const selectedPortfolioGroupIdsModel = computed({
   get: () => props.selectedPortfolioGroupIds ?? [],
   set: (value: string[]) => { emit('update:selectedPortfolioGroupIds', value) },
 })
+const expandedPortfolioGroupIdsModel = computed({
+  get: () => props.expandedPortfolioGroupIds ?? [],
+  set: (value: string[]) => { emit('update:expandedPortfolioGroupIds', value) },
+})
 
 interface EditorObject extends ReturnType<typeof portfolioGroupEditor> {
   id: string
@@ -50,13 +53,33 @@ const editorObjects = computed<EditorObject[]>(() => props.portfolioGroups.map(
   }),
 ))
 
-const expandedRows = useState<EditorObject[]>(`${prefix}.expandedRows`, () => [])
 const selectedRows = computed<EditorObject[]>({
   get: () => {
-    return editorObjects.value.filter((editorObject) => selectedPortfolioGroupIDs.value.includes(editorObject.id))
+    const ids = selectedPortfolioGroupIdsModel.value
+    return editorObjects.value.filter((editorObject) => ids.includes(editorObject.id))
+  },
+  set: (value: EditorObject[]) => {
+    const ids = value.map((row) => row.id)
+    ids.sort()
+    selectedPortfolioGroupIdsModel.value = ids
+  },
+})
+const readyToExpand = useState<boolean>(`${prefix}.readyToExpand`, () => false)
+onMounted(() => {
+  readyToExpand.value = true
+})
+const expandedRows = computed<EditorObject[]>({
+  get: () => {
+    if (!readyToExpand.value) {
+      return []
+    }
+    const ids = expandedPortfolioGroupIdsModel.value
+    return editorObjects.value.filter((editorObject) => ids.includes(editorObject.id))
   },
   set: (value: EditorObject[]) => {
-    selectedPortfolioGroupIDs.value = value.map((row) => row.id)
+    const ids = value.map((row) => row.id)
+    ids.sort()
+    expandedPortfolioGroupIdsModel.value = ids
   },
 })
 
@@ -142,7 +165,7 @@ const editorObjectToIds = (editorObject: EditorObject): string[] => {
         <template #body="slotProps">
           <LinkButton
             :disabled="editorObjectToIds(slotProps.data).length === 0"
-            :to="localePath(`/my-data?tab=p&pids=${ editorObjectToIds(slotProps.data).join(',')}`)"
+            :to="linkToPortfolios(localePath, editorObjectToIds(slotProps.data))"
             :label="`${editorObjectToIds(slotProps.data).length}`"
             icon="pi pi-th-large"
             class="py-1 px-2 p-button-outlined p-button-secondary"
diff --git a/frontend/lib/mydata/index.ts b/frontend/lib/mydata/index.ts
new file mode 100644
index 0000000..02975c3
--- /dev/null
+++ b/frontend/lib/mydata/index.ts
@@ -0,0 +1,55 @@
+import { type LocalePathFunction } from 'vue-i18n-routing'
+
+const pageURLBase = '/my-data'
+
+export const QueryParamTab = 'tab'
+export const QueryParamSelectedPortfolioIds = 'sp'
+export const QueryParamExpandedPortfolioIds = 'ep'
+export const QueryParamSelectedPortfolioGroupIds = 'sg'
+export const QueryParamExpandedPortfolioGroupIds = 'eg'
+export const QueryParamSelectedAnalysisIds = 'sa'
+export const QueryParamExpandedAnalysisIds = 'ea'
+
+export enum Tab {
+  Portfolio = 'p',
+  PortfolioGroup = 'g',
+  IncompleteUpload = 'i',
+  Analysis = 'a',
+}
+
+export const linkToPortfolio = (localePath: LocalePathFunction, id: string): string => {
+  return linkToPortfolios(localePath, [id])
+}
+
+export const linkToPortfolios = (localePath: LocalePathFunction, ids: string[]): string => {
+  const q = new URLSearchParams()
+  q.set(QueryParamExpandedPortfolioIds, ids.join(','))
+  q.set(QueryParamTab, Tab.Portfolio)
+  return localePath(pageURLBase + '?' + q.toString())
+}
+
+export const linkToPortfolioGroup = (localePath: LocalePathFunction, id: string): string => {
+  const q = new URLSearchParams()
+  q.set(QueryParamExpandedPortfolioGroupIds, id)
+  q.set(QueryParamTab, Tab.PortfolioGroup)
+  return localePath(pageURLBase + '?' + q.toString())
+}
+
+export const linkToAnalysis = (localePath: LocalePathFunction, id: string): string => {
+  const q = new URLSearchParams()
+  q.set(QueryParamSelectedAnalysisIds, id)
+  q.set(QueryParamTab, Tab.Analysis)
+  return localePath(pageURLBase + '?' + q.toString())
+}
+
+export const linkToIncompleteUpload = (localePath: LocalePathFunction): string => {
+  const q = new URLSearchParams()
+  q.set(QueryParamTab, Tab.IncompleteUpload)
+  return localePath(pageURLBase + '?' + q.toString())
+}
+
+export const linkToPortfolioList = (localePath: LocalePathFunction): string => {
+  const q = new URLSearchParams()
+  q.set(QueryParamTab, Tab.Portfolio)
+  return localePath(pageURLBase + '?' + q.toString())
+}
diff --git a/frontend/pages/audit-logs.vue b/frontend/pages/audit-logs.vue
index 9004ecb..1f8d3c3 100644
--- a/frontend/pages/audit-logs.vue
+++ b/frontend/pages/audit-logs.vue
@@ -3,6 +3,7 @@ import { type AuditLogQuerySort, type AuditLogQueryWhere, type AuditLogQueryReq,
 import { urlReactiveAuditLogQuery } from '@/lib/auditlogquery'
 import { type DataTableSortMeta } from 'primevue/datatable'
 import { FilterMatchMode } from 'primevue/api'
+import { linkToPortfolio, linkToPortfolioGroup, linkToAnalysis, linkToIncompleteUpload } from '@/lib/mydata'
 
 const prefix = 'pages/audit-logs'
 
@@ -416,18 +417,14 @@ const tableSortModel = computed<DataTableSortMeta[]>({
 const getTargetLink = (t: AuditLogTargetType, id: string): string => {
   switch (t) {
     case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_PORTFOLIO:
-      // TODO(grady) make this directly addressable
-      return localePath(`/my-data/${id}`)
+      return linkToPortfolio(localePath, id)
     case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_PORTFOLIO_GROUP:
-      // TODO(grady) make this directly addressable
-      return localePath(`/my-data/${id}`)
+      return linkToPortfolioGroup(localePath, id)
     case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_INCOMPLETE_UPLOAD:
-      // TODO(grady) make this directly addressable
-      return localePath(`/my-data/${id}`)
+      return linkToIncompleteUpload(localePath)
     case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_ANALYSIS:
     case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_ANALYSIS_ARTIFACT:
-      // TODO(grady) make this directly addressable
-      return localePath(`/my-data/${id}`)
+      return linkToAnalysis(localePath, id)
     case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_USER:
       return localePath(`/user/${id}`)
     case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_INITIATIVE:
diff --git a/frontend/pages/incomplete-uploads.vue b/frontend/pages/incomplete-uploads.vue
deleted file mode 100644
index bea71eb..0000000
--- a/frontend/pages/incomplete-uploads.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<script setup lang="ts">
-import { incompleteUploadEditor } from '@/lib/editor'
-
-const { humanReadableTimeFromStandardString } = useTime()
-const pactaClient = usePACTA()
-const { loading: { withLoading } } = useModal()
-const i18n = useI18n()
-
-const prefix = 'pages/my-data'
-const expandedRows = useState(`${prefix}.expandedRows`, () => [])
-
-const [
-  { data },
-] = await Promise.all([
-  useSimpleAsyncData(`${prefix}.incompleteUploads`, () => pactaClient.listIncompleteUploads()),
-])
-
-let editorObjects = data.value.items.map((item) => ({ ...incompleteUploadEditor(item, i18n), id: item.id }))
-
-const deleteIncompleteUpload = (id: string) => withLoading(
-  () => pactaClient.deleteIncompleteUpload(id).then(() => {
-    editorObjects = editorObjects.filter((editorObject) => editorObject.id !== id)
-  }),
-  `${prefix}.deleteIncompleteUpload[${id}]`,
-)
-const saveChanges = (id: string) => {
-  const index = editorObjects.findIndex((editorObject) => editorObject.id === id)
-  const eo = presentOrFileBug(editorObjects[index])
-  return withLoading(
-    () => pactaClient.updateIncompleteUpload(id, eo.changes.value)
-      .then(() => pactaClient.findIncompleteUploadById(id))
-      .then((incompleteUpload) => {
-        editorObjects[index] = { ...incompleteUploadEditor(incompleteUpload, i18n), id }
-      }),
-    `${prefix}.saveChanges`,
-  )
-}
-const deleteAll = () => withLoading(
-  async () => {
-    for (const id of editorObjects.map(eo => eo.id)) {
-      await deleteIncompleteUpload(id)
-    }
-    editorObjects = []
-  },
-  `${prefix}.deleteAll`,
-)
-</script>
-
-<template>
-  <StandardContent>
-    <TitleBar title="Incomplete Uploads" />
-    <p>
-      This page shows uploads that haven't been parsed successfully. This typically happens
-      because they are missing required fields, have invalid values, or are otherwise not
-      recognized by the system.
-    </p>
-    <p>
-      In the row-expansion for each upload, you can see the status, failure reason (if any),
-      and change properties of the file like name and description, which can be helpful for
-      recordkeeping.
-    </p>
-    <p>
-      If you want to fully abandon the upload, just delete it, and the data will be removed from
-      our systems. If you'd instead like an admin to take a look at the failure to help you diagnose
-      the issue, you can enable the "Admin Debugging" option, and file a support ticket.
-    </p>
-    <PVDataTable
-      v-model:expanded-rows="expandedRows"
-      size="small"
-      :value="editorObjects"
-      data-key="id"
-      class="incomplete-upload-table"
-    >
-      <PVColumn
-        field="currentValue.value.createdAt"
-        header="Created At"
-        sortable
-      >
-        <template #body="slotProps">
-          {{ humanReadableTimeFromStandardString(slotProps.data.currentValue.value.createdAt).value }}
-        </template>
-      </PVColumn>
-      <PVColumn
-        field="currentValue.value.name"
-        sortable
-        header="Name"
-      />
-      <PVColumn
-        expander
-        header="Details"
-      />
-      <template
-        #expansion="slotProps"
-      >
-        <div class="surface-100 p-3">
-          <h2 class="mt-0">
-            Metadata
-          </h2>
-          <div class="flex flex-column gap-2 w-fit">
-            <div class="flex gap-2 justify-content-between">
-              <span>Created At</span>
-              <b>{{ humanReadableTimeFromStandardString(slotProps.data.currentValue.value.createdAt).value }}</b>
-            </div>
-            <div class="flex gap-2 justify-content-between">
-              <span>Ran At</span>
-              <b>{{ slotProps.data.currentValue.value.ranAt ? humanReadableTimeFromStandardString(slotProps.data.currentValue.value.ranAt).value : 'N/A' }}</b>
-            </div>
-            <div class="flex gap-2 justify-content-between">
-              <span>Completed At</span>
-              <b>{{ slotProps.data.currentValue.value.completedAt ? humanReadableTimeFromStandardString(slotProps.data.currentValue.value.completedAt).value : 'N/A' }}</b>
-            </div>
-            <div class="flex gap-2 justify-content-between">
-              <span>Failure Code</span>
-              <b>{{ slotProps.data.currentValue.value.failureCode ?? 'N/A' }}</b>
-            </div>
-            <div class="flex gap-2 justify-content-between">
-              <span>Failure Message</span>
-              <b>{{ slotProps.data.currentValue.value.failureMessage ?? 'N/A' }}</b>
-            </div>
-            <div class="flex gap-2 justify-content-between">
-              <span>ID</span>
-              <b>{{ slotProps.data.id }}</b>
-            </div>
-          </div>
-          <h2 class="mt-5">
-            Editable Properties
-          </h2>
-          <IncompleteuploadEditor
-            v-model:editor-values="slotProps.data.editorValues.value"
-            :editor-fields="slotProps.data.editorFields.value"
-          />
-          <div class="flex gap-3 justify-content-between">
-            <PVButton
-              icon="pi pi-trash"
-              class="p-button-danger p-button-outlined"
-              label="Delete"
-              @click="() => deleteIncompleteUpload(slotProps.data.id)"
-            />
-            <div v-tooltip.bottom="slotProps.data.saveTooltip">
-              <PVButton
-                :disabled="!slotProps.data.canSave.value"
-                label="Save Changes"
-                icon="pi pi-save"
-                icon-pos="right"
-                @click="() => saveChanges(slotProps.data.id)"
-              />
-            </div>
-          </div>
-          <StandardDebug
-            :value="slotProps.data.editorFields.value"
-            label="Editor Fields"
-          />
-          <StandardDebug
-            :value="slotProps.data.editorValues.value"
-            label="EditorValues"
-          />
-        </div>
-      </template>
-    </PVDataTable>
-    <PVButton
-      v-if="editorObjects.length > 0"
-      label="Delete All Incomplete Uploads"
-      icon="pi pi-trash"
-      class="p-button-danger p-button-outlined"
-      @click="deleteAll"
-    />
-    <StandardDebug
-      :value="data"
-      label="Editor Objects"
-    />
-  </standardcontent>
-</template>
-
-<style lang="scss">
-.incomplete-upload-table.p-datatable {
-  width: 100%;
-
-  .p-datatable-row-expansion td {
-    padding: 0;
-  }
-}
-</style>
diff --git a/frontend/pages/my-data.vue b/frontend/pages/my-data.vue
index 66f1cf7..cf48c63 100644
--- a/frontend/pages/my-data.vue
+++ b/frontend/pages/my-data.vue
@@ -1,4 +1,16 @@
 <script setup lang="ts">
+import { type WritableComputedRef } from 'vue'
+import {
+  Tab,
+  QueryParamTab,
+  QueryParamSelectedPortfolioIds,
+  QueryParamExpandedPortfolioIds,
+  QueryParamSelectedPortfolioGroupIds,
+  QueryParamExpandedPortfolioGroupIds,
+  QueryParamSelectedAnalysisIds,
+  QueryParamExpandedAnalysisIds,
+} from '@/lib/mydata'
+
 const prefix = 'pages/my-data'
 
 const { fromQueryReactiveWithDefault } = useURLParams()
@@ -8,10 +20,17 @@ const { loading: { withLoading } } = useModal()
 
 const tt = (s: string) => t(`${prefix}.${s}`)
 
-const selectedPortfolioIdsQP = fromQueryReactiveWithDefault('pids', '')
-const selectedPortfolioGroupIdsQP = fromQueryReactiveWithDefault('pgids', '')
-const selectedAnalysisIdsQP = fromQueryReactiveWithDefault('analyses', '')
-const tabQP = fromQueryReactiveWithDefault('tab', 'p')
+const joinedWithCommas = (r: WritableComputedRef<string>): WritableComputedRef<string[]> => computed({
+  get: () => r.value.split(','),
+  set: (v: string[]) => { r.value = v.join(',') },
+})
+const selectedPortfolioIds = joinedWithCommas(fromQueryReactiveWithDefault(QueryParamSelectedPortfolioIds, ''))
+const expandedPortfolioIds = joinedWithCommas(fromQueryReactiveWithDefault(QueryParamExpandedPortfolioIds, ''))
+const selectedPortfolioGroupIds = joinedWithCommas(fromQueryReactiveWithDefault(QueryParamSelectedPortfolioGroupIds, ''))
+const expandedPortfolioGroupIds = joinedWithCommas(fromQueryReactiveWithDefault(QueryParamExpandedPortfolioGroupIds, ''))
+const selectedAnalysisIds = joinedWithCommas(fromQueryReactiveWithDefault(QueryParamSelectedAnalysisIds, ''))
+const expandedAnalysisIds = joinedWithCommas(fromQueryReactiveWithDefault(QueryParamExpandedAnalysisIds, ''))
+const tabQP = fromQueryReactiveWithDefault(QueryParamTab, 'p')
 
 const [
   { data: incompleteUploadsData, refresh: refreshIncompleteUploadsApi },
@@ -49,52 +68,31 @@ const refreshAll = () => Promise.all([
   refreshInitiatives(),
 ])
 
-const selectedPortfolioIds = computed<string[]>({
-  get: () => selectedPortfolioIdsQP.value.split(','),
-  set: (v: string[]) => { selectedPortfolioIdsQP.value = v.join(',') },
-})
-const selectedPortfolioGroupIds = computed<string[]>({
-  get: () => selectedPortfolioGroupIdsQP.value.split(','),
-  set: (v: string[]) => { selectedPortfolioGroupIdsQP.value = v.join(',') },
-})
-const selectedAnalysisIds = computed<string[]>({
-  get: () => selectedAnalysisIdsQP.value.split(','),
-  set: (v: string[]) => { selectedAnalysisIdsQP.value = v.join(',') },
-})
-interface TabToIndexMap {
-  iu: number
-  p: number
-  pg: number
-  a: number
-}
+type TabToIndexMap = Record<Tab, number>
 const tabToIndexMap = computed(() => {
   const result: TabToIndexMap = {
-    iu: -1,
-    p: -1,
-    pg: -1,
-    a: -1,
+    [Tab.Portfolio]: -1,
+    [Tab.PortfolioGroup]: -1,
+    [Tab.IncompleteUpload]: -1,
+    [Tab.Analysis]: -1,
   }
   let idx = 0
   if (incompleteUploadsData.value.items.length > 0) {
-    result.iu = idx
+    result[Tab.IncompleteUpload] = idx
     idx++
-  } else {
-    result.iu = -1
   }
-  result.p = idx++
-  result.pg = idx++
+  result[Tab.Portfolio] = idx++
+  result[Tab.PortfolioGroup] = idx++
   if (analysesData.value.items.length > 0) {
-    result.a = idx
+    result[Tab.Analysis] = idx
     idx++
-  } else {
-    result.a = -1
   }
   return result
 })
 const activeIndex = computed<number>({
   get: () => {
-    const tab = tabQP.value as keyof TabToIndexMap
-    const result = tabToIndexMap.value[tab]
+    const tab = tabQP.value
+    const result = tabToIndexMap.value[tab as Tab]
     if (result === undefined) {
       console.error(`Unknown tab ${tab}`)
       return 0
@@ -149,9 +147,8 @@ const activeIndex = computed<number>({
         </template>
         <PortfolioListView
           v-if="portfolioData && portfolioGroupData && initiativeData"
-          v-model:selected-portfolio-group-ids="selectedPortfolioGroupIds"
           v-model:selected-portfolio-ids="selectedPortfolioIds"
-          v-model:selected-analysis-ids="selectedAnalysisIds"
+          v-model:expanded-portfolio-ids="expandedPortfolioIds"
           :portfolios="portfolioData.items"
           :portfolio-groups="portfolioGroupData.items"
           :analyses="analysesData.items"
@@ -169,8 +166,7 @@ const activeIndex = computed<number>({
         <PortfolioGroupListView
           v-if="portfolioData && portfolioGroupData && initiativeData && analysesData"
           v-model:selected-portfolio-group-ids="selectedPortfolioGroupIds"
-          v-model:selected-portfolio-ids="selectedPortfolioIds"
-          v-model:selected-analysis-ids="selectedAnalysisIds"
+          v-model:expanded-portfolio-group-ids="expandedPortfolioGroupIds"
           :portfolios="portfolioData.items"
           :portfolio-groups="portfolioGroupData.items"
           :analyses="analysesData.items"
@@ -188,9 +184,8 @@ const activeIndex = computed<number>({
         </template>
         <AnalysisListView
           v-if="portfolioData && portfolioGroupData && initiativeData && analysesData"
-          v-model:selected-portfolio-group-ids="selectedPortfolioGroupIds"
-          v-model:selected-portfolio-ids="selectedPortfolioIds"
           v-model:selected-analysis-ids="selectedAnalysisIds"
+          v-model:expanded-analysis-ids="expandedAnalysisIds"
           :portfolios="portfolioData.items"
           :portfolio-groups="portfolioGroupData.items"
           :analyses="analysesData.items"
diff --git a/frontend/pages/upload.vue b/frontend/pages/upload.vue
index 07b3d49..9d824b5 100644
--- a/frontend/pages/upload.vue
+++ b/frontend/pages/upload.vue
@@ -3,6 +3,7 @@ import { type FileUploadUploaderEvent } from 'primevue/fileupload'
 import { serializeError } from 'serialize-error'
 import { formatFileSize } from '@/lib/filesize'
 import { OptionalBoolean, type HoldingsDate } from '@/openapi/generated/pacta'
+import { linkToPortfolioList } from '@/lib/mydata'
 
 const pactaClient = usePACTA()
 const { $axios } = useNuxtApp()
@@ -449,7 +450,7 @@ const cleanUpIncompleteUploads = async () => {
           label="See Uploaded Portfolios"
           icon="pi pi-arrow-right"
           icon-pos="right"
-          :to="localePath('/my-data')"
+          :to="linkToPortfolioList(localePath)"
         />
       </div>
     </template>