From 050166467611584b8b51e6ef41bd5709fb3b504d Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 6 Mar 2024 20:24:41 -0600
Subject: [PATCH] focus on collection after returning from collection panel

Also, add a couple types in `HistoryPanel`
---
 .../History/CurrentHistory/HistoryPanel.vue   | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 08d95b4d6afb..8be2868a9c51 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, onMounted, ref, set as VueSet, unref, watch } from "vue";
+import { computed, onMounted, type Ref, ref, set as VueSet, unref, watch } from "vue";
 
 import type { HistorySummary } from "@/api";
 import { copyDataset } from "@/api/datasets";
@@ -55,6 +55,8 @@ interface Props {
     isMultiViewItem?: boolean;
 }
 
+type ContentItemRef = Record<string, Ref<InstanceType<typeof ContentItem> | null>>;
+
 const props = withDefaults(defineProps<Props>(), {
     listOffset: 0,
     filter: "",
@@ -77,9 +79,8 @@ const operationError = ref(null);
 const querySelectionBreak = ref(false);
 const dragTarget = ref<EventTarget | null>(null);
 const contentItemRefs = computed(() => {
-    return historyItems.value.reduce((acc: any, item) => {
-        // TODO: type `any` properly
-        acc[`item-${item.hid}`] = ref(null);
+    return historyItems.value.reduce((acc: ContentItemRef, item) => {
+        acc[`item-${item.id}`] = ref(null);
         return acc;
     }, {});
 });
@@ -410,6 +411,12 @@ onMounted(async () => {
         filterText.value = storeFilterText.value;
     }
     await loadHistoryItems();
+    // if there is a listOffset, we are coming from a collection view, so focus on item at that offset
+    if (props.listOffset) {
+        const itemId = historyItems.value[props.listOffset]?.id;
+        const itemElement = contentItemRefs.value[`item-${itemId}`]?.value?.$el as HTMLElement;
+        itemElement?.focus();
+    }
 });
 
 function arrowNavigate(item: HistoryItem, eventKey: string) {
@@ -420,7 +427,8 @@ function arrowNavigate(item: HistoryItem, eventKey: string) {
         nextItem = historyItems.value[historyItems.value.indexOf(item) - 1];
     }
     if (nextItem) {
-        contentItemRefs.value[`item-${nextItem.hid}`].value.$el.focus();
+        const itemElement = contentItemRefs.value[`item-${nextItem.id}`]?.value?.$el as HTMLElement;
+        itemElement?.focus();
     }
     return nextItem;
 }
@@ -578,7 +586,7 @@ function setItemDragstart(
                             <template v-slot:item="{ item, currentOffset }">
                                 <ContentItem
                                     :id="item.hid"
-                                    :ref="contentItemRefs[`item-${item.hid}`]"
+                                    :ref="contentItemRefs[`item-${item.id}`]"
                                     is-history-item
                                     :item="item"
                                     :name="item.name"