add History Multiview activity panel, create HistoryScrollList

galaxyproject · Jan 15, 2024 · 6daed04 · 6daed04
1 parent b22e033
commit 6daed04
Show file tree

Hide file tree

Showing 13 changed files with 736 additions and 126 deletions.
diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
@@ -17,6 +17,7 @@ import NotificationItem from "./Items/NotificationItem.vue";
 import UploadItem from "./Items/UploadItem.vue";
 import ContextMenu from "@/components/Common/ContextMenu.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
+import MultiviewPanel from "@/components/Panels/MultiviewPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import WorkflowBox from "@/components/Panels/WorkflowBox.vue";
 
@@ -168,7 +169,7 @@ function toggleContextMenu(evt: MouseEvent) {
                                 :to="activity.to"
                                 @click="onToggleSidebar()" />
                             <ActivityItem
-                                v-else-if="['tools', 'workflows'].includes(activity.id)"
+                                v-else-if="['tools', 'workflows', 'multiview'].includes(activity.id)"
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
@@ -216,6 +217,9 @@ function toggleContextMenu(evt: MouseEvent) {
         <FlexPanel v-else-if="isActiveSideBar('workflows')" key="workflows" side="left" :collapsible="false">
             <WorkflowBox />
         </FlexPanel>
+        <FlexPanel v-else-if="isActiveSideBar('multiview')" key="multiview" side="left" :collapsible="false">
+            <MultiviewPanel />
+        </FlexPanel>
         <ContextMenu :visible="contextMenuVisible" :x="contextMenuX" :y="contextMenuY" @hide="toggleContextMenu">
             <ActivitySettings />
         </ContextMenu>

diff --git a/client/src/components/Common/FilterMenu.test.js b/client/src/components/Common/FilterMenu.test.js
@@ -152,14 +152,14 @@ describe("FilterMenu", () => {
         // `has_help` filter should have help modal button
         expect(wrapper.find("[title='Value Help']").classes().includes("btn")).toBe(true);
         // ranged time field (has 2 datepickers)
-        const createdGtInput = wrapper.find("[placeholder='creation time after']");
-        const createdLtInput = wrapper.find("[placeholder='creation time before']");
+        const createdGtInput = wrapper.find("[placeholder='after creation time']");
+        const createdLtInput = wrapper.find("[placeholder='before creation time']");
         createdGtInput.setValue("January 1, 2022");
         createdLtInput.setValue("January 1, 2023");
         expect(wrapper.findAll(".b-form-datepicker").length).toBe(2);
         // ranged number field (has different placeholder: greater instead of after...)
-        const indexGtInput = wrapper.find("[placeholder='index greater']");
-        const indexLtInput = wrapper.find("[placeholder='index lower']");
+        const indexGtInput = wrapper.find("[placeholder='greater than index']");
+        const indexLtInput = wrapper.find("[placeholder='lower than index']");
         indexGtInput.setValue("1234");
         indexLtInput.setValue("5678");
         // default bool filter

diff --git a/client/src/components/Common/FilterMenuRanged.vue b/client/src/components/Common/FilterMenuRanged.vue
@@ -61,11 +61,11 @@ function hasError(field: string) {
 
 function localPlaceholder(comp: "gt" | "lt") {
     if (comp == "gt") {
-        const field = isDateType.value ? "after" : "greater";
-        return `${props.filter.placeholder} ${field}`;
+        const field = isDateType.value ? "after" : "greater than";
+        return `${field} ${props.filter.placeholder}`;
     } else {
-        const field = isDateType.value ? "before" : "lower";
-        return `${props.filter.placeholder} ${field}`;
+        const field = isDateType.value ? "before" : "lower than";
+        return `${field} ${props.filter.placeholder}`;
     }
 }
 </script>

diff --git a/client/src/components/Common/TextSummary.vue b/client/src/components/Common/TextSummary.vue
@@ -65,22 +65,21 @@ const text = computed(() =>
 
 <template>
     <div>
-        <component :is="props.component" v-if="props.oneLineSummary" class="one-line-summary">{{
-            props.description
-        }}</component>
-        <span v-else>{{ text }}</span>
-        <span v-if="!noExpand && summary">
-            <a
-                v-if="!propShowDetails"
-                class="text-summary-expand"
-                href="javascript:void(0)"
-                @click.stop="propShowDetails = true">
-                ... <FontAwesomeIcon :icon="collapsedEnableIcon" />
-            </a>
-            <a v-else href="javascript:void(0)" @click.stop="propShowDetails = false">
-                ... <FontAwesomeIcon :icon="collapsedDisableIcon" />
-            </a>
-        </span>
+        <component :is="props.component" :class="props.oneLineSummary && 'one-line-summary'">
+            {{ text }}
+            <span v-if="!noExpand && summary">
+                <a
+                    v-if="!propShowDetails"
+                    class="text-summary-expand"
+                    href="javascript:void(0)"
+                    @click.stop="propShowDetails = true">
+                    ... <FontAwesomeIcon :icon="collapsedEnableIcon" />
+                </a>
+                <a v-else href="javascript:void(0)" @click.stop="propShowDetails = false">
+                    ... <FontAwesomeIcon :icon="collapsedDisableIcon" />
+                </a>
+            </span>
+        </component>
     </div>
 </template>
 

diff --git a/client/src/components/History/HistoriesFilters.js b/client/src/components/History/HistoriesFilters.js
@@ -0,0 +1,17 @@
+import Filtering, { compare, contains, expandNameTag, toDate } from "utils/filtering";
+
+const validFilters = {
+    name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
+    tag: { placeholder: "tag", type: String, handler: contains("tags", "tag", expandNameTag), menuItem: true },
+    annotation: { placeholder: "annotation", type: String, handler: contains("annotation"), menuItem: true },
+    update_time: {
+        placeholder: "updated time",
+        type: Date,
+        handler: compare("update_time", "le", toDate),
+        isRangeInput: true,
+        menuItem: true,
+    },
+    update_time_ge: { handler: compare("update_time", "ge", toDate), menuItem: false },
+    update_time_le: { handler: compare("update_time", "le", toDate), menuItem: false },
+};
+export const HistoriesFilters = new Filtering(validFilters);