From 05ceebac32df7edba5722f953daf6ca60dc19b43 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 8 Nov 2023 14:40:18 -0600
Subject: [PATCH 1/6] Add history items display state for empty
 collections/lists

---
 client/src/components/History/Content/ContentItem.vue |  8 +++++++-
 .../components/History/Content/model/StatesInfo.vue   |  5 ++++-
 .../components/History/Content/model/stateTypes.d.ts  |  1 +
 client/src/components/History/Content/model/states.ts | 11 ++++++++++-
 .../History/CurrentCollection/CollectionPanel.vue     |  4 ++++
 client/src/components/History/HistoryFilters.js       |  2 +-
 6 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 7edbed222fc2..149a5332902c 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -43,7 +43,11 @@
                         <FontAwesomeIcon class="text-info" icon="arrow-circle-down" />
                     </b-button>
                     <span v-if="hasStateIcon" class="state-icon">
-                        <icon fixed-width :icon="contentState.icon" :spin="contentState.spin" />
+                        <icon
+                            fixed-width
+                            :icon="contentState.icon"
+                            :spin="contentState.spin"
+                            :title="contentState.text" />
                     </span>
                     <span class="id hid">{{ id }}:</span>
                     <span class="content-title name font-weight-bold">{{ name }}</span>
@@ -169,6 +173,8 @@ export default {
         state() {
             if (this.isPlaceholder) {
                 return "placeholder";
+            } else if (this.item.element_count !== undefined && this.item.element_count === 0) {
+                return "emptyCollection";
             }
             if (this.item.job_state_summary) {
                 for (const state of HIERARCHICAL_COLLECTION_JOB_STATES) {
diff --git a/client/src/components/History/Content/model/StatesInfo.vue b/client/src/components/History/Content/model/StatesInfo.vue
index 43d3a718af35..c2b150f6f25e 100644
--- a/client/src/components/History/Content/model/StatesInfo.vue
+++ b/client/src/components/History/Content/model/StatesInfo.vue
@@ -34,9 +34,12 @@ function onFilter(value: string) {
         <dl v-for="(state, key, index) in states" :key="index">
             <div :class="['alert', 'content-item', 'alert-' + state.status]" :data-state="key">
                 <dt>
-                    <a class="text-decoration-none" href="javascript:void(0)" @click="onFilter(key)"
+                    <a v-if="!state.nonDb" class="text-decoration-none" href="javascript:void(0)" @click="onFilter(key)"
                         ><code>{{ key }}</code></a
                     >
+                    <span v-else
+                        ><code>{{ key }}</code></span
+                    >
                     <icon v-if="state.icon" :icon="state.icon" />
                 </dt>
                 <dd>{{ helpText[key] || state.text }}</dd>
diff --git a/client/src/components/History/Content/model/stateTypes.d.ts b/client/src/components/History/Content/model/stateTypes.d.ts
index 3ef3a45c4456..368690474bd9 100644
--- a/client/src/components/History/Content/model/stateTypes.d.ts
+++ b/client/src/components/History/Content/model/stateTypes.d.ts
@@ -5,6 +5,7 @@ export type State = {
     text?: string;
     icon?: string;
     spin?: boolean;
+    nonDb?: boolean;
 };
 
 export type States = {
diff --git a/client/src/components/History/Content/model/states.ts b/client/src/components/History/Content/model/states.ts
index 2994100c6c0b..9855de688587 100644
--- a/client/src/components/History/Content/model/states.ts
+++ b/client/src/components/History/Content/model/states.ts
@@ -2,13 +2,14 @@ import type { components } from "@/api/schema";
 
 type DatasetState = components["schemas"]["DatasetState"];
 // The 'failed' state is for the collection job state summary, not a dataset state.
-type State = DatasetState | "failed" | "placeholder";
+type State = DatasetState | "failed" | "placeholder" | "emptyCollection";
 
 interface StateRepresentation {
     status: "success" | "warning" | "info" | "danger" | "secondary";
     text?: string;
     icon?: string;
     spin?: boolean;
+    nonDb?: boolean;
 }
 
 type StateMap = {
@@ -103,6 +104,14 @@ export const STATES: StateMap = {
         text: "This dataset is being fetched.",
         icon: "spinner",
         spin: true,
+        nonDb: true,
+    },
+    /** the collection is empty. This state is only visual and transitional, it does not exist in the database. */
+    emptyCollection: {
+        status: "secondary",
+        text: "This is an empty list/collection.",
+        icon: "exclamation-triangle",
+        nonDb: true,
     },
 } as const satisfies StateMap;
 
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index 7269918545a7..f7502afa0b41 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -115,7 +115,11 @@ watch(
             </section>
             <section class="position-relative flex-grow-1 scroller">
                 <div>
+                    <b-alert v-if="collectionElements.length === 0" class="m-2" variant="info" show>
+                        This is an empty list/collection.
+                    </b-alert>
                     <ListingLayout
+                        v-else
                         data-key="element_index"
                         :items="collectionElements"
                         :loading="loading"
diff --git a/client/src/components/History/HistoryFilters.js b/client/src/components/History/HistoryFilters.js
index 2cca93b7337d..28cc0ad553b4 100644
--- a/client/src/components/History/HistoryFilters.js
+++ b/client/src/components/History/HistoryFilters.js
@@ -2,7 +2,7 @@ import { STATES } from "components/History/Content/model/states";
 import StatesInfo from "components/History/Content/model/StatesInfo";
 import Filtering, { compare, contains, equals, expandNameTag, toBool, toDate } from "utils/filtering";
 
-const excludeStates = ["empty", "failed", "upload"];
+const excludeStates = ["empty", "failed", "upload", "placeholder", "emptyCollection"];
 const states = Object.keys(STATES).filter((state) => !excludeStates.includes(state));
 
 const validFilters = {

From 6c1f409ac08864c45199bc1a85051465cc7cb645 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 9 Nov 2023 13:25:20 -0600
Subject: [PATCH 2/6] change `emptyCollection` item state to
 `failed_populated_state`

Instead of creating a new, non-ok visual state for empty collections,
create it for collections that have `populated_state: failed`.
Also, show the `populated_state_message` in the `CollectionPanel`
---
 .../Content/Collection/CollectionDescription.vue      |  2 +-
 client/src/components/History/Content/ContentItem.vue |  7 +++++--
 .../components/History/Content/model/StatesInfo.vue   |  7 ++++++-
 client/src/components/History/Content/model/states.ts | 10 +++++-----
 .../History/CurrentCollection/CollectionPanel.vue     | 11 +++++++++--
 client/src/components/History/HistoryFilters.js       |  2 +-
 .../src/components/History/HistoryPublishedList.vue   |  2 +-
 7 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/client/src/components/History/Content/Collection/CollectionDescription.vue b/client/src/components/History/Content/Collection/CollectionDescription.vue
index 8c27d3e0640a..b8b68d3d68c8 100644
--- a/client/src/components/History/Content/Collection/CollectionDescription.vue
+++ b/client/src/components/History/Content/Collection/CollectionDescription.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <span class="description mt-1 mb-1">
-            a {{ collectionLabel }} with {{ elementCount }}<b>{{ homogeneousDatatype }}</b> {{ pluralizedItem }}
+            a {{ collectionLabel }} with {{ elementCount || 0 }}<b>{{ homogeneousDatatype }}</b> {{ pluralizedItem }}
         </span>
         <CollectionProgress v-if="jobStateSummary.size != 0" :summary="jobStateSummary" />
     </div>
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 149a5332902c..dadf1a0f9659 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -173,8 +173,11 @@ export default {
         state() {
             if (this.isPlaceholder) {
                 return "placeholder";
-            } else if (this.item.element_count !== undefined && this.item.element_count === 0) {
-                return "emptyCollection";
+            } else if (
+                this.item.history_content_type === "dataset_collection" &&
+                this.item.populated_state === "failed"
+            ) {
+                return "failed_populated_state";
             }
             if (this.item.job_state_summary) {
                 for (const state of HIERARCHICAL_COLLECTION_JOB_STATES) {
diff --git a/client/src/components/History/Content/model/StatesInfo.vue b/client/src/components/History/Content/model/StatesInfo.vue
index c2b150f6f25e..f559e4d772c7 100644
--- a/client/src/components/History/Content/model/StatesInfo.vue
+++ b/client/src/components/History/Content/model/StatesInfo.vue
@@ -30,7 +30,12 @@ function onFilter(value: string) {
 <template>
     <div>
         <p>Here are all available item states in Galaxy:</p>
-        <p><i>(Note that the colors for each state correspond to content item state colors in the history)</i></p>
+        <p>
+            <i>
+                (Note that the colors for each state correspond to content item state colors in the history, and if it
+                exists, hovering over the icon on a history item will display the state message.)
+            </i>
+        </p>
         <dl v-for="(state, key, index) in states" :key="index">
             <div :class="['alert', 'content-item', 'alert-' + state.status]" :data-state="key">
                 <dt>
diff --git a/client/src/components/History/Content/model/states.ts b/client/src/components/History/Content/model/states.ts
index 9855de688587..0cb0d5e5baf9 100644
--- a/client/src/components/History/Content/model/states.ts
+++ b/client/src/components/History/Content/model/states.ts
@@ -2,7 +2,7 @@ import type { components } from "@/api/schema";
 
 type DatasetState = components["schemas"]["DatasetState"];
 // The 'failed' state is for the collection job state summary, not a dataset state.
-type State = DatasetState | "failed" | "placeholder" | "emptyCollection";
+type State = DatasetState | "failed" | "placeholder" | "failed_populated_state";
 
 interface StateRepresentation {
     status: "success" | "warning" | "info" | "danger" | "secondary";
@@ -106,10 +106,10 @@ export const STATES: StateMap = {
         spin: true,
         nonDb: true,
     },
-    /** the collection is empty. This state is only visual and transitional, it does not exist in the database. */
-    emptyCollection: {
-        status: "secondary",
-        text: "This is an empty list/collection.",
+    /** the `populated_state: failed`. This state is only visual and transitional, it does not exist in the database. */
+    failed_populated_state: {
+        status: "danger",
+        text: "Failed to populate the list/collection.",
         icon: "exclamation-triangle",
         nonDb: true,
     },
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index f7502afa0b41..8a7c9ac63a10 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -46,6 +46,9 @@ const dsc = computed(() => {
 const collectionElements = computed(() => collectionElementsStore.getCollectionElements(dsc.value, offset.value));
 const loading = computed(() => collectionElementsStore.isLoadingCollectionElements(dsc.value));
 const jobState = computed(() => ("job_state_summary" in dsc.value ? dsc.value.job_state_summary : undefined));
+const populatedStateMsg = computed(() =>
+    "populated_state_message" in dsc.value ? dsc.value.populated_state_message : undefined
+);
 const rootCollection = computed(() => {
     if (isHDCA(props.selectedCollections[0])) {
         return props.selectedCollections[0];
@@ -115,8 +118,12 @@ watch(
             </section>
             <section class="position-relative flex-grow-1 scroller">
                 <div>
-                    <b-alert v-if="collectionElements.length === 0" class="m-2" variant="info" show>
-                        This is an empty list/collection.
+                    <b-alert
+                        v-if="collectionElements.length === 0"
+                        class="m-2"
+                        :variant="populatedStateMsg ? 'danger' : 'info'"
+                        show>
+                        {{ populatedStateMsg || "This is an empty list/collection." }}
                     </b-alert>
                     <ListingLayout
                         v-else
diff --git a/client/src/components/History/HistoryFilters.js b/client/src/components/History/HistoryFilters.js
index 28cc0ad553b4..f48913603175 100644
--- a/client/src/components/History/HistoryFilters.js
+++ b/client/src/components/History/HistoryFilters.js
@@ -2,7 +2,7 @@ import { STATES } from "components/History/Content/model/states";
 import StatesInfo from "components/History/Content/model/StatesInfo";
 import Filtering, { compare, contains, equals, expandNameTag, toBool, toDate } from "utils/filtering";
 
-const excludeStates = ["empty", "failed", "upload", "placeholder", "emptyCollection"];
+const excludeStates = ["empty", "failed", "upload", "placeholder", "failed_populated_state"];
 const states = Object.keys(STATES).filter((state) => !excludeStates.includes(state));
 
 const validFilters = {
diff --git a/client/src/components/History/HistoryPublishedList.vue b/client/src/components/History/HistoryPublishedList.vue
index 5c819f125849..723cbc4e2e83 100644
--- a/client/src/components/History/HistoryPublishedList.vue
+++ b/client/src/components/History/HistoryPublishedList.vue
@@ -179,7 +179,7 @@ async function load() {
 
 onMounted(async () => {
     if (props.fUsername) {
-        filterText.value = filters.getFilterText({ "user_eq:": props.fUsername });
+        filterText.value = filters.getFilterText({ user_eq: props.fUsername });
     }
     await load();
     useInfiniteScroll(scrollableDiv.value, () => load());

From c9c8c093173e6d2f487b31c70b0867be57124a7c Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 9 Nov 2023 13:35:57 -0600
Subject: [PATCH 3/6] show `populated_state_message` on hover on icon

---
 client/src/components/History/Content/ContentItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index dadf1a0f9659..8c9c5d6666b9 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -47,7 +47,7 @@
                             fixed-width
                             :icon="contentState.icon"
                             :spin="contentState.spin"
-                            :title="contentState.text" />
+                            :title="item.populated_state_message || contentState.text" />
                     </span>
                     <span class="id hid">{{ id }}:</span>
                     <span class="content-title name font-weight-bold">{{ name }}</span>

From 55d3b22bbd8f3ddd832c92131d4f2c6eff563bfe Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 10 Nov 2023 11:01:17 -0600
Subject: [PATCH 4/6] also add a `new_populated_state` for `populated_state:
 new`

---
 .../src/components/History/Content/ContentItem.vue | 14 +++++++++-----
 .../History/Content/model/StatesInfo.vue           |  6 +++++-
 .../src/components/History/Content/model/states.ts |  9 ++++++++-
 client/src/components/History/HistoryFilters.js    |  2 +-
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 8c9c5d6666b9..b3891850a30f 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -3,7 +3,7 @@
         :id="contentId"
         :class="['content-item m-1 p-0 rounded btn-transparent-background', contentCls]"
         :data-hid="id"
-        :data-state="state"
+        :data-state="dataState"
         tabindex="0"
         role="button"
         @keydown="onKeyDown">
@@ -173,12 +173,13 @@ export default {
         state() {
             if (this.isPlaceholder) {
                 return "placeholder";
-            } else if (
-                this.item.history_content_type === "dataset_collection" &&
-                this.item.populated_state === "failed"
-            ) {
+            }
+            if (this.item.populated_state === "failed") {
                 return "failed_populated_state";
             }
+            if (this.item.populated_state === "new") {
+                return "new_populated_state";
+            }
             if (this.item.job_state_summary) {
                 for (const state of HIERARCHICAL_COLLECTION_JOB_STATES) {
                     if (this.item.job_state_summary[state] > 0) {
@@ -190,6 +191,9 @@ export default {
             }
             return "ok";
         },
+        dataState() {
+            return this.state === "new_populated_state" ? "new" : this.state;
+        },
         tags() {
             return this.item.tags;
         },
diff --git a/client/src/components/History/Content/model/StatesInfo.vue b/client/src/components/History/Content/model/StatesInfo.vue
index f559e4d772c7..2cd7ab525f1a 100644
--- a/client/src/components/History/Content/model/StatesInfo.vue
+++ b/client/src/components/History/Content/model/StatesInfo.vue
@@ -22,6 +22,10 @@ if (props.excludeStates) {
     }
 }
 
+function dataState(state: string) {
+    return state === "new_populated_state" ? "new" : state;
+}
+
 function onFilter(value: string) {
     emit("set-filter", `state`, value);
 }
@@ -37,7 +41,7 @@ function onFilter(value: string) {
             </i>
         </p>
         <dl v-for="(state, key, index) in states" :key="index">
-            <div :class="['alert', 'content-item', 'alert-' + state.status]" :data-state="key">
+            <div :class="['alert', 'content-item', 'alert-' + state.status]" :data-state="dataState(key)">
                 <dt>
                     <a v-if="!state.nonDb" class="text-decoration-none" href="javascript:void(0)" @click="onFilter(key)"
                         ><code>{{ key }}</code></a
diff --git a/client/src/components/History/Content/model/states.ts b/client/src/components/History/Content/model/states.ts
index 0cb0d5e5baf9..50add74d99ed 100644
--- a/client/src/components/History/Content/model/states.ts
+++ b/client/src/components/History/Content/model/states.ts
@@ -2,7 +2,7 @@ import type { components } from "@/api/schema";
 
 type DatasetState = components["schemas"]["DatasetState"];
 // The 'failed' state is for the collection job state summary, not a dataset state.
-type State = DatasetState | "failed" | "placeholder" | "failed_populated_state";
+type State = DatasetState | "failed" | "placeholder" | "failed_populated_state" | "new_populated_state";
 
 interface StateRepresentation {
     status: "success" | "warning" | "info" | "danger" | "secondary";
@@ -113,6 +113,13 @@ export const STATES: StateMap = {
         icon: "exclamation-triangle",
         nonDb: true,
     },
+    /** the `populated_state: new`. This state is only visual and transitional, it does not exist in the database. */
+    new_populated_state: {
+        status: "warning",
+        text: "This is a new collection and not all of its data are available yet.",
+        icon: "clock",
+        nonDb: true,
+    },
 } as const satisfies StateMap;
 
 /** We want to display a single state for a dataset collection whose elements may have mixed states.
diff --git a/client/src/components/History/HistoryFilters.js b/client/src/components/History/HistoryFilters.js
index f48913603175..051ca0a5450d 100644
--- a/client/src/components/History/HistoryFilters.js
+++ b/client/src/components/History/HistoryFilters.js
@@ -2,7 +2,7 @@ import { STATES } from "components/History/Content/model/states";
 import StatesInfo from "components/History/Content/model/StatesInfo";
 import Filtering, { compare, contains, equals, expandNameTag, toBool, toDate } from "utils/filtering";
 
-const excludeStates = ["empty", "failed", "upload", "placeholder", "failed_populated_state"];
+const excludeStates = ["empty", "failed", "upload", "placeholder", "failed_populated_state", "new_populated_state"];
 const states = Object.keys(STATES).filter((state) => !excludeStates.includes(state));
 
 const validFilters = {

From 940219408ebd761871e7f51a05b472a9418673aa Mon Sep 17 00:00:00 2001
From: Ahmed Hamid Awan <qe66653@umbc.edu>
Date: Tue, 28 Nov 2023 22:10:21 +0500
Subject: [PATCH 5/6] Update
 client/src/components/History/Content/model/states.ts

Co-authored-by: Marius van den Beek <m.vandenbeek@gmail.com>
---
 client/src/components/History/Content/model/states.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/History/Content/model/states.ts b/client/src/components/History/Content/model/states.ts
index 50add74d99ed..26594d2fa8e3 100644
--- a/client/src/components/History/Content/model/states.ts
+++ b/client/src/components/History/Content/model/states.ts
@@ -109,7 +109,7 @@ export const STATES: StateMap = {
     /** the `populated_state: failed`. This state is only visual and transitional, it does not exist in the database. */
     failed_populated_state: {
         status: "danger",
-        text: "Failed to populate the list/collection.",
+        text: "Failed to populate the collection.",
         icon: "exclamation-triangle",
         nonDb: true,
     },

From e02040b9efedd97129adf6c3c214c833086e6e0b Mon Sep 17 00:00:00 2001
From: Ahmed Hamid Awan <qe66653@umbc.edu>
Date: Tue, 28 Nov 2023 22:13:19 +0500
Subject: [PATCH 6/6] Update
 client/src/components/History/CurrentCollection/CollectionPanel.vue

Co-authored-by: Marius van den Beek <m.vandenbeek@gmail.com>
---
 .../components/History/CurrentCollection/CollectionPanel.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index 8a7c9ac63a10..2f58d1356e2a 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -123,7 +123,7 @@ watch(
                         class="m-2"
                         :variant="populatedStateMsg ? 'danger' : 'info'"
                         show>
-                        {{ populatedStateMsg || "This is an empty list/collection." }}
+                        {{ populatedStateMsg || "This is an empty collection." }}
                     </b-alert>
                     <ListingLayout
                         v-else