From a9ca0691ac7f5b8c893b9b2cec054611fb43ebb7 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 13 Aug 2024 19:00:40 -0500
Subject: [PATCH 1/9] [24.1] Allow drag and drop for collection elements

We extract the `HDAObject` from the `DCESummary` to be able to drag and drop it.
For now, this works on dragging and dropping items to histories, since that process only needs the dataset's id. However, this doesn't work on tool forms; as we would need to get the full `HDASummary` to do that.
---
 client/src/api/datasets.ts                    |  2 +-
 client/src/api/index.ts                       | 17 ++++++
 .../CurrentCollection/CollectionPanel.vue     |  2 +
 .../History/CurrentHistory/HistoryPanel.vue   | 59 ++++++++++---------
 client/src/utils/setDrag.ts                   | 18 ++++++
 5 files changed, 70 insertions(+), 28 deletions(-)

diff --git a/client/src/api/datasets.ts b/client/src/api/datasets.ts
index c6096ea18f65..2a568f77130c 100644
--- a/client/src/api/datasets.ts
+++ b/client/src/api/datasets.ts
@@ -67,7 +67,7 @@ export async function purgeDataset(datasetId: string) {
 }
 
 const datasetCopy = fetcher.path("/api/histories/{history_id}/contents/{type}s").method("post").create();
-type HistoryContentsArgs = FetchArgType<typeof datasetCopy>;
+export type HistoryContentsArgs = FetchArgType<typeof datasetCopy>;
 export async function copyDataset(
     datasetId: HistoryContentsArgs["content"],
     historyId: HistoryContentsArgs["history_id"],
diff --git a/client/src/api/index.ts b/client/src/api/index.ts
index d1dbc8854bbb..be992a9a504f 100644
--- a/client/src/api/index.ts
+++ b/client/src/api/index.ts
@@ -128,6 +128,14 @@ export interface DCECollection extends DCESummary {
     object: DCObject;
 }
 
+/**
+ * DatasetCollectionElement specific type for datasets.
+ */
+export interface DCEDataset extends DCESummary {
+    element_type: "hda";
+    object: HDAObject;
+}
+
 /**
  * Contains summary information about a HDCA (HistoryDatasetCollectionAssociation).
  *
@@ -148,6 +156,8 @@ export type HDCADetailed = components["schemas"]["HDCADetailed"];
  */
 export type DCObject = components["schemas"]["DCObject"];
 
+export type HDAObject = components["schemas"]["HDAObject"];
+
 export type DatasetCollectionAttributes = components["schemas"]["DatasetCollectionAttributesResult"];
 
 export type ConcreteObjectStoreModel = components["schemas"]["ConcreteObjectStoreModel"];
@@ -187,6 +197,13 @@ export function isCollectionElement(element: DCESummary): element is DCECollecti
     return element.element_type === "dataset_collection";
 }
 
+/**
+ * Returns true if the given element of a collection is a Dataset.
+ */
+export function isDatasetElement(element: DCESummary): element is DCEDataset {
+    return element.element_type === "hda";
+}
+
 /**
  * Returns true if the given dataset entry is an instance of DatasetDetails.
  */
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index 47ca7a497827..058c05430110 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -8,6 +8,7 @@ import { canMutateHistory, isCollectionElement, isHDCA } from "@/api";
 import ExpandedItems from "@/components/History/Content/ExpandedItems";
 import { updateContentFields } from "@/components/History/model/queries";
 import { useCollectionElementsStore } from "@/stores/collectionElementsStore";
+import { setItemDragstart } from "@/utils/setDrag";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import CollectionDetails from "./CollectionDetails.vue";
@@ -164,6 +165,7 @@ watch(
                                 :expand-dataset="isExpanded(item)"
                                 :is-dataset="item.element_type == 'hda'"
                                 :filterable="filterable"
+                                @drag-start="setItemDragstart(item, $event)"
                                 @update:expand-dataset="setExpanded(item, $event)"
                                 @view-collection="onViewDatasetCollectionElement(item)" />
                         </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 869548649a95..57a039676408 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -3,8 +3,15 @@ import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, type Ref, ref, set as VueSet, unref, watch } from "vue";
 
-import { type HistoryItemSummary, type HistorySummaryExtended, isHistoryItem, userOwnsHistory } from "@/api";
-import { copyDataset } from "@/api/datasets";
+import {
+    type HDAObject,
+    type HistoryItemSummary,
+    type HistorySummaryExtended,
+    isDatasetElement,
+    isHistoryItem,
+    userOwnsHistory,
+} from "@/api";
+import { copyDataset, HistoryContentsArgs } from "@/api/datasets";
 import ExpandedItems from "@/components/History/Content/ExpandedItems";
 import SelectedItems from "@/components/History/Content/SelectedItems";
 import { HistoryFilters } from "@/components/History/HistoryFilters";
@@ -17,7 +24,7 @@ import { useHistoryItemsStore } from "@/stores/historyItemsStore";
 import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
 import { type Alias, getOperatorForAlias } from "@/utils/filtering";
-import { setDrag } from "@/utils/setDrag";
+import { setItemDragstart } from "@/utils/setDrag";
 
 import HistoryCounter from "./HistoryCounter.vue";
 import HistoryDetails from "./HistoryDetails.vue";
@@ -54,6 +61,8 @@ interface Props {
     isMultiViewItem?: boolean;
 }
 
+type DraggableHistoryItem = HistoryItemSummary | HDAObject;
+
 type ContentItemRef = Record<string, Ref<InstanceType<typeof ContentItem> | null>>;
 
 const props = withDefaults(defineProps<Props>(), {
@@ -227,7 +236,13 @@ function getDragData() {
     const eventStore = useEventStore();
     const dragItems = eventStore.getDragItems();
     // Filter out any non-history items
-    const historyItems = dragItems?.filter((item: any) => isHistoryItem(item)) as HistoryItemSummary[];
+    const historyItems = dragItems?.map((item: any) => {
+        if (isHistoryItem(item)) {
+            return item;
+        } else if (isDatasetElement(item)) {
+            return item.object;
+        }
+    }) as DraggableHistoryItem[];
     const historyId = historyItems?.[0]?.history_id;
     return { data: historyItems, sameHistory: historyId === props.history.id, multiple: historyItems?.length > 1 };
 }
@@ -381,10 +396,18 @@ async function onDrop() {
     try {
         // iterate over the data array and copy each item to the current history
         for (const item of data) {
-            const dataSource = item.history_content_type === "dataset" ? "hda" : "hdca";
-            await copyDataset(item.id, props.history.id, item.history_content_type, dataSource);
+            let dataSource: HistoryContentsArgs["source"];
+            const type = item.history_content_type as "dataset" | "dataset_collection" | undefined;
+            if (type) {
+                // it's a `HistoryItemSummary`
+                dataSource = type === "dataset" ? "hda" : "hdca";
+            } else {
+                // it's a `HDAObject` from a collection
+                dataSource = "hda";
+            }
+            await copyDataset(item.id, props.history.id, type, dataSource);
 
-            if (item.history_content_type === "dataset") {
+            if (dataSource === "hda") {
                 datasetCount++;
                 if (!multiple) {
                     Toast.info("Dataset copied to history");
@@ -451,24 +474,6 @@ function arrowNavigate(item: HistoryItemSummary, eventKey: string) {
     }
     return nextItem;
 }
-
-function setItemDragstart(
-    item: HistoryItemSummary,
-    itemIsSelected: boolean,
-    selectedItems: Map<string, HistoryItemSummary>,
-    selectionSize: number,
-    event: DragEvent
-) {
-    if (itemIsSelected && selectionSize > 1) {
-        const selectedItemsObj: any = {};
-        for (const [key, value] of selectedItems) {
-            selectedItemsObj[key] = value;
-        }
-        setDrag(event, selectedItemsObj, true);
-    } else {
-        setDrag(event, item as any);
-    }
-}
 </script>
 
 <template>
@@ -629,10 +634,10 @@ function setItemDragstart(
                                     @drag-start="
                                         setItemDragstart(
                                             item,
+                                            $event,
                                             showSelection && isSelected(item),
-                                            selectedItems,
                                             selectionSize,
-                                            $event
+                                            selectedItems
                                         )
                                     "
                                     @hide-selection="setShowSelection(false)"
diff --git a/client/src/utils/setDrag.ts b/client/src/utils/setDrag.ts
index baa079764f36..35f10672d857 100644
--- a/client/src/utils/setDrag.ts
+++ b/client/src/utils/setDrag.ts
@@ -25,3 +25,21 @@ export function clearDrag() {
     const eventStore = useEventStore();
     eventStore.clearDragData();
 }
+
+export function setItemDragstart<T>(
+    item: T,
+    event: DragEvent,
+    itemIsSelected = false,
+    selectionSize = 0,
+    selectedItems?: Map<string, T>
+) {
+    if (selectedItems && itemIsSelected && selectionSize > 1) {
+        const selectedItemsObj: Record<string, T> = {};
+        for (const [key, value] of selectedItems) {
+            selectedItemsObj[key] = value;
+        }
+        setDrag(event, selectedItemsObj, true);
+    } else {
+        setDrag(event, item as any);
+    }
+}

From e12e7c4652a795b8bc897a23a0154b8f5decb71d Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 16 Aug 2024 11:24:56 -0500
Subject: [PATCH 2/9] show name in draggable for `DCE`

---
 client/src/api/index.ts     |  4 ++++
 client/src/utils/setDrag.ts | 11 +++++++++++
 2 files changed, 15 insertions(+)

diff --git a/client/src/api/index.ts b/client/src/api/index.ts
index be992a9a504f..db8f67c3d53d 100644
--- a/client/src/api/index.ts
+++ b/client/src/api/index.ts
@@ -232,6 +232,10 @@ export function isHistoryItem(item: object): item is HistoryItemSummary {
     return item && "history_content_type" in item;
 }
 
+export function isCollectionItem(item: object): item is DCESummary {
+    return item && "element_type" in item;
+}
+
 type QuotaUsageResponse = components["schemas"]["UserQuotaUsage"];
 
 /** Represents a registered user.**/
diff --git a/client/src/utils/setDrag.ts b/client/src/utils/setDrag.ts
index 35f10672d857..ef4c4e87df49 100644
--- a/client/src/utils/setDrag.ts
+++ b/client/src/utils/setDrag.ts
@@ -1,8 +1,11 @@
 /**
  * Helper to configure datatransfer for drag & drop operations
  */
+import { type DCESummary, isCollectionItem } from "@/api";
 import { type EventData, useEventStore } from "@/stores/eventStore";
 
+type NamedDCESummary = DCESummary & { name: string };
+
 export function setDrag(evt: DragEvent, data?: EventData, multiple = false) {
     const eventStore = useEventStore();
     if (data) {
@@ -36,10 +39,18 @@ export function setItemDragstart<T>(
     if (selectedItems && itemIsSelected && selectionSize > 1) {
         const selectedItemsObj: Record<string, T> = {};
         for (const [key, value] of selectedItems) {
+            setCollectionElementName(value as any);
             selectedItemsObj[key] = value;
         }
         setDrag(event, selectedItemsObj, true);
     } else {
+        setCollectionElementName(item as any);
         setDrag(event, item as any);
     }
 }
+
+function setCollectionElementName<T extends NamedDCESummary>(obj: T) {
+    if (isCollectionItem(obj as object)) {
+        obj["name"] = obj.element_identifier;
+    }
+}

From 15e34e5d6a8079dac704994054e40fa6a44994e6 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 16 Aug 2024 18:49:17 -0500
Subject: [PATCH 3/9] store DCEs as dragData, and check for `element_type`
 within `onDrop()`

for now, only `getDragData` for `DCEDataset`s
---
 client/src/api/index.ts                       |  2 +-
 .../History/CurrentHistory/HistoryPanel.vue   | 54 +++++++++++++------
 client/src/utils/setDrag.ts                   |  4 +-
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/client/src/api/index.ts b/client/src/api/index.ts
index db8f67c3d53d..bd17dc514d52 100644
--- a/client/src/api/index.ts
+++ b/client/src/api/index.ts
@@ -232,7 +232,7 @@ export function isHistoryItem(item: object): item is HistoryItemSummary {
     return item && "history_content_type" in item;
 }
 
-export function isCollectionItem(item: object): item is DCESummary {
+export function isDCE(item: object): item is DCESummary {
     return item && "element_type" in item;
 }
 
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 57a039676408..e16b5338ed84 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -4,7 +4,7 @@ import { storeToRefs } from "pinia";
 import { computed, onMounted, type Ref, ref, set as VueSet, unref, watch } from "vue";
 
 import {
-    type HDAObject,
+    type DCEDataset,
     type HistoryItemSummary,
     type HistorySummaryExtended,
     isDatasetElement,
@@ -61,7 +61,7 @@ interface Props {
     isMultiViewItem?: boolean;
 }
 
-type DraggableHistoryItem = HistoryItemSummary | HDAObject;
+type DraggableHistoryItem = HistoryItemSummary | DCEDataset; // TODO: DCESummary instead of DCEDataset
 
 type ContentItemRef = Record<string, Ref<InstanceType<typeof ContentItem> | null>>;
 
@@ -236,14 +236,17 @@ function getDragData() {
     const eventStore = useEventStore();
     const dragItems = eventStore.getDragItems();
     // Filter out any non-history items
-    const historyItems = dragItems?.map((item: any) => {
-        if (isHistoryItem(item)) {
-            return item;
-        } else if (isDatasetElement(item)) {
-            return item.object;
-        }
-    }) as DraggableHistoryItem[];
-    const historyId = historyItems?.[0]?.history_id;
+    // TODO: `isDCE` instead of `isDatasetElement`
+    const historyItems = dragItems?.filter(
+        (item: any) => isHistoryItem(item) || isDatasetElement(item)
+    ) as DraggableHistoryItem[];
+
+    // TODO: handle historyId === null || historyItems.length === 0
+    const historyId = historyItems[0]
+        ? isHistoryItem(historyItems[0])
+            ? historyItems[0].history_id
+            : historyItems[0].object?.history_id
+        : null;
     return { data: historyItems, sameHistory: historyId === props.history.id, multiple: historyItems?.length > 1 };
 }
 
@@ -397,15 +400,32 @@ async function onDrop() {
         // iterate over the data array and copy each item to the current history
         for (const item of data) {
             let dataSource: HistoryContentsArgs["source"];
-            const type = item.history_content_type as "dataset" | "dataset_collection" | undefined;
-            if (type) {
-                // it's a `HistoryItemSummary`
-                dataSource = type === "dataset" ? "hda" : "hdca";
-            } else {
-                // it's a `HDAObject` from a collection
+            let type: HistoryContentsArgs["type"];
+            let id: string;
+            if (isHistoryItem(item)) {
+                dataSource = item.history_content_type === "dataset" ? "hda" : "hdca";
+                type = item.history_content_type;
+                id = item.id;
+            }
+            // TEMPORARY: fix this when DCEs are handled correctly, unify like commented out code below
+            else if (isDatasetElement(item) && item.object) {
                 dataSource = "hda";
+                type = "dataset";
+                id = item.object.id;
+            }
+            /** TODO: Handle DCE, `DCEDataset`s work fine as they are HDAs,
+             *        `DCECollection`s are `dataset_collection`s and need to be HDCAs...
+             */
+            // else if (isDCE(item) && (item as DCESummary).object) {
+            //     const collectionElement = item as DCESummary;
+            //     dataSource = collectionElement.element_type === "dataset_collection" ? "hdca" : "hda"; // incorrect...
+            //     type = collectionElement.element_type === "dataset_collection" ? "dataset_collection" : "dataset";
+            //     id = collectionElement.object.id as string;
+            // }
+            else {
+                throw new Error(`Invalid item type${item.element_type ? `: ${item.element_type}` : ""}`);
             }
-            await copyDataset(item.id, props.history.id, type, dataSource);
+            await copyDataset(id, props.history.id, type, dataSource);
 
             if (dataSource === "hda") {
                 datasetCount++;
diff --git a/client/src/utils/setDrag.ts b/client/src/utils/setDrag.ts
index ef4c4e87df49..f6d1023c9241 100644
--- a/client/src/utils/setDrag.ts
+++ b/client/src/utils/setDrag.ts
@@ -1,7 +1,7 @@
 /**
  * Helper to configure datatransfer for drag & drop operations
  */
-import { type DCESummary, isCollectionItem } from "@/api";
+import { type DCESummary, isDCE } from "@/api";
 import { type EventData, useEventStore } from "@/stores/eventStore";
 
 type NamedDCESummary = DCESummary & { name: string };
@@ -50,7 +50,7 @@ export function setItemDragstart<T>(
 }
 
 function setCollectionElementName<T extends NamedDCESummary>(obj: T) {
-    if (isCollectionItem(obj as object)) {
+    if (isDCE(obj as object)) {
         obj["name"] = obj.element_identifier;
     }
 }

From 64f4e86f14894e17429e7ba7d16f662669c70eba Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 19 Aug 2024 15:57:21 -0500
Subject: [PATCH 4/9] export explicit types for content source and type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David López <46503462+davelopez@users.noreply.github.com>
---
 client/src/api/datasets.ts                                  | 5 ++++-
 .../src/components/History/CurrentHistory/HistoryPanel.vue  | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/api/datasets.ts b/client/src/api/datasets.ts
index 2a568f77130c..4c2a463394d3 100644
--- a/client/src/api/datasets.ts
+++ b/client/src/api/datasets.ts
@@ -67,7 +67,7 @@ export async function purgeDataset(datasetId: string) {
 }
 
 const datasetCopy = fetcher.path("/api/histories/{history_id}/contents/{type}s").method("post").create();
-export type HistoryContentsArgs = FetchArgType<typeof datasetCopy>;
+type HistoryContentsArgs = FetchArgType<typeof datasetCopy>;
 export async function copyDataset(
     datasetId: HistoryContentsArgs["content"],
     historyId: HistoryContentsArgs["history_id"],
@@ -95,3 +95,6 @@ export async function fetchDatasetAttributes(datasetId: string) {
 
     return data;
 }
+
+export type HistoryContentType = components["schemas"]["HistoryContentType"];
+export type HistoryContentSource = components["schemas"]["HistoryContentSource"];
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index e16b5338ed84..ce9c00308af7 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -11,7 +11,7 @@ import {
     isHistoryItem,
     userOwnsHistory,
 } from "@/api";
-import { copyDataset, HistoryContentsArgs } from "@/api/datasets";
+import { copyDataset, type HistoryContentSource, type HistoryContentType } from "@/api/datasets";
 import ExpandedItems from "@/components/History/Content/ExpandedItems";
 import SelectedItems from "@/components/History/Content/SelectedItems";
 import { HistoryFilters } from "@/components/History/HistoryFilters";
@@ -399,8 +399,8 @@ async function onDrop() {
     try {
         // iterate over the data array and copy each item to the current history
         for (const item of data) {
-            let dataSource: HistoryContentsArgs["source"];
-            let type: HistoryContentsArgs["type"];
+            let dataSource: HistoryContentSource;
+            let type: HistoryContentType;
             let id: string;
             if (isHistoryItem(item)) {
                 dataSource = item.history_content_type === "dataset" ? "hda" : "hdca";

From f4c17453f6a9e455e2d77d1015310dc0b69e5095 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 21 Aug 2024 16:53:24 -0500
Subject: [PATCH 5/9] create a reusable `historyDragDrop` composable

This unifies the drag and drop operations in `HistoryPanel` as well as the drop area in the `MultipleViewList`.
---
 .../History/CurrentHistory/HistoryPanel.vue   | 131 +-------------
 .../History/Multiple/MultipleViewList.vue     |  73 +-------
 client/src/composables/historyDragDrop.ts     | 166 ++++++++++++++++++
 3 files changed, 177 insertions(+), 193 deletions(-)
 create mode 100644 client/src/composables/historyDragDrop.ts

diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index ce9c00308af7..cb60fa08ccfc 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -3,29 +3,21 @@ import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, type Ref, ref, set as VueSet, unref, watch } from "vue";
 
-import {
-    type DCEDataset,
-    type HistoryItemSummary,
-    type HistorySummaryExtended,
-    isDatasetElement,
-    isHistoryItem,
-    userOwnsHistory,
-} from "@/api";
-import { copyDataset, type HistoryContentSource, type HistoryContentType } from "@/api/datasets";
+import { type HistoryItemSummary, type HistorySummaryExtended, userOwnsHistory } from "@/api";
 import ExpandedItems from "@/components/History/Content/ExpandedItems";
 import SelectedItems from "@/components/History/Content/SelectedItems";
 import { HistoryFilters } from "@/components/History/HistoryFilters";
 import { deleteContent, updateContentFields } from "@/components/History/model/queries";
-import { Toast } from "@/composables/toast";
 import { useActiveElement } from "@/composables/useActiveElement";
 import { startWatchingHistory } from "@/store/historyStore/model/watchHistory";
-import { useEventStore } from "@/stores/eventStore";
 import { useHistoryItemsStore } from "@/stores/historyItemsStore";
 import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
 import { type Alias, getOperatorForAlias } from "@/utils/filtering";
 import { setItemDragstart } from "@/utils/setDrag";
 
+import { useHistoryDragDrop } from "../../../composables/historyDragDrop";
+
 import HistoryCounter from "./HistoryCounter.vue";
 import HistoryDetails from "./HistoryDetails.vue";
 import HistoryDropZone from "./HistoryDropZone.vue";
@@ -61,8 +53,6 @@ interface Props {
     isMultiViewItem?: boolean;
 }
 
-type DraggableHistoryItem = HistoryItemSummary | DCEDataset; // TODO: DCESummary instead of DCEDataset
-
 type ContentItemRef = Record<string, Ref<InstanceType<typeof ContentItem> | null>>;
 
 const props = withDefaults(defineProps<Props>(), {
@@ -79,11 +69,9 @@ const isLoading = ref(false);
 const offsetQueryParam = ref(0);
 const searchError = ref<BackendFilterError | undefined>(undefined);
 const showAdvanced = ref(false);
-const showDropZone = ref(false);
 const operationRunning = ref<string | null>(null);
 const operationError = ref(null);
 const querySelectionBreak = ref(false);
-const dragTarget = ref<EventTarget | null>(null);
 const contentItemRefs = computed(() => {
     return historyItems.value.reduce((acc: ContentItemRef, item) => {
         acc[itemUniqueKey(item)] = ref(null);
@@ -100,6 +88,8 @@ const historyStore = useHistoryStore();
 const historyItemsStore = useHistoryItemsStore();
 const { currentUser } = storeToRefs(useUserStore());
 
+const { showDropZone, onDragEnter, onDragLeave, onDragOver, onDrop } = useHistoryDragDrop(props.history.id);
+
 const currentUserOwnsHistory = computed(() => {
     return userOwnsHistory(currentUser.value, props.history);
 });
@@ -228,28 +218,6 @@ watch(
     }
 );
 
-function dragSameHistory() {
-    return getDragData().sameHistory;
-}
-
-function getDragData() {
-    const eventStore = useEventStore();
-    const dragItems = eventStore.getDragItems();
-    // Filter out any non-history items
-    // TODO: `isDCE` instead of `isDatasetElement`
-    const historyItems = dragItems?.filter(
-        (item: any) => isHistoryItem(item) || isDatasetElement(item)
-    ) as DraggableHistoryItem[];
-
-    // TODO: handle historyId === null || historyItems.length === 0
-    const historyId = historyItems[0]
-        ? isHistoryItem(historyItems[0])
-            ? historyItems[0].history_id
-            : historyItems[0].object?.history_id
-        : null;
-    return { data: historyItems, sameHistory: historyId === props.history.id, multiple: historyItems?.length > 1 };
-}
-
 function getHighlight(item: HistoryItemSummary) {
     if (unref(isLoading)) {
         return undefined;
@@ -363,95 +331,6 @@ function onOperationError(error: any) {
     operationError.value = error;
 }
 
-function onDragEnter(e: DragEvent) {
-    if (dragSameHistory()) {
-        return;
-    }
-    dragTarget.value = e.target;
-    showDropZone.value = true;
-}
-
-function onDragOver(e: DragEvent) {
-    if (dragSameHistory()) {
-        return;
-    }
-    e.preventDefault();
-}
-
-function onDragLeave(e: DragEvent) {
-    if (dragSameHistory()) {
-        return;
-    }
-    if (dragTarget.value === e.target) {
-        showDropZone.value = false;
-    }
-}
-
-async function onDrop() {
-    showDropZone.value = false;
-    const { data, sameHistory, multiple } = getDragData();
-    if (!data || sameHistory) {
-        return;
-    }
-
-    let datasetCount = 0;
-    let collectionCount = 0;
-    try {
-        // iterate over the data array and copy each item to the current history
-        for (const item of data) {
-            let dataSource: HistoryContentSource;
-            let type: HistoryContentType;
-            let id: string;
-            if (isHistoryItem(item)) {
-                dataSource = item.history_content_type === "dataset" ? "hda" : "hdca";
-                type = item.history_content_type;
-                id = item.id;
-            }
-            // TEMPORARY: fix this when DCEs are handled correctly, unify like commented out code below
-            else if (isDatasetElement(item) && item.object) {
-                dataSource = "hda";
-                type = "dataset";
-                id = item.object.id;
-            }
-            /** TODO: Handle DCE, `DCEDataset`s work fine as they are HDAs,
-             *        `DCECollection`s are `dataset_collection`s and need to be HDCAs...
-             */
-            // else if (isDCE(item) && (item as DCESummary).object) {
-            //     const collectionElement = item as DCESummary;
-            //     dataSource = collectionElement.element_type === "dataset_collection" ? "hdca" : "hda"; // incorrect...
-            //     type = collectionElement.element_type === "dataset_collection" ? "dataset_collection" : "dataset";
-            //     id = collectionElement.object.id as string;
-            // }
-            else {
-                throw new Error(`Invalid item type${item.element_type ? `: ${item.element_type}` : ""}`);
-            }
-            await copyDataset(id, props.history.id, type, dataSource);
-
-            if (dataSource === "hda") {
-                datasetCount++;
-                if (!multiple) {
-                    Toast.info("Dataset copied to history");
-                }
-            } else {
-                collectionCount++;
-                if (!multiple) {
-                    Toast.info("Collection copied to history");
-                }
-            }
-        }
-
-        if (multiple && datasetCount > 0) {
-            Toast.info(`${datasetCount} dataset${datasetCount > 1 ? "s" : ""} copied to new history`);
-        }
-        if (multiple && collectionCount > 0) {
-            Toast.info(`${collectionCount} collection${collectionCount > 1 ? "s" : ""} copied to new history`);
-        }
-        historyStore.loadHistoryById(props.history.id);
-    } catch (error) {
-        Toast.error(`${error}`);
-    }
-}
-
 function updateFilterValue(filterKey: string, newValue: any) {
     const currentFilterText = filterText.value;
     filterText.value = filterClass.setFilterValue(currentFilterText, filterKey, newValue);
diff --git a/client/src/components/History/Multiple/MultipleViewList.vue b/client/src/components/History/Multiple/MultipleViewList.vue
index 36eaac0e68cb..e84a89b0eadc 100644
--- a/client/src/components/History/Multiple/MultipleViewList.vue
+++ b/client/src/components/History/Multiple/MultipleViewList.vue
@@ -6,16 +6,15 @@ import { computed, type Ref, ref } from "vue";
 //@ts-ignore missing typedefs
 import VirtualList from "vue-virtual-scroll-list";
 
-import { HistoryItemSummary, isHistoryItem } from "@/api";
-import { copyDataset } from "@/api/datasets";
 import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
 import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
 import { Toast } from "@/composables/toast";
-import { useEventStore } from "@/stores/eventStore";
 import { useHistoryStore } from "@/stores/historyStore";
 import localize from "@/utils/localization";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import { useHistoryDragDrop } from "../../../composables/historyDragDrop";
+
 import HistoryDropZone from "../CurrentHistory/HistoryDropZone.vue";
 import MultipleViewItem from "./MultipleViewItem.vue";
 
@@ -65,67 +64,7 @@ async function createAndPin() {
     }
 }
 
-const showDropZone = ref(false);
-const processingDrop = ref(false);
-async function onDrop(evt: any) {
-    const eventStore = useEventStore();
-    if (processingDrop.value) {
-        showDropZone.value = false;
-        return;
-    }
-    processingDrop.value = true;
-    showDropZone.value = false;
-    const dragItems = eventStore.getDragItems();
-    // Filter out any non-history items
-    const historyItems = dragItems?.filter((item: any) => isHistoryItem(item)) as HistoryItemSummary[];
-    const multiple = historyItems.length > 1;
-    const originalHistoryId = historyItems?.[0]?.history_id;
-
-    if (historyItems && originalHistoryId) {
-        await historyStore.createNewHistory();
-        const currentHistoryId = historyStore.currentHistoryId;
-
-        let datasetCount = 0;
-        let collectionCount = 0;
-        if (currentHistoryId) {
-            // iterate over the data array and copy each item to the new history
-            for (const item of historyItems) {
-                const dataSource = item.history_content_type === "dataset" ? "hda" : "hdca";
-                await copyDataset(item.id, currentHistoryId, item.history_content_type, dataSource)
-                    .then(() => {
-                        if (item.history_content_type === "dataset") {
-                            datasetCount++;
-                            if (!multiple) {
-                                Toast.info(localize("Dataset copied to new history"));
-                            }
-                        } else {
-                            collectionCount++;
-                            if (!multiple) {
-                                Toast.info(localize("Collection copied to new history"));
-                            }
-                        }
-                    })
-                    .catch((error) => {
-                        Toast.error(errorMessageAsString(error));
-                    });
-            }
-            if (multiple && datasetCount > 0) {
-                Toast.info(`${datasetCount} dataset${datasetCount > 1 ? "s" : ""} copied to new history`);
-            }
-            if (multiple && collectionCount > 0) {
-                Toast.info(`${collectionCount} collection${collectionCount > 1 ? "s" : ""} copied to new history`);
-            }
-
-            if (historyStore.pinnedHistories.length > 0) {
-                // pin the newly created history via the drop
-                historyStore.pinHistory(currentHistoryId);
-                // also pin the original history where the item came from
-                historyStore.pinHistory(originalHistoryId);
-            }
-        }
-        processingDrop.value = false;
-    }
-}
+const { showDropZone, onDragEnter, onDragLeave, onDragOver, onDrop } = useHistoryDragDrop(undefined, true, true);
 
 async function onKeyDown(evt: KeyboardEvent) {
     if (evt.key === "Enter" || evt.key === " ") {
@@ -159,9 +98,9 @@ async function onKeyDown(evt: KeyboardEvent) {
             <div
                 class="history-picker"
                 @drop.prevent="onDrop"
-                @dragenter.prevent="showDropZone = true"
-                @dragover.prevent
-                @dragleave.prevent="showDropZone = false">
+                @dragenter.prevent="onDragEnter"
+                @dragover="onDragOver"
+                @dragleave.prevent="onDragLeave">
                 <span v-if="!showDropZone" class="d-flex flex-column h-100">
                     <div
                         class="history-picker-box top-picker text-primary"
diff --git a/client/src/composables/historyDragDrop.ts b/client/src/composables/historyDragDrop.ts
new file mode 100644
index 000000000000..966c4a4fa42c
--- /dev/null
+++ b/client/src/composables/historyDragDrop.ts
@@ -0,0 +1,166 @@
+import { computed, type Ref, ref, unref } from "vue";
+
+import { type DCEDataset, type DCESummary, type HistoryItemSummary, isDatasetElement, isHistoryItem } from "@/api";
+import { copyDataset, type HistoryContentSource, type HistoryContentType } from "@/api/datasets";
+import { Toast } from "@/composables/toast";
+import { useEventStore } from "@/stores/eventStore";
+import { useHistoryStore } from "@/stores/historyStore";
+
+type DraggableHistoryItem = HistoryItemSummary | DCEDataset; // TODO: DCESummary instead of DCEDataset
+
+export function useHistoryDragDrop(targetHistoryId?: Ref<string> | string, createNew = false, pinHistories = false) {
+    const destinationHistoryId = unref(targetHistoryId);
+    const eventStore = useEventStore();
+    const historyStore = useHistoryStore();
+
+    const fromHistoryId = computed(() => {
+        const dragItems = getDragItems();
+        return dragItems[0]
+            ? isHistoryItem(dragItems[0])
+                ? dragItems[0].history_id
+                : dragItems[0].object?.history_id
+            : null;
+    });
+
+    const showDropZone = ref(false);
+    const dragTarget = ref<EventTarget | null>(null);
+    const processingDrop = ref(false);
+
+    const operationDisabled = computed(
+        () =>
+            !fromHistoryId.value ||
+            (destinationHistoryId && fromHistoryId.value === destinationHistoryId) ||
+            (!createNew && !destinationHistoryId) ||
+            !getDragItems().length ||
+            processingDrop.value
+    );
+
+    function getDragItems() {
+        const storeItems = eventStore.getDragItems();
+        // Filter out any non-history or `DatasetCollectionElement` items
+        return storeItems?.filter(
+            (item) => isHistoryItem(item) || isDatasetElement(item as DCESummary)
+        ) as DraggableHistoryItem[];
+    }
+
+    function onDragEnter(e: DragEvent) {
+        if (operationDisabled.value) {
+            return;
+        }
+        dragTarget.value = e.target;
+        showDropZone.value = true;
+    }
+
+    function onDragOver(e: DragEvent) {
+        if (operationDisabled.value) {
+            return;
+        }
+        e.preventDefault();
+    }
+
+    function onDragLeave(e: DragEvent) {
+        if (operationDisabled.value) {
+            return;
+        }
+        if (dragTarget.value === e.target) {
+            showDropZone.value = false;
+        }
+    }
+
+    async function onDrop() {
+        showDropZone.value = false;
+        if (operationDisabled.value) {
+            return;
+        }
+        processingDrop.value = true;
+
+        let datasetCount = 0;
+        let collectionCount = 0;
+
+        try {
+            const dragItems = getDragItems();
+            const multiple = dragItems.length > 1;
+            const originalHistoryId = fromHistoryId.value as string;
+
+            let historyId;
+            if (destinationHistoryId) {
+                historyId = destinationHistoryId;
+            } else if (createNew) {
+                await historyStore.createNewHistory();
+                historyId = historyStore.currentHistoryId;
+            } else {
+                historyId = null;
+            }
+            if (!historyId) {
+                throw new Error("Destination history not found or created");
+            }
+
+            // iterate over the data array and copy each item to the current history
+            for (const item of dragItems) {
+                let dataSource: HistoryContentSource;
+                let type: HistoryContentType;
+                let id: string;
+                if (isHistoryItem(item)) {
+                    dataSource = item.history_content_type === "dataset" ? "hda" : "hdca";
+                    type = item.history_content_type;
+                    id = item.id;
+                }
+                // For DCEs, only `DCEDataset`s are droppable, `DCEDatasetCollection`s are not
+                else if (isDatasetElement(item) && item.object) {
+                    dataSource = "hda";
+                    type = "dataset";
+                    id = item.object.id;
+                } else {
+                    throw new Error(`Invalid item type${item.element_type ? `: ${item.element_type}` : ""}`);
+                }
+                await copyDataset(id, historyId, type, dataSource);
+
+                if (dataSource === "hda") {
+                    datasetCount++;
+                    if (!multiple) {
+                        Toast.info(`Dataset copied to ${createNew ? "new" : ""} history`);
+                    }
+                } else {
+                    collectionCount++;
+                    if (!multiple) {
+                        Toast.info(`Collection copied to ${createNew ? "new" : ""} history`);
+                    }
+                }
+            }
+
+            if (multiple && datasetCount > 0) {
+                Toast.info(
+                    `${datasetCount} dataset${datasetCount > 1 ? "s" : ""} copied to ${createNew ? "new" : ""} history`
+                );
+            }
+            if (multiple && collectionCount > 0) {
+                Toast.info(
+                    `${collectionCount} collection${collectionCount > 1 ? "s" : ""} copied to ${
+                        createNew ? "new" : ""
+                    } history`
+                );
+            }
+
+            if (pinHistories && historyStore.pinnedHistories.length > 0) {
+                // pin the target history
+                historyStore.pinHistory(historyId);
+                // also pin the original history where the item came from
+                historyStore.pinHistory(originalHistoryId);
+            } else {
+                historyStore.loadHistoryById(historyId);
+            }
+        } catch (error) {
+            Toast.error(`${error}`);
+        } finally {
+            processingDrop.value = false;
+        }
+    }
+
+    return {
+        showDropZone,
+        onDragEnter,
+        onDragOver,
+        onDragLeave,
+        onDrop,
+    };
+}

From 29a023d1b580f1957816e9da4a26a2bc8765cff6 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 21 Aug 2024 17:53:32 -0500
Subject: [PATCH 6/9] use a computed to track changed history for drag drop

---
 .../History/CurrentHistory/HistoryPanel.vue     |  3 ++-
 client/src/composables/historyDragDrop.ts       | 17 ++++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index cb60fa08ccfc..d3245eb45cde 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -88,7 +88,8 @@ const historyStore = useHistoryStore();
 const historyItemsStore = useHistoryItemsStore();
 const { currentUser } = storeToRefs(useUserStore());
 
-const { showDropZone, onDragEnter, onDragLeave, onDragOver, onDrop } = useHistoryDragDrop(props.history.id);
+const historyIdComputed = computed(() => props.history.id);
+const { showDropZone, onDragEnter, onDragLeave, onDragOver, onDrop } = useHistoryDragDrop(historyIdComputed);
 
 const currentUserOwnsHistory = computed(() => {
     return userOwnsHistory(currentUser.value, props.history);
diff --git a/client/src/composables/historyDragDrop.ts b/client/src/composables/historyDragDrop.ts
index 966c4a4fa42c..629343eeefed 100644
--- a/client/src/composables/historyDragDrop.ts
+++ b/client/src/composables/historyDragDrop.ts
@@ -9,7 +9,14 @@ import { useHistoryStore } from "@/stores/historyStore";
 type DraggableHistoryItem = HistoryItemSummary | DCEDataset; // TODO: DCESummary instead of DCEDataset
 
 export function useHistoryDragDrop(targetHistoryId?: Ref<string> | string, createNew = false, pinHistories = false) {
-    const destinationHistoryId = unref(targetHistoryId);
+    // convert destinationHistoryId to a ref if it's not already
+    const destinationHistoryId = computed(() => {
+        if (typeof targetHistoryId === "string") {
+            return targetHistoryId;
+        }
+        return unref(targetHistoryId);
+    });
+
     const eventStore = useEventStore();
     const historyStore = useHistoryStore();
 
@@ -29,8 +36,8 @@ export function useHistoryDragDrop(targetHistoryId?: Ref<string> | string, creat
     const operationDisabled = computed(
         () =>
             !fromHistoryId.value ||
-            (destinationHistoryId && fromHistoryId.value === destinationHistoryId) ||
-            (!createNew && !destinationHistoryId) ||
+            (destinationHistoryId.value && fromHistoryId.value === destinationHistoryId.value) ||
+            (!createNew && !destinationHistoryId.value) ||
             !getDragItems().length ||
             processingDrop.value
     );
@@ -83,8 +90,8 @@ export function useHistoryDragDrop(targetHistoryId?: Ref<string> | string, creat
             const originalHistoryId = fromHistoryId.value as string;
 
             let historyId;
-            if (destinationHistoryId) {
-                historyId = destinationHistoryId;
+            if (destinationHistoryId.value) {
+                historyId = destinationHistoryId.value;
             } else if (createNew) {
                 await historyStore.createNewHistory();
                 historyId = historyStore.currentHistoryId;

From 4b9116b4abc9111d6ea2d8dbecbe152cb5dac904 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 21 Aug 2024 17:58:20 -0500
Subject: [PATCH 7/9] allow DCEs to be dropped to tool form

---
 .../Form/Elements/FormData/FormData.vue           | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index b5f71c8cb2d1..e370339e6cb5 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup, BCollapse, BFormCheckbox, BTooltip } from "bootstrap-vue";
 import { computed, onMounted, type Ref, ref, watch } from "vue";
 
+import { isDatasetElement, isDCE } from "@/api";
 import { getGalaxyInstance } from "@/app";
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
 import { useUid } from "@/composables/utils/uid";
@@ -314,11 +315,21 @@ function handleIncoming(incoming: Record<string, unknown>, partial = true) {
             const incomingValues: Array<DataOption> = [];
             values.forEach((v) => {
                 // Map incoming objects to data option values
+                let newSrc;
+                if (isDCE(v)) {
+                    if (isDatasetElement(v)) {
+                        newSrc = SOURCE.DATASET;
+                        v = v.object;
+                    } else {
+                        newSrc = SOURCE.COLLECTION_ELEMENT;
+                    }
+                } else {
+                    newSrc =
+                        v.src || (v.history_content_type === "dataset_collection" ? SOURCE.COLLECTION : SOURCE.DATASET);
+                }
                 const newHid = v.hid;
                 const newId = v.id;
                 const newName = v.name ? v.name : newId;
-                const newSrc =
-                    v.src || (v.history_content_type === "dataset_collection" ? SOURCE.COLLECTION : SOURCE.DATASET);
                 const newValue: DataOption = {
                     id: newId,
                     src: newSrc,

From 43f3b8fdfb24e810decb3172d7d1e4ea5ba43031 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 28 Aug 2024 10:12:14 -0500
Subject: [PATCH 8/9] move copy operation to another loop to only copy when no
 errors

---
 client/src/composables/historyDragDrop.ts | 34 ++++++++++++++++-------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/client/src/composables/historyDragDrop.ts b/client/src/composables/historyDragDrop.ts
index 629343eeefed..0ab2675d43a8 100644
--- a/client/src/composables/historyDragDrop.ts
+++ b/client/src/composables/historyDragDrop.ts
@@ -7,6 +7,11 @@ import { useEventStore } from "@/stores/eventStore";
 import { useHistoryStore } from "@/stores/historyStore";
 
 type DraggableHistoryItem = HistoryItemSummary | DCEDataset; // TODO: DCESummary instead of DCEDataset
+interface HistoryItemCopyData {
+    dataSource: HistoryContentSource;
+    type: HistoryContentType;
+    id: string;
+}
 
 export function useHistoryDragDrop(targetHistoryId?: Ref<string> | string, createNew = false, pinHistories = false) {
     // convert destinationHistoryId to a ref if it's not already
@@ -102,24 +107,33 @@ export function useHistoryDragDrop(targetHistoryId?: Ref<string> | string, creat
                 throw new Error("Destination history not found or created");
             }
 
-            // iterate over the data array and copy each item to the current history
+            const copyableItems: HistoryItemCopyData[] = [];
+            // iterate over the data array and get valid copyable items
             for (const item of dragItems) {
-                let dataSource: HistoryContentSource;
-                let type: HistoryContentType;
-                let id: string;
+                let copyableItem: HistoryItemCopyData;
                 if (isHistoryItem(item)) {
-                    dataSource = item.history_content_type === "dataset" ? "hda" : "hdca";
-                    type = item.history_content_type;
-                    id = item.id;
+                    copyableItem = {
+                        dataSource: item.history_content_type === "dataset" ? "hda" : "hdca",
+                        type: item.history_content_type,
+                        id: item.id,
+                    };
                 }
                 // For DCEs, only `DCEDataset`s are droppable, `DCEDatasetCollection`s are not
                 else if (isDatasetElement(item) && item.object) {
-                    dataSource = "hda";
-                    type = "dataset";
-                    id = item.object.id;
+                    copyableItem = {
+                        dataSource: "hda",
+                        type: "dataset",
+                        id: item.object.id,
+                    };
                 } else {
                     throw new Error(`Invalid item type${item.element_type ? `: ${item.element_type}` : ""}`);
                 }
+                copyableItems.push(copyableItem);
+            }
+
+            // iterate over the data array and copy each item to the current history
+            for (const item of copyableItems) {
+                const { dataSource, type, id } = item;
                 await copyDataset(id, historyId, type, dataSource);
 
                 if (dataSource === "hda") {

From c74233392503ac7d69c3f0e63cd8c1775914a447 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 28 Aug 2024 10:15:25 -0500
Subject: [PATCH 9/9] only load/pin history if items were copied

---
 client/src/composables/historyDragDrop.ts | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/client/src/composables/historyDragDrop.ts b/client/src/composables/historyDragDrop.ts
index 0ab2675d43a8..5d0bfe89bdbd 100644
--- a/client/src/composables/historyDragDrop.ts
+++ b/client/src/composables/historyDragDrop.ts
@@ -162,13 +162,16 @@ export function useHistoryDragDrop(targetHistoryId?: Ref<string> | string, creat
                 );
             }
 
-            if (pinHistories && historyStore.pinnedHistories.length > 0) {
-                // pin the target history
-                historyStore.pinHistory(historyId);
-                // also pin the original history where the item came from
-                historyStore.pinHistory(originalHistoryId);
-            } else {
-                historyStore.loadHistoryById(historyId);
+            // if items were copied
+            if (datasetCount > 0 && collectionCount > 0) {
+                if (pinHistories && historyStore.pinnedHistories.length > 0) {
+                    // pin the target history
+                    historyStore.pinHistory(historyId);
+                    // also pin the original history where the item came from
+                    historyStore.pinHistory(originalHistoryId);
+                } else {
+                    historyStore.loadHistoryById(historyId);
+                }
             }
         } catch (error) {
             Toast.error(`${error}`);