@prefecthq/graphs 2.2.4 → 2.2.6

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

@@ -16,8 +16,8 @@ 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_ROOT_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;
+export declare const DEFAULT_ROOT_EVENT_Z_INDEX = 3;
+export declare const DEFAULT_ROOT_ARTIFACT_Z_INDEX = 4;

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

@@ -0,0 +1,3 @@
+import { Sprite } from 'pixi.js';
+import { CircleStyle } from '../textures/circle';
+export declare function circleFactory(style: CircleStyle): Promise<Sprite>;

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

@@ -4,4 +4,5 @@ export declare function dataFactory(runId: string, callback: DataCallback): Prom
     start: () => Promise<void>;
     stop: () => void;
 }>;
+export declare function getIntervalForDataSize(data: RunGraphData): number;
 export {};

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

@@ -0,0 +1,9 @@
+import { Container } from 'pixi.js';
+import { RunGraphEvent } from '../models';
+export type EventFactory = Awaited<ReturnType<typeof eventFactory>>;
+export declare function eventFactory(event: RunGraphEvent): Promise<{
+    element: Container<import("pixi.js").DisplayObject>;
+    render: () => void;
+    getId: () => string;
+    getDate: () => Date;
+}>;

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

@@ -0,0 +1,12 @@
+import { Container } from 'pixi.js';
+export type EventClusterFactory = Awaited<ReturnType<typeof eventClusterFactory>>;
+export type EventClusterFactoryRenderProps = {
+    ids: string[];
+    date: Date;
+};
+export declare function eventClusterFactory(): Promise<{
+    element: Container<import("pixi.js").DisplayObject>;
+    render: (props?: EventClusterFactoryRenderProps) => Promise<void>;
+    getIds: () => string[];
+    getDate: () => Date | null;
+}>;

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

@@ -0,0 +1,7 @@
+import { RunGraphEvent } from '../models';
+type EventDataCallback = (data: RunGraphEvent[]) => void;
+export declare function eventDataFactory(runId: string, callback: EventDataCallback): Promise<{
+    start: () => Promise<void>;
+    stop: () => void;
+}>;
+export {};

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

@@ -0,0 +1,17 @@
+import { EventFactory } from '../factories/event';
+import { EventClusterFactory } from '../factories/eventCluster';
+import { RunGraphEvent } from '../models';
+export type FlowRunEventFactory = Awaited<ReturnType<typeof flowRunEventFactory>>;
+type EventFactoryOptions = {
+    type: 'event';
+    event: RunGraphEvent;
+} | {
+    type: 'cluster';
+};
+type EventFactoryType<T> = T extends {
+    type: 'event';
+} ? EventFactory : T extends {
+    type: 'cluster';
+} ? EventClusterFactory : never;
+export declare function flowRunEventFactory<T extends EventFactoryOptions>(options: T): Promise<EventFactoryType<T>>;
+export {};

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

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

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

@@ -1,5 +1,5 @@
 import { ColorSource } from 'pixi.js';
-import { RunGraphArtifact } from '../models';
+import { RunGraphArtifact, RunGraphEvent } from '../models';
 import { GraphItemSelection } from '../models/selection';
 import { RunGraphStateEvent, StateType } from '../models/states';
 import { ViewportDateRange } from '../models/viewport';
@@ -16,6 +16,7 @@ export type RunGraphData = {
     nodes: RunGraphNodes;
     artifacts?: RunGraphArtifact[];
     states?: RunGraphStateEvent[];
+    events?: RunGraphEvent[];
 };
 export type RunGraphNodes = Map<string, RunGraphNode>;
 export type RunGraphNode = {
@@ -36,6 +37,7 @@ export declare const runGraphNodeKinds: readonly ["flow-run", "task-run"];
 export type RunGraphNodeKind = typeof runGraphNodeKinds[number];
 export declare function isRunGraphNodeType(value: unknown): value is RunGraphNodeKind;
 export type RunGraphFetch = (runId: string) => RunGraphData | Promise<RunGraphData>;
+export type RunGraphFetchEvents = (runId: string) => RunGraphEvent[] | Promise<RunGraphEvent[]>;
 export type RunGraphNodeStyles = {
     background?: ColorSource;
 };
@@ -77,6 +79,12 @@ export type RunGraphStyles = {
     flowStateBarHeight?: number;
     flowStateSelectedBarHeight?: number;
     flowStateAreaAlpha?: number;
+    eventTargetSize?: number;
+    eventSelectedBorderInset?: number;
+    eventRadiusDefault?: number;
+    eventColor?: ColorSource;
+    eventClusterRadiusDefault?: number;
+    eventClusterColor?: ColorSource;
     guideLineWidth?: number;
     guideLineColor?: ColorSource;
     guideTextTopPadding?: number;
@@ -91,6 +99,7 @@ export type RunGraphStyles = {
 export type RunGraphConfig = {
     runId: string;
     fetch: RunGraphFetch;
+    fetchEvents?: RunGraphFetchEvents;
     animationDuration?: number;
     styles?: RunGraphStyles;
     disableAnimationsThreshold?: number;

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

@@ -0,0 +1,21 @@
+export type RunGraphEventResource = {
+    'prefect.resource.id': string;
+    'prefect.resource.role'?: string;
+    'prefect.resource.name'?: string;
+    'prefect.name'?: string;
+    'prefect-cloud.name'?: string;
+} & Record<string, string | undefined>;
+export type EventRelatedResource = RunGraphEventResource & {
+    'prefect.resource.role': string;
+};
+export type RunGraphEvent = {
+    id: string;
+    occurred: Date;
+    account: string;
+    event: string;
+    payload: unknown;
+    received: Date;
+    related: EventRelatedResource[];
+    resource: EventRelatedResource;
+    workspace: string | null;
+};

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

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

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

@@ -17,6 +17,7 @@ export type LayoutSettings = {
     disableGuides: boolean;
     disableEdges: boolean;
     disableArtifacts: boolean;
+    disableEvents: boolean;
     isTemporal: () => boolean;
     isDependency: () => boolean;
     isWaterfall: () => boolean;

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

@@ -26,4 +26,18 @@ export interface StateSelection extends RunGraphStateEvent {
     position?: GraphSelectionPosition;
 }
 export declare function isStateSelection(selection: GraphItemSelection): selection is StateSelection;
-export type GraphItemSelection = NodeSelection | ArtifactSelection | ArtifactsSelection | StateSelection;
+export type EventSelection = {
+    id: string;
+    occurred: Date;
+    kind: 'event';
+    position?: GraphSelectionPosition;
+};
+export declare function isEventSelection(selection: GraphItemSelection): selection is EventSelection;
+export type EventsSelection = {
+    kind: 'events';
+    occurred: Date | null;
+    ids: string[];
+    position?: GraphSelectionPosition;
+};
+export declare function isEventsSelection(selection: GraphItemSelection): selection is EventsSelection;
+export type GraphItemSelection = NodeSelection | ArtifactSelection | ArtifactsSelection | StateSelection | EventSelection | EventsSelection;

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

@@ -3,6 +3,7 @@ import { Viewport } from 'pixi-viewport';
 import { Application, Container } from 'pixi.js';
 import { EffectScope } from 'vue';
 import { HorizontalScale } from '../factories/position';
+import { RunGraphEvent } from '../models';
 import { LayoutSettings } from '../models/layout';
 import { RequiredGraphConfig, RunGraphData } from '../models/RunGraph';
 import { GraphItemSelection } from '../models/selection';
@@ -32,6 +33,8 @@ type Events = {
     edgeCullCreated: VisibilityCull;
     runDataCreated: RunGraphData;
     runDataUpdated: RunGraphData;
+    eventDataCreated: RunGraphEvent[];
+    eventDataUpdated: RunGraphEvent[];
     itemSelected: GraphItemSelection | null;
     layoutUpdated: void;
     toggleCullCreated: VisibilityCull;

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

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

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

@@ -10,6 +10,7 @@ export declare const layout: {
     disableGuides: boolean;
     disableEdges: boolean;
     disableArtifacts: boolean;
+    disableEvents: boolean;
     isTemporal: () => boolean;
     isDependency: () => boolean;
     isWaterfall: () => boolean;
@@ -27,3 +28,4 @@ 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;
+export declare function setDisabledEvents(value: boolean): void;

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

@@ -0,0 +1,5 @@
+import { RenderTexture } from 'pixi.js';
+export type CircleStyle = {
+    radius: number;
+};
+export declare function getCircleTexture(style: CircleStyle): Promise<RenderTexture>;

package/dist/types/src/utilities/detectHorizontalCollisions.d.ts

@@ -0,0 +1,21 @@
+import { Container } from 'pixi.js';
+type ItemFactory = {
+    element: Container;
+    getId: () => string;
+    getDate: () => Date;
+} & Record<string, unknown>;
+type ClusterFactory = {
+    element: Container;
+    getIds: () => string[];
+    getDate: () => Date | null;
+    render: (props: {
+        ids: string[];
+        date: Date;
+    }) => void;
+} & Record<string, unknown>;
+type ClusterHorizontalCollisionsProps = {
+    items: Map<string, ItemFactory | ClusterFactory>;
+    createCluster: () => Promise<ClusterFactory>;
+};
+export declare function clusterHorizontalCollisions({ items, createCluster }: ClusterHorizontalCollisionsProps): Promise<void>;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prefecthq/graphs",
   "private": false,
-  "version": "2.2.4",
+  "version": "2.2.6",
   "description": "Large scale graphs designed for Prefect",
   "scripts": {
     "serve": "vite --host --mode=demo",
@@ -52,7 +52,7 @@
     "tailwindcss": "3.4.1",
     "tsc-alias": "1.8.8",
     "typescript": "5.3.3",
-    "vite": "5.1.1",
+    "vite": "5.1.5",
     "vite-svg-loader": "^5.1.0",
     "vue-tsc": "1.8.27"
   },