Add history graph UI with interactive visualization and menu integration

Author: guerler

client/src/api/schema/schema.ts

@@ -2803,6 +2803,23 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/histories/{history_id}/graph": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Returns a history-scoped structural graph. */
+        get: operations["graph_api_histories__history_id__graph_get"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/histories/{history_id}/jobs_summary": {
         parameters: {
             query?: never;
@@ -13371,6 +13388,46 @@ export interface components {
              */
             type: "genomebuild";
         };
+        /** GraphEdge */
+        GraphEdge: {
+            /** Source */
+            source: string;
+            /** Target */
+            target: string;
+            /**
+             * Type
+             * @enum {string}
+             */
+            type: "dataset_input" | "dataset_output" | "collection_input" | "collection_output";
+        };
+        /** GraphNode */
+        GraphNode: {
+            /** Collection Type */
+            collection_type?: string | null;
+            /** Deleted */
+            deleted?: boolean | null;
+            /** Extension */
+            extension?: string | null;
+            /** Hid */
+            hid?: number | null;
+            /** Id */
+            id: string;
+            /** Name */
+            name?: string | null;
+            /** State */
+            state?: string | null;
+            /** Tool Id */
+            tool_id?: string | null;
+            /** Tool Name */
+            tool_name?: string | null;
+            /**
+             * Type
+             * @enum {string}
+             */
+            type: "dataset" | "collection" | "tool_request";
+            /** Visible */
+            visible?: boolean | null;
+        };
         /**
          * GroupCreatePayload
          * @description Payload schema for creating a group.
@@ -15635,6 +15692,14 @@ export interface components {
              */
             username_and_slug?: string | null;
         };
+        /** HistoryGraphResponse */
+        HistoryGraphResponse: {
+            /** Edges */
+            edges: components["schemas"]["GraphEdge"][];
+            /** Nodes */
+            nodes: components["schemas"]["GraphNode"][];
+            truncated: components["schemas"]["TruncationInfo"];
+        };
         /**
          * HistorySummary
          * @description History summary information.
@@ -23774,6 +23839,24 @@ export interface components {
              */
             title?: string | null;
         };
+        /** TruncationInfo */
+        TruncationInfo: {
+            /**
+             * Item Count Capped
+             * @default false
+             */
+            item_count_capped: boolean;
+            /**
+             * Tool Request Count Capped
+             * @default false
+             */
+            tool_request_count_capped: boolean;
+            /**
+             * Tool Requests Omitted
+             * @default 0
+             */
+            tool_requests_omitted: number;
+        };
         /** UndeleteHistoriesPayload */
         UndeleteHistoriesPayload: {
             /**
@@ -35113,6 +35196,61 @@ export interface operations {
             };
         };
     };
+    graph_api_histories__history_id__graph_get: {
+        parameters: {
+            query?: {
+                /** @description Maximum number of nodes. Applied at history scope. */
+                limit?: number;
+                /** @description Include deleted datasets and collections. */
+                include_deleted?: boolean;
+                /** @description Optional: focus on subgraph reachable from this node (e.g. d<encoded_id>). */
+                seed?: string | null;
+                /** @description Direction for seed-based subgraph extraction. */
+                direction?: "backward" | "forward" | "both";
+                /** @description Max depth for seed-based subgraph extraction. */
+                depth?: number;
+            };
+            header?: {
+                /** @description The user ID that will be used to effectively make this API call. Only admins and designated users can make API calls on behalf of other users. */
+                "run-as"?: string | null;
+            };
+            path: {
+                /** @description The encoded database identifier of the History. */
+                history_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HistoryGraphResponse"];
+                };
+            };
+            /** @description Request Error */
+            "4XX": {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MessageExceptionModel"];
+                };
+            };
+            /** @description Server Error */
+            "5XX": {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MessageExceptionModel"];
+                };
+            };
+        };
+    };
     index_jobs_summary_api_histories__history_id__jobs_summary_get: {
         parameters: {
             query?: {

client/src/components/History/Content/model/states.ts

@@ -40,7 +40,7 @@ export type State =
     | "new_populated_state"
     | "inaccessible";
 
-interface StateRepresentation {
+export interface StateRepresentation {
     status: "success" | "warning" | "info" | "danger" | "secondary";
     text?: string;
     displayName?: string;

client/src/components/History/Graph/HistoryGraphView.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { faBezierCurve, faProjectDiagram, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton, BButtonGroup } from "bootstrap-vue";
+import { computed, ref, toRef } from "vue";
+
+import GraphDetails from "@/components/Graph/GraphDetails.vue";
+import GraphView from "@/components/Graph/GraphView.vue";
+import type { GraphNode } from "@/components/Graph/types";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+import { buildDetails } from "./historyGraphMapper";
+import { useHistoryGraphData } from "./useHistoryGraphData";
+import { type EdgeStyle, useHistoryGraphLayout } from "./useHistoryGraphLayout";
+
+interface Props {
+    historyId: string;
+    seedNodeId?: string;
+}
+
+const props = defineProps<Props>();
+
+// Fetch params — product decisions owned here
+const limit = ref(500);
+const includeDeleted = ref(false);
+
+const { graphData, loading, error } = useHistoryGraphData(
+    toRef(props, "historyId"),
+    limit,
+    includeDeleted,
+    toRef(props, "seedNodeId"),
+);
+
+// Layout
+const edgeStyle = ref<EdgeStyle>("orthogonal");
+const { layout, layoutLoading } = useHistoryGraphLayout(graphData, edgeStyle);
+
+// Selection
+const selectedNode = ref<GraphNode | null>(null);
+const selectedDetails = computed(() => {
+    if (!selectedNode.value) {
+        return [];
+    }
+    return buildDetails(selectedNode.value);
+});
+
+function onNodeSelected(node: GraphNode | null) {
+    selectedNode.value = node;
+}
+
+const isLoading = computed(() => loading.value || layoutLoading.value);
+const isTruncated = computed(() => {
+    const t = graphData.value?.truncated;
+    return t?.item_count_capped || t?.tool_request_count_capped || (t?.tool_requests_omitted ?? 0) > 0;
+});
+</script>
+
+<template>
+    <div class="history-graph-view">
+        <LoadingSpan v-if="isLoading" message="Loading history graph" />
+
+        <div v-else-if="error" class="history-graph-error alert alert-danger m-3">{{ error }}</div>
+
+        <template v-else>
+            <div class="history-graph-toolbar">
+                <BButtonGroup size="sm">
+                    <BButton
+                        :pressed="edgeStyle === 'orthogonal'"
+                        variant="outline-primary"
+                        title="Orthogonal edges"
+                        @click="edgeStyle = 'orthogonal'">
+                        <FontAwesomeIcon :icon="faProjectDiagram" />
+                    </BButton>
+                    <BButton
+                        :pressed="edgeStyle === 'curved'"
+                        variant="outline-primary"
+                        title="Curved edges"
+                        @click="edgeStyle = 'curved'">
+                        <FontAwesomeIcon :icon="faBezierCurve" />
+                    </BButton>
+                </BButtonGroup>
+                <BButtonGroup size="sm" class="ml-2">
+                    <BButton
+                        :pressed="includeDeleted"
+                        variant="outline-primary"
+                        title="Show deleted items"
+                        @click="includeDeleted = !includeDeleted">
+                        <FontAwesomeIcon :icon="faTrash" />
+                    </BButton>
+                </BButtonGroup>
+            </div>
+            <GraphView
+                :layout="layout"
+                :focus-node-id="seedNodeId ?? null"
+                :edge-style="edgeStyle"
+                @node-selected="onNodeSelected" />
+            <GraphDetails :node="selectedNode" :details="selectedDetails" />
+            <div v-if="isTruncated" class="history-graph-truncation">
+                Showing a partial graph. Not all connections are visible.
+            </div>
+        </template>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "@/style/scss/theme/blue.scss";
+
+.history-graph-view {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 400px;
+}
+
+.history-graph-toolbar {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    z-index: 20;
+}
+
+.history-graph-truncation {
+    padding: 0.375rem 1rem;
+    background: $state-warning-bg;
+    color: $state-warning-text;
+    font-size: $h6-font-size;
+    text-align: center;
+    border-top: 1px solid $state-warning-border;
+}
+
+/* Tool request nodes use primary header (no dataset state) */
+:deep(.node-tool-request) .graph-node-header {
+    background: $brand-primary;
+    color: $white;
+}
+
+/* Dataset/collection nodes use state-driven coloring via data-state attribute */
+:deep(.node-dataset) .graph-node-header,
+:deep(.node-collection) .graph-node-header {
+    color: $text-color;
+}
+
+:deep(.edge-collection) {
+    stroke: $brand-info;
+    stroke-dasharray: 6 3;
+}
+
+:deep(.edge-dataset) {
+    stroke: $brand-primary;
+}
+</style>