@prefecthq/graphs 2.1.8 → 2.2.0

package/dist/types/src/components/RunGraph.vue.d.ts

@@ -1,5 +1,5 @@
 import { RunGraphProps } from '../models/RunGraph';
-import { NodeSelection } from '../models/selection';
+import { GraphItemSelection } from '../models/selection';
 import { ViewportDateRange } from '../models/viewport';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<RunGraphProps>, {
     fullscreen: null;
@@ -7,16 +7,16 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:viewport": (value: ViewportDateRange) => void;
     "update:fullscreen": (value: boolean) => void;
-    "update:selected": (value: NodeSelection | null) => void;
+    "update:selected": (value: GraphItemSelection | null) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<RunGraphProps>, {
     fullscreen: null;
     selected: null;
 }>>> & {
     "onUpdate:viewport"?: ((value: ViewportDateRange) => any) | undefined;
     "onUpdate:fullscreen"?: ((value: boolean) => any) | undefined;
-    "onUpdate:selected"?: ((value: NodeSelection | null) => any) | undefined;
+    "onUpdate:selected"?: ((value: GraphItemSelection | null) => any) | undefined;
 }, {
-    selected: NodeSelection | null;
+    selected: GraphItemSelection | null;
     fullscreen: boolean | null;
 }, {}>;
 export default _default;

package/dist/types/src/consts.d.ts

@@ -5,12 +5,19 @@ export declare const DEFAULT_TIME_COLUMN_SPAN_SECONDS = 1;
 export declare const DEFAULT_TIME_COLUMN_SIZE_PIXELS = 20;
 export declare const DEFAULT_LINEAR_COLUMN_SIZE_PIXELS = 200;
 export declare const DEFAULT_LABEL_CULLING_THRESHOLD = 0.2;
+export declare const DEFAULT_ICON_CULLING_THRESHOLD = 0.2;
 export declare const DEFAULT_TOGGLE_CULLING_THRESHOLD = 0.2;
 export declare const DEFAULT_EDGE_CULLING_THRESHOLD = 0.1;
 export declare const DEFAULT_TEXTURE_RESOLUTION = 10;
+export declare const DEFAULT_TEXT_RESOLUTION = 4;
 export declare const DEFAULT_EDGE_POINTS = 20;
 export declare const DEFAULT_EDGE_MINIMUM_BEZIER = 64;
 export declare const DEFAULT_HORIZONTAL_SCALE_MULTIPLIER = 0.25;
 export declare const DEFAULT_HORIZONTAL_SCALE = 1;
 export declare const DEFAULT_GUIDES_COUNT = 30;
 export declare const DEFAULT_GUIDES_MIN_GAP = 260;
+export declare const DEFAULT_ROOT_ARTIFACT_BOTTOM_OFFSET = 10;
+export declare const DEFAULT_ROOT_ARTIFACT_COLLISION_THROTTLE = 250;
+export declare const DEFAULT_VIEWPORT_Z_INDEX = 1;
+export declare const DEFAULT_ROOT_FLOW_STATE_Z_INDEX = 2;
+export declare const DEFAULT_ROOT_ARTIFACT_Z_INDEX = 3;

package/dist/types/src/factories/artifact.d.ts

@@ -0,0 +1,14 @@
+import { Container } from 'pixi.js';
+import { Artifact } from '../models/artifact';
+export type ArtifactFactory = Awaited<ReturnType<typeof artifactFactory>>;
+type ArtifactFactoryOptions = {
+    cullAtZoomThreshold?: boolean;
+};
+export declare function artifactFactory(artifact: Artifact, { cullAtZoomThreshold }?: ArtifactFactoryOptions): Promise<{
+    element: Container<import("pixi.js").DisplayObject>;
+    render: () => Promise<void>;
+    getSelected: () => boolean;
+    getDate: () => Date;
+    getId: () => string;
+}>;
+export {};

package/dist/types/src/factories/artifactBar.d.ts

@@ -0,0 +1,11 @@
+import { Container } from 'pixi.js';
+type ArtifactBarFactoryRenderProps = {
+    selected: boolean;
+    width: number;
+    height: number;
+};
+export declare function artifactBarFactory(): Promise<{
+    element: Container<import("pixi.js").DisplayObject>;
+    render: ({ selected, width, height }: ArtifactBarFactoryRenderProps) => Promise<Container>;
+}>;
+export {};

package/dist/types/src/factories/artifactCluster.d.ts

@@ -0,0 +1,13 @@
+export type ArtifactClusterFactory = Awaited<ReturnType<typeof artifactClusterFactory>>;
+export type ArtifactClusterFactoryRenderProps = {
+    ids: string[];
+    date: Date;
+};
+export declare function artifactClusterFactory(): Promise<{
+    element: import("pixi.js").Container<import("pixi.js").DisplayObject>;
+    render: (props?: ArtifactClusterFactoryRenderProps) => Promise<void>;
+    getSelected: () => boolean;
+    getDate: () => Date | null;
+    getIds: () => string[];
+    isCluster: boolean;
+}>;

package/dist/types/src/factories/artifactNode.d.ts

@@ -0,0 +1,15 @@
+import { Container } from 'pixi.js';
+import { ArtifactType } from '../models';
+type ArtifactNodeFactoryOptions = {
+    cullAtZoomThreshold?: boolean;
+};
+type ArtifactNodeFactoryRenderOptions = {
+    selected?: boolean;
+    name?: string;
+    type?: ArtifactType;
+};
+export declare function artifactNodeFactory({ cullAtZoomThreshold }: ArtifactNodeFactoryOptions): Promise<{
+    element: Container<import("pixi.js").DisplayObject>;
+    render: (options?: ArtifactNodeFactoryRenderOptions) => Promise<Container>;
+}>;
+export {};

package/dist/types/src/factories/flowRunArtifact.d.ts

@@ -0,0 +1,17 @@
+import { ArtifactFactory } from '../factories/artifact';
+import { ArtifactClusterFactory } from '../factories/artifactCluster';
+import { Artifact } from '../models';
+export type FlowRunArtifactFactory = Awaited<ReturnType<typeof flowRunArtifactFactory>>;
+type ArtifactFactoryOptions = {
+    type: 'artifact';
+    artifact: Artifact;
+} | {
+    type: 'cluster';
+};
+type FactoryType<T> = T extends {
+    type: 'artifact';
+} ? ArtifactFactory : T extends {
+    type: 'cluster';
+} ? ArtifactClusterFactory : never;
+export declare function flowRunArtifactFactory<T extends ArtifactFactoryOptions>(options: T): Promise<FactoryType<T>>;
+export {};

package/dist/types/src/factories/flowRunArtifacts.d.ts

@@ -0,0 +1,4 @@
+import { Artifact } from '../models';
+export declare function flowRunArtifactsFactory(): Promise<{
+    render: (newData?: Artifact[]) => Promise<void>;
+}>;

package/dist/types/src/factories/flowRunState.d.ts

@@ -0,0 +1,11 @@
+import { Container } from 'pixi.js';
+import { StateEvent } from '../models/states';
+export type FlowRunStateFactory = Awaited<ReturnType<typeof flowRunStateFactory>>;
+type FlowRunStateFactoryOptions = {
+    end: Date;
+};
+export declare function flowRunStateFactory(state: StateEvent, options?: FlowRunStateFactoryOptions): Promise<{
+    element: Container<import("pixi.js").DisplayObject>;
+    render: (newOptions?: FlowRunStateFactoryOptions) => void;
+}>;
+export {};

package/dist/types/src/factories/flowRunStates.d.ts

@@ -0,0 +1,6 @@
+import { Container } from 'pixi.js';
+import { StateEvent } from '../models/states';
+export declare function flowRunStatesFactory(): {
+    element: Container<import("pixi.js").DisplayObject>;
+    render: (newStateData?: StateEvent[]) => Promise<void>;
+};

package/dist/types/src/factories/icon.d.ts

@@ -0,0 +1,10 @@
+import { Sprite } from 'pixi.js';
+import { IconName } from '../models/icon';
+type IconFactoryOptions = {
+    cullAtZoomThreshold?: boolean;
+};
+export declare function iconFactory({ cullAtZoomThreshold }?: IconFactoryOptions): Promise<{
+    element: Sprite;
+    render: (icon: IconName) => Promise<Sprite>;
+}>;
+export {};

package/dist/types/src/factories/label.d.ts

@@ -1,5 +1,9 @@
 import { BitmapText } from 'pixi.js';
-export declare function nodeLabelFactory(): Promise<{
+type NodeLabelFactoryOptions = {
+    cullAtZoomThreshold?: boolean;
+};
+export declare function nodeLabelFactory({ cullAtZoomThreshold }?: NodeLabelFactoryOptions): Promise<{
     element: BitmapText;
     render: (text: string) => Promise<BitmapText>;
 }>;
+export {};

package/dist/types/src/factories/node.d.ts

@@ -1,3 +1,4 @@
+import { Container } from 'pixi.js';
 import { BoundsContainer } from '../models/boundsContainer';
 import { Pixels } from '../models/layout';
 import { RunGraphNode } from '../models/RunGraph';
@@ -5,6 +6,6 @@ export type NodeContainerFactory = Awaited<ReturnType<typeof nodeContainerFactor
 export declare function nodeContainerFactory(node: RunGraphNode): Promise<{
     element: BoundsContainer;
     render: (node: RunGraphNode) => Promise<BoundsContainer>;
-    bar: import("pixi.js").Container<import("pixi.js").DisplayObject>;
+    bar: Container<import("pixi.js").DisplayObject>;
     setPosition: ({ x, y }: Pixels) => void;
 }>;

package/dist/types/src/factories/selectedBorder.d.ts

@@ -0,0 +1,11 @@
+import { Container } from 'pixi.js';
+type SelectedBorderFactoryRenderProps = {
+    selected: boolean;
+    width: number;
+    height: number;
+};
+export declare function selectedBorderFactory(): Promise<{
+    element: Container<import("pixi.js").DisplayObject>;
+    render: ({ selected, width, height }: SelectedBorderFactoryRenderProps) => Promise<Container>;
+}>;
+export {};

package/dist/types/src/models/RunGraph.d.ts

@@ -1,18 +1,21 @@
 import { ColorSource } from 'pixi.js';
-import { NodeSelection } from '../models/selection';
-import { StateType } from '../models/states';
+import { Artifact } from '../models';
+import { GraphItemSelection } from '../models/selection';
+import { StateEvent, StateType } from '../models/states';
 import { ViewportDateRange } from '../models/viewport';
 export type RunGraphProps = {
     config: RunGraphConfig;
     viewport?: ViewportDateRange;
     fullscreen?: boolean | null;
-    selected?: NodeSelection | null;
+    selected?: GraphItemSelection | null;
 };
 export type RunGraphData = {
     root_node_ids: string[];
     start_time: Date;
     end_time: Date | null;
     nodes: RunGraphNodes;
+    artifacts?: Artifact[];
+    state_events?: StateEvent[];
 };
 export type RunGraphNodes = Map<string, RunGraphNode>;
 export type RunGraphNode = {
@@ -24,6 +27,7 @@ export type RunGraphNode = {
     end_time: Date | null;
     parents: RunGraphEdge[];
     children: RunGraphEdge[];
+    artifacts?: Artifact[];
 };
 export type RunGraphEdge = {
     id: string;
@@ -35,12 +39,19 @@ export type RunGraphFetch = (runId: string) => RunGraphData | Promise<RunGraphDa
 export type RunGraphNodeStyles = {
     background?: ColorSource;
 };
+export type RunGraphStateStyles = {
+    background?: ColorSource;
+};
 export type RunGraphStyles = {
     colorMode: 'dark' | 'light';
     rowGap?: number;
     columnGap?: number;
     textDefault?: ColorSource;
     textInverse?: ColorSource;
+    selectedBorderColor?: ColorSource;
+    selectedBorderWidth?: number;
+    selectedBorderOffset?: number;
+    selectedBorderRadius?: number;
     nodesPadding?: number;
     nodeHeight?: number;
     nodePadding?: number;
@@ -50,9 +61,21 @@ export type RunGraphStyles = {
     nodeToggleSize?: number;
     nodeToggleBorderRadius?: number;
     nodeToggleBorderColor?: ColorSource;
-    nodeSelectedBorderColor?: ColorSource;
     nodeUnselectedAlpha?: number;
     edgeColor?: ColorSource;
+    artifactsGap?: number;
+    artifactsNodeOverlap?: number;
+    artifactPaddingLeft?: number;
+    artifactPaddingRight?: number;
+    artifactPaddingY?: number;
+    artifactTextColor?: ColorSource;
+    artifactBgColor?: ColorSource;
+    artifactBorderRadius?: number;
+    artifactContentGap?: number;
+    artifactIconSize?: number;
+    artifactIconColor?: ColorSource;
+    flowStateBarHeight?: number;
+    flowStateAreaAlpha?: number;
     guideLineWidth?: number;
     guideLineColor?: ColorSource;
     guideTextTopPadding?: number;
@@ -62,6 +85,7 @@ export type RunGraphStyles = {
     playheadWidth?: number;
     playheadColor?: ColorSource;
     node?: (node: RunGraphNode) => RunGraphNodeStyles;
+    state?: (state: StateEvent) => RunGraphStateStyles;
 };
 export type RunGraphConfig = {
     runId: string;

package/dist/types/src/models/artifact.d.ts

@@ -0,0 +1,14 @@
+export declare const artifactTypes: readonly ["result", "markdown", "table", "unknown"];
+export type ArtifactType = typeof artifactTypes[number];
+export type Artifact = {
+    id: string;
+    created: Date;
+    key: string;
+    type: ArtifactType;
+};
+export declare const artifactTypeIconMap: {
+    readonly markdown: "ArtifactMarkdown";
+    readonly table: "ArtifactTable";
+    readonly result: "ArtifactResult";
+    readonly unknown: "Artifact";
+};

package/dist/types/src/models/icon.d.ts

@@ -0,0 +1,2 @@
+import * as prefectIcons from '../textures/icons';
+export type IconName = keyof typeof prefectIcons;

package/dist/types/src/models/index.d.ts

@@ -1,3 +1,4 @@
+export * from './artifact';
 export * from './RunGraph';
 export * from './viewport';
 export * from './selection';

package/dist/types/src/models/layout.d.ts

@@ -13,9 +13,10 @@ export type LayoutSettings = {
     vertical: VerticalMode;
     horizontalScaleMultiplierDefault: number;
     horizontalScaleMultiplier: number;
-    disableEdges: boolean;
     disableAnimations: boolean;
     disableGuides: boolean;
+    disableEdges: boolean;
+    disableArtifacts: boolean;
     isTemporal: () => boolean;
     isDependency: () => boolean;
     isWaterfall: () => boolean;

package/dist/types/src/models/selection.d.ts

@@ -1,5 +1,17 @@
-import { RunGraphNode } from '../models/RunGraph';
+import { RunGraphNode } from '../models';
 export type NodeSelection = {
-    id: string;
     kind: RunGraphNode['kind'];
+    id: string;
+};
+export declare function isNodeSelection(selection: GraphItemSelection): selection is NodeSelection;
+export type ArtifactSelection = {
+    kind: 'artifact';
+    id: string;
+};
+export declare function isArtifactSelection(selection: GraphItemSelection): selection is ArtifactSelection;
+export type ArtifactsSelection = {
+    kind: 'artifacts';
+    ids: string[];
 };
+export declare function isArtifactsSelection(selection: GraphItemSelection): selection is ArtifactsSelection;
+export type GraphItemSelection = NodeSelection | ArtifactSelection | ArtifactsSelection;

package/dist/types/src/models/states.d.ts

@@ -1,2 +1,7 @@
 export declare const stateType: readonly ["COMPLETED", "RUNNING", "SCHEDULED", "PENDING", "FAILED", "CANCELLED", "CANCELLING", "CRASHED", "PAUSED"];
 export type StateType = typeof stateType[number];
+export type StateEvent = {
+    id: string;
+    occurred: Date;
+    type: StateType;
+};

package/dist/types/src/objects/culling.d.ts

@@ -7,4 +7,5 @@ export declare function uncull(): void;
 export declare function waitForCull(): Promise<Cull>;
 export declare function waitForEdgeCull(): Promise<VisibilityCull>;
 export declare function waitForLabelCull(): Promise<VisibilityCull>;
+export declare function waitForIconCull(): Promise<VisibilityCull>;
 export declare function waitForToggleCull(): Promise<VisibilityCull>;

package/dist/types/src/objects/events.d.ts

@@ -5,7 +5,7 @@ import { EffectScope } from 'vue';
 import { HorizontalScale } from '../factories/position';
 import { LayoutSettings } from '../models/layout';
 import { RequiredGraphConfig, RunGraphData } from '../models/RunGraph';
-import { NodeSelection } from '../models/selection';
+import { GraphItemSelection } from '../models/selection';
 import { ViewportDateRange } from '../models/viewport';
 import { Fonts } from '../objects/fonts';
 import { VisibilityCull } from '../services/visibilityCull';
@@ -18,6 +18,7 @@ type Events = {
     stageUpdated: HTMLDivElement;
     viewportCreated: Viewport;
     viewportDateRangeUpdated: ViewportDateRange;
+    viewportMoved: null;
     configCreated: RequiredGraphConfig;
     configUpdated: RequiredGraphConfig;
     scopeCreated: EffectScope;
@@ -27,10 +28,11 @@ type Events = {
     layoutSettingsCreated: LayoutSettings;
     cullCreated: Cull;
     labelCullCreated: VisibilityCull;
+    iconCullCreated: VisibilityCull;
     edgeCullCreated: VisibilityCull;
     runDataCreated: RunGraphData;
     runDataUpdated: RunGraphData;
-    nodeSelected: NodeSelection | null;
+    itemSelected: GraphItemSelection | null;
     layoutUpdated: void;
     toggleCullCreated: VisibilityCull;
 };

package/dist/types/src/objects/flowRunArtifacts.d.ts

@@ -0,0 +1,2 @@
+export declare function startFlowRunArtifacts(): Promise<void>;
+export declare function stopFlowRunArtifacts(): void;

package/dist/types/src/objects/flowRunStates.d.ts

@@ -0,0 +1,2 @@
+export declare function startFlowRunStates(): Promise<void>;
+export declare function stopFlowRunStates(): void;

package/dist/types/src/objects/selection.d.ts

@@ -1,6 +1,7 @@
-import { NodeSelection } from '../models/selection';
+import { GraphItemSelection, NodeSelection } from '../models/selection';
 export declare function startSelection(): Promise<void>;
 export declare function stopSelection(): void;
-export declare function selectNode(node: NodeSelection | null): void;
-export declare function isSelected(selection: NodeSelection | null): boolean;
-export declare function getSelected(): NodeSelection | null;
+export declare function selectItem(item: GraphItemSelection | null): void;
+export declare function isSelected(item: GraphItemSelection): boolean;
+export declare function getSelectedRunGraphNode(): NodeSelection | null;
+export declare function getSelected(): GraphItemSelection | null;

package/dist/types/src/objects/settings.d.ts

@@ -6,9 +6,10 @@ export declare const layout: {
     vertical: VerticalMode;
     horizontalScaleMultiplierDefault: number;
     horizontalScaleMultiplier: number;
-    disableEdges: boolean;
     disableAnimations: boolean;
     disableGuides: boolean;
+    disableEdges: boolean;
+    disableArtifacts: boolean;
     isTemporal: () => boolean;
     isDependency: () => boolean;
     isWaterfall: () => boolean;
@@ -25,3 +26,4 @@ export declare function setLayoutMode({ horizontal, vertical }: LayoutSettings):
 export declare function setHorizontalMode(mode: HorizontalMode): void;
 export declare function setVerticalMode(mode: VerticalMode): void;
 export declare function setDisabledEdges(value: boolean): void;
+export declare function setDisabledArtifacts(value: boolean): void;

package/dist/types/src/textures/icon.d.ts

@@ -0,0 +1,3 @@
+import { Texture } from 'pixi.js';
+import { IconName } from '../models/icon';
+export declare function getIconTexture(icon: IconName): Promise<Texture>;

package/dist/types/src/textures/icons/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Artifact } from './artifact.svg?url';
+export { default as ArtifactMarkdown } from './artifact-markdown.svg?url';
+export { default as ArtifactResult } from './artifact-result.svg?url';
+export { default as ArtifactTable } from './artifact-table.svg?url';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prefecthq/graphs",
   "private": false,
-  "version": "2.1.8",
+  "version": "2.2.0",
   "description": "Large scale graphs designed for Prefect",
   "scripts": {
     "serve": "vite --host --mode=demo",
@@ -42,34 +42,36 @@
     "@types/fontfaceobserver": "^2.1.2",
     "@types/lodash.isequal": "4.5.8",
     "@types/lodash.merge": "4.6.9",
+    "@types/lodash.throttle": "^4.1.9",
     "@types/node": "^20.1.7",
-    "@vitejs/plugin-vue": "4.5.1",
+    "@vitejs/plugin-vue": "5.0.4",
     "auto-changelog": "^2.4.0",
-    "autoprefixer": "10.4.16",
-    "eslint": "8.55.0",
-    "postcss": "8.4.32",
-    "tailwindcss": "3.3.5",
+    "autoprefixer": "10.4.17",
+    "eslint": "8.56.0",
+    "postcss": "8.4.35",
+    "tailwindcss": "3.4.1",
     "tsc-alias": "1.8.8",
-    "typescript": "5.3.2",
-    "vite": "5.0.5",
+    "typescript": "5.3.3",
+    "vite": "5.1.1",
     "vite-svg-loader": "^5.1.0",
-    "vue-tsc": "1.8.22"
+    "vue-tsc": "1.8.27"
   },
   "peerDependencies": {
-    "@prefecthq/prefect-design": "^2.0.1",
-    "@prefecthq/vue-compositions": "^1.5.9",
+    "@prefecthq/prefect-design": "^2.3.1",
+    "@prefecthq/vue-compositions": "^1.6.7",
     "vue": "^3.2.45",
     "vue-router": "^4.0.12"
   },
   "dependencies": {
     "@pixi-essentials/cull": "2.0.0",
     "d3": "7.8.5",
-    "date-fns": "2.30.0",
+    "date-fns": "3.3.1",
     "fontfaceobserver": "^2.3.0",
     "gsap": "^3.12.2",
     "lodash.isequal": "4.5.0",
     "lodash.merge": "4.6.2",
-    "pixi-viewport": "5.0.2",
+    "lodash.throttle": "^4.1.1",
+    "pixi-viewport": "5.0.1",
     "pixi.js": "7.3.2"
   }
 }