From f9e475ed4b0040afdff632fe7cb4d585e6132ea7 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 29 May 2024 12:24:18 -0500
Subject: [PATCH] align multiview `HistoryPanel` details header based on
 content

Adds a `pinnedHistoriesSummarizedStatus` computed ref to `historyStore` that Returns a string that indicates whether all the pinned histories have annotations, tags, both, or none of them. This is used to then adjust the `DetailsLayout` header height accordingly.
---
 .../History/CurrentHistory/HistoryDetails.vue |  4 +-
 .../History/CurrentHistory/HistoryPanel.vue   |  8 +++-
 .../History/Layout/DetailsLayout.vue          | 35 +++++++++++++-----
 client/src/stores/historyStore.ts             | 37 +++++++++++++++++++
 4 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryDetails.vue b/client/src/components/History/CurrentHistory/HistoryDetails.vue
index 52619647dd25..705fe6d960e5 100644
--- a/client/src/components/History/CurrentHistory/HistoryDetails.vue
+++ b/client/src/components/History/CurrentHistory/HistoryDetails.vue
@@ -11,12 +11,12 @@ import UtcDate from "@/components/UtcDate.vue";
 interface Props {
     history: HistorySummary;
     writeable: boolean;
-    summarized: boolean;
+    summarized?: "both" | "annotation" | "tags" | "none";
 }
 
 const props = withDefaults(defineProps<Props>(), {
     writeable: true,
-    summarized: false,
+    summarized: undefined,
 });
 
 const historyStore = useHistoryStore();
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index a8f5c02472d7..a28801ea2539 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -85,7 +85,7 @@ const contentItemRefs = computed(() => {
 const currItemFocused = useActiveElement();
 const lastItemId = ref<string | null>(null);
 
-const { currentFilterText, currentHistoryId } = storeToRefs(useHistoryStore());
+const { currentFilterText, currentHistoryId, pinnedHistoriesSummarizedStatus } = storeToRefs(useHistoryStore());
 const { lastCheckedTime, totalMatchesCount, isWatching } = storeToRefs(useHistoryItemsStore());
 
 const historyStore = useHistoryStore();
@@ -136,6 +136,10 @@ const formattedSearchError = computed(() => {
     };
 });
 
+const detailsSummarized = computed(() => {
+    return props.isMultiViewItem ? pinnedHistoriesSummarizedStatus.value : undefined;
+});
+
 const storeFilterText = computed(() => {
     if (props.history.id !== currentHistoryId.value) {
         return "";
@@ -532,7 +536,7 @@ function setItemDragstart(
                     <HistoryDetails
                         :history="history"
                         :writeable="canEditHistory"
-                        :summarized="isMultiViewItem"
+                        :summarized="detailsSummarized"
                         @update:history="historyStore.updateHistory($event)" />
 
                     <HistoryMessages :history="history" />
diff --git a/client/src/components/History/Layout/DetailsLayout.vue b/client/src/components/History/Layout/DetailsLayout.vue
index ef49938ca9f3..676002424bad 100644
--- a/client/src/components/History/Layout/DetailsLayout.vue
+++ b/client/src/components/History/Layout/DetailsLayout.vue
@@ -20,7 +20,7 @@ interface Props {
     writeable?: boolean;
     annotation?: string;
     showAnnotation?: boolean;
-    summarized?: boolean;
+    summarized?: "both" | "annotation" | "tags" | "none";
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
     writeable: true,
     annotation: undefined,
     showAnnotation: true,
-    summarized: false,
+    summarized: undefined,
 });
 
 const emit = defineEmits(["save"]);
@@ -47,6 +47,20 @@ const localProps = ref<{ name: string; annotation: string | null; tags: string[]
     tags: [],
 });
 
+const detailsClass = computed(() => {
+    const classes: Record<string, boolean> = {
+        details: true,
+        "summarized-details": props.summarized && !editing.value,
+        "m-3": !props.summarized || editing.value,
+    };
+
+    if (props.summarized) {
+        classes[props.summarized] = true;
+    }
+
+    return classes;
+});
+
 const editButtonTitle = computed(() => {
     if (isAnonymous.value) {
         return l("Log in to Rename History");
@@ -90,10 +104,7 @@ function selectText() {
 </script>
 
 <template>
-    <section
-        class="details"
-        :class="summarized && !editing ? 'summarized-details' : 'm-3'"
-        data-description="edit details">
+    <section :class="detailsClass" data-description="edit details">
         <BButton
             :disabled="isAnonymous || !writeable"
             class="edit-button ml-1 float-right"
@@ -114,7 +125,7 @@ function selectText() {
                 v-short="annotation"
                 class="mt-2"
                 data-description="annotation value" />
-            <div v-else-if="summarized" style="min-height: 2rem">
+            <div v-else-if="summarized" :class="{ annotation: ['both', 'annotation'].includes(summarized) }">
                 <TextSummary
                     v-if="annotation"
                     :description="annotation"
@@ -124,8 +135,7 @@ function selectText() {
             </div>
             <StatelessTags
                 v-if="tags"
-                class="tags"
-                :class="!summarized && 'mt-2'"
+                :class="{ 'mt-2': !summarized, tags: ['both', 'tags'].includes(summarized) }"
                 :value="tags"
                 disabled
                 :max-visible-tags="summarized ? 1 : 5" />
@@ -184,12 +194,17 @@ function selectText() {
 
 <style lang="scss" scoped>
 .summarized-details {
-    min-height: 8.5em;
     margin: 1rem 1rem 0 1rem;
     max-width: 15rem;
 
+    &.both {
+        min-height: 8.5em;
+    }
     .tags {
         min-height: 2rem;
     }
+    .annotation {
+        min-height: 2rem;
+    }
 }
 </style>
diff --git a/client/src/stores/historyStore.ts b/client/src/stores/historyStore.ts
index e74d6a12497d..66c737479ef7 100644
--- a/client/src/stores/historyStore.ts
+++ b/client/src/stores/historyStore.ts
@@ -94,6 +94,38 @@ export const useHistoryStore = defineStore("historyStore", () => {
         };
     });
 
+    const pinnedHistoriesSummarizedStatus = computed(() => {
+        let annotation = false;
+        let tags = false;
+        let loaded = true;
+
+        for (const h of pinnedHistories.value) {
+            const history = storedHistories.value[h.id];
+            if (!history) {
+                loaded = false;
+                break;
+            }
+
+            if (history.annotation) {
+                annotation = true;
+            }
+
+            if (history.tags.length > 0) {
+                tags = true;
+            }
+        }
+
+        if (!loaded || (annotation && tags)) {
+            return "both";
+        } else if (annotation) {
+            return "annotation";
+        } else if (tags) {
+            return "tags";
+        } else {
+            return "none";
+        }
+    });
+
     async function setCurrentHistory(historyId: string) {
         const currentHistory = (await setCurrentHistoryOnServer(historyId)) as HistoryDevDetailed;
         selectHistory(currentHistory);
@@ -331,6 +363,11 @@ export const useHistoryStore = defineStore("historyStore", () => {
         currentHistoryId,
         currentFilterText,
         pinnedHistories,
+        /** Returns a string that indicates whether all the pinned histories have annotations,
+         * tags, both, or none of them.
+         * This is used to format the `DetailsLayout` header uniformly for multi-view histories.
+         */
+        pinnedHistoriesSummarizedStatus,
         getHistoryById,
         getHistoryNameById,
         setCurrentHistory,