AP-25491: Introduce a WebGL-rendered AI Annotation Skeleton

This replaces the static HTML-based `SkeletonAnnotation` with a
WebGL-based `AISkeletonAnnotation` rendered directly in canvas.

Author: iusethemouse

org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/Workflow.vue

@@ -15,6 +15,7 @@ import { useWorkflowStore } from "@/store/workflow/workflow";
 import type { ContainerInst } from "@/vue3-pixi";
 
 import SelectionRectangle from "./SelectionRectangle/SelectionRectangle.vue";
+import AISkeletonAnnotation from "./ai/AISkeletonAnnotation.vue";
 import StaticWorkflowAnnotation from "./annotations/StaticWorkflowAnnotation.vue";
 import Connector from "./connectors/Connector.vue";
 import ConnectorLabel from "./connectors/ConnectorLabel.vue";
@@ -125,6 +126,8 @@ const annotations = computed(
       />
     </Container>
 
+    <AISkeletonAnnotation />
+
     <MetanodePortBars
       v-if="
         activeWorkflow!.info.containerType ===

org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/WorkflowCanvas.vue

@@ -17,8 +17,6 @@ import { useAddNodeViaFileUpload } from "@/components/nodeTemplates/useAddNodeVi
 import { isBrowser } from "@/environment";
 import { KANVAS_ID } from "@/lib/workflow-canvas";
 import { useAnalytics } from "@/services/analytics";
-import { useAiQuickActionsStore } from "@/store/ai/aiQuickActions";
-import { QuickActionId } from "@/store/ai/types";
 import { useCanvasStateTrackingStore } from "@/store/application/canvasStateTracking";
 import { useLifecycleStore } from "@/store/application/lifecycle";
 import { useWebGLCanvasStore } from "@/store/canvas/canvas-webgl";
@@ -31,7 +29,6 @@ import { useArrowKeyNavigation } from "../useArrowKeyNavigation";
 
 import Workflow from "./Workflow.vue";
 import EditableWorkflowAnnotation from "./annotations/EditableWorkflowAnnotation.vue";
-import SkeletonAnnotation from "./annotations/SkeletonAnnotation.vue";
 import { usePointerDownDoubleClick } from "./common/usePointerDownDoubleClick";
 import FloatingCanvasTools from "./floatingToolbar/canvasTools/FloatingCanvasTools.vue";
 import Kanvas from "./kanvas/Kanvas.vue";
@@ -44,18 +41,11 @@ const { isLoadingWorkflow } = storeToRefs(useLifecycleStore());
 const { activeWorkflow, isWorkflowEmpty, isWritable } = storeToRefs(
   useWorkflowStore(),
 );
-const aiQuickActionsStore = useAiQuickActionsStore();
 const canvasStore = useWebGLCanvasStore();
 
 const { containerSize, shouldHideMiniMap, interactionsEnabled } =
   storeToRefs(canvasStore);
 
-const skeletonAnnotationData = computed(
-  () =>
-    aiQuickActionsStore.processingActions[QuickActionId.GenerateAnnotation] ??
-    null,
-);
-
 const { isPointerDownDoubleClick } = usePointerDownDoubleClick({
   eventHandledChecker: (event) => isMarkedEvent(event),
 });
@@ -264,11 +254,6 @@ const onCanvasDrop = (event: DragEvent) => {
 
     <EditableWorkflowAnnotation />
 
-    <SkeletonAnnotation
-      v-if="skeletonAnnotationData"
-      :bounds="skeletonAnnotationData.bounds"
-    />
-
     <NodeNameEditor />
 
     <NodeLabelEditor />

org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/ai/AISkeletonAnnotation.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { useAiQuickActionsStore } from "@/store/ai/aiQuickActions";
+import { QuickActionId } from "@/store/ai/types";
+import * as $colors from "@/style/colors";
+import * as $shapes from "@/style/shapes";
+import type { GraphicsInst } from "@/vue3-pixi";
+import BorderWithRotatingGradient from "../common/BorderWithRotatingGradient.vue";
+import {
+  type GlowConfig,
+  type GradientStop,
+} from "../common/renderGradientBorder";
+
+const aiQuickActionsStore = useAiQuickActionsStore();
+const bounds = computed(
+  () =>
+    aiQuickActionsStore.processingActions[QuickActionId.GenerateAnnotation]
+      ?.bounds ?? null,
+);
+
+// Border with rotating gradient and teal glow
+const { Cyan, Yellow, Teal } = $colors.aiGradient;
+const gradient: GradientStop[] = [
+  { position: 0, color: Cyan },
+  { position: 0.25, color: Yellow },
+  { position: 0.47, color: Teal },
+  { position: 0.75, color: Yellow },
+  { position: 1, color: Cyan },
+];
+
+const borderStrokeWidth = $shapes.annotationBorderWidth;
+const glowConfig: GlowConfig = {
+  gradientStopIndex: 2, // teal
+  softness: 60,
+  spread: 0.7,
+};
+const secondsPerRotation = 1.2;
+const borderRadius = 0;
+
+// Text skeletons. SkeletonItem from @knime/components doesn't have a WebGL equivalent,
+// so we simply draw these as rounded rectangles here directly.
+const skeletonColor = $colors.GrayUltraLight;
+
+const padding = 10;
+const skeletonPadding = borderStrokeWidth + padding;
+const skeletonGap = 10;
+const skeletonBorderRadius = 2;
+
+const skeletonHeadingHeight = 16;
+const skeletonBodyHeight = 13;
+
+const skeletonHeadingRelativeWidth = 0.6;
+const skeletonBodyRelativeWidth = 0.9;
+
+const renderSkeletonBars = (graphics: GraphicsInst) => {
+  if (!bounds.value) {
+    return;
+  }
+
+  const totalWidth = bounds.value.width - 2 * skeletonPadding;
+
+  graphics.clear();
+
+  // Heading bar
+  graphics.roundRect(
+    skeletonPadding,
+    skeletonPadding,
+    totalWidth * skeletonHeadingRelativeWidth,
+    skeletonHeadingHeight,
+    skeletonBorderRadius,
+  );
+  graphics.fill(skeletonColor);
+
+  // Body bar
+  graphics.roundRect(
+    skeletonPadding,
+    skeletonPadding + skeletonHeadingHeight + skeletonGap,
+    totalWidth * skeletonBodyRelativeWidth,
+    skeletonBodyHeight,
+    skeletonBorderRadius,
+  );
+  graphics.fill(skeletonColor);
+};
+</script>
+
+<template>
+  <Container
+    v-if="bounds"
+    label="AISkeletonAnnotation"
+    :x="bounds.x"
+    :y="bounds.y"
+  >
+    <BorderWithRotatingGradient
+      :width="bounds.width"
+      :height="bounds.height"
+      :stroke-width="borderStrokeWidth"
+      :gradient="gradient"
+      :glow-config="glowConfig"
+      :seconds-per-rotation="secondsPerRotation"
+      :border-radius="borderRadius"
+    />
+
+    <Graphics
+      label="SkeletonBars"
+      event-mode="none"
+      @render="renderSkeletonBars"
+    />
+  </Container>
+</template>

org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/annotations/SkeletonAnnotation.vue

@@ -0,0 +1,75 @@
+<!-- eslint-disable no-undefined -->
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+import { BlurFilter, type Graphics } from "pixi.js";
+
+import type { GlowConfig, GradientStop } from "./renderGradientBorder";
+import { drawGlowCutout, renderGradientBorder } from "./renderGradientBorder";
+
+type Props = {
+  width: number;
+  height: number;
+  strokeWidth: number;
+  gradient: GradientStop[];
+  secondsPerRotation: number;
+  borderRadius: number;
+  glowConfig?: GlowConfig;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  glowConfig: undefined,
+});
+
+const borderRef = useTemplateRef<Graphics>("borderRef");
+const glowDotsRef = useTemplateRef<Graphics>("glowDotsRef");
+
+const glowBlur = props.glowConfig
+  ? new BlurFilter({
+      strength: props.glowConfig.softness,
+      quality: 4,
+    })
+  : null;
+
+const renderGlowCutout = (g: Graphics) =>
+  drawGlowCutout(
+    g,
+    props.strokeWidth,
+    props.width,
+    props.height,
+    props.borderRadius,
+  );
+
+renderGradientBorder({
+  config: {
+    width: props.width,
+    height: props.height,
+    strokeWidth: props.strokeWidth,
+    gradient: props.gradient,
+    glowConfig: props.glowConfig,
+    secondsPerRotation: props.secondsPerRotation,
+    borderRadius: props.borderRadius,
+  },
+  refs: { borderRef, glowDotsRef },
+});
+</script>
+
+<template>
+  <Container label="BorderWithRotatingGradient" event-mode="none">
+    <Graphics ref="borderRef" label="RotatingGradient" event-mode="none" />
+
+    <Container v-if="glowBlur" label="Glow">
+      <Graphics
+        ref="glowDotsRef"
+        label="GlowDots"
+        event-mode="none"
+        :filters="[glowBlur]"
+      />
+      <Graphics
+        label="GlowCutout"
+        event-mode="none"
+        blend-mode="erase"
+        @render="renderGlowCutout"
+      />
+    </Container>
+  </Container>
+</template>