@cratis/components 0.1.9

package/PivotViewer/components/pivot/animation.ts

@@ -0,0 +1,108 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CardSprite } from './constants';
+import type * as PIXI from 'pixi.js';
+
+export function updatePositions(sprites: Map<unknown, CardSprite>, isViewTransitionRef: { current: boolean }, animationSpeed = 0.15) {
+  let isAnimating = false;
+  const threshold = 0.5;
+  const shouldAnimate = isViewTransitionRef.current;
+  const now = Date.now();
+  const DURATION = 600; // ms
+
+  for (const sprite of sprites.values()) {
+    // Handle explicit time-based animation (view transitions)
+    if (sprite.animationStartTime !== undefined) {
+      const elapsed = now - sprite.animationStartTime;
+      const delay = sprite.animationDelay || 0;
+
+      if (elapsed < delay) {
+        isAnimating = true;
+        continue;
+      }
+
+      const progress = Math.min(1, (elapsed - delay) / DURATION);
+      // Ease out cubic: 1 - (1-t)^3
+      const t = 1 - Math.pow(1 - progress, 3);
+
+      if (sprite.startX !== undefined && sprite.startY !== undefined) {
+        sprite.currentX = sprite.startX + (sprite.targetX - sprite.startX) * t;
+        sprite.currentY = sprite.startY + (sprite.targetY - sprite.startY) * t;
+      }
+
+      sprite.container.position.set(sprite.currentX, sprite.currentY);
+
+      if (progress < 1) {
+        isAnimating = true;
+      } else {
+        // Animation finished, clean up
+        sprite.currentX = sprite.targetX;
+        sprite.currentY = sprite.targetY;
+        delete sprite.animationStartTime;
+        delete sprite.animationDelay;
+        delete sprite.startX;
+        delete sprite.startY;
+      }
+      continue;
+    }
+
+    const dx = sprite.targetX - sprite.currentX;
+    const dy = sprite.targetY - sprite.currentY;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    if (shouldAnimate && distance > threshold) {
+      sprite.currentX += dx * animationSpeed;
+      sprite.currentY += dy * animationSpeed;
+      sprite.container.position.set(sprite.currentX, sprite.currentY);
+      isAnimating = true;
+    } else if (distance > 0) {
+      sprite.currentX = sprite.targetX;
+      sprite.currentY = sprite.targetY;
+      sprite.container.position.set(sprite.currentX, sprite.currentY);
+    }
+  }
+
+  if (!isAnimating && isViewTransitionRef.current) {
+    isViewTransitionRef.current = false;
+  }
+
+  return isAnimating;
+}
+
+export function startAnimationLoop(
+  refs: {
+    mountedRef: { current: boolean };
+    appRef: { current: PIXI.Application | null };
+    animationFrameRef: { current: number };
+    isAnimatingRef: { current: boolean };
+    needsRenderRef: { current: boolean };
+    spritesRef: { current: Map<unknown, CardSprite> };
+    isViewTransitionRef: { current: boolean };
+  },
+  animationSpeed = 0.15,
+) {
+  const { mountedRef, appRef, animationFrameRef, isAnimatingRef, needsRenderRef, spritesRef, isViewTransitionRef } = refs;
+
+  const animate = () => {
+    if (!mountedRef.current) return;
+
+    const stillAnimating = updatePositions(spritesRef.current, isViewTransitionRef, animationSpeed);
+
+    if (stillAnimating || needsRenderRef.current) {
+      appRef.current?.renderer.render(appRef.current.stage);
+      needsRenderRef.current = false;
+    }
+
+    if (stillAnimating) {
+      animationFrameRef.current = requestAnimationFrame(animate);
+    } else {
+      isAnimatingRef.current = false;
+    }
+  };
+
+  if (!isAnimatingRef.current) {
+    isAnimatingRef.current = true;
+    animate();
+  }
+}

package/PivotViewer/components/pivot/buckets.ts

@@ -0,0 +1,152 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import * as PIXI from 'pixi.js';
+import type { CardColors } from './constants';
+import type { GroupingResult, LayoutResult } from '../../engine/types';
+
+export function updateBucketBackgrounds(
+  bucketsContainer: PIXI.Container | null,
+  container: HTMLDivElement | null,
+  grouping: GroupingResult,
+  layout: LayoutResult,
+  zoomLevel: number,
+  cardColors: CardColors,
+  viewMode: string,
+) {
+  if (!bucketsContainer) return;
+
+  // keep parameter referenced to avoid unused param lint when callers pass zoomLevel
+  void zoomLevel;
+
+  if (!container || grouping.groups.length === 0 || viewMode === 'collection') {
+    // If we shouldn't show anything, hide all existing backgrounds
+    // We keep the highlight if it exists
+    for (const child of bucketsContainer.children) {
+      if ((child as any).name !== 'highlight') {
+        child.visible = false;
+      }
+    }
+    return;
+  }
+
+  // Use layout's total height if available so backgrounds match sprite positions
+  const worldHeight = layout.totalHeight || container.clientHeight;
+
+  // Get existing background graphics (excluding highlight)
+  const backgroundGraphics = bucketsContainer.children.filter(c => (c as any).name !== 'highlight') as PIXI.Graphics[];
+  let bgIndex = 0;
+
+  // Instead of re-deriving bucket geometry from constants, compute bucket bounds
+  // directly from the positions stored in the layout so backgrounds align exactly.
+  for (let index = 0; index < grouping.groups.length; index++) {
+    const group = grouping.groups[index];
+    let minX = Infinity;
+    let maxX = -Infinity;
+
+    for (let j = 0; j < group.ids.length; j++) {
+      const id = group.ids[j];
+      const pos = layout.positions.get(id);
+      if (pos) {
+        minX = Math.min(minX, pos.x);
+        maxX = Math.max(maxX, pos.x);
+      }
+    }
+
+    if (minX === Infinity) continue;
+
+    // Prefer explicit bucket width from layout when available
+    const bucketWidths = layout.bucketWidths || [];
+    const widthFromLayout = bucketWidths[index];
+    const width = widthFromLayout && widthFromLayout > 0 ? widthFromLayout : (maxX - minX) || 0;
+
+    if (index % 2 === 0 && width > 0) {
+      let bg: PIXI.Graphics;
+
+      if (bgIndex < backgroundGraphics.length) {
+        bg = backgroundGraphics[bgIndex];
+        bg.clear();
+      } else {
+        bg = new PIXI.Graphics();
+        // Insert before highlight if it exists, otherwise at end
+        const highlightIndex = bucketsContainer.children.findIndex(c => (c as any).name === 'highlight');
+        if (highlightIndex >= 0) {
+          bucketsContainer.addChildAt(bg, highlightIndex);
+        } else {
+          bucketsContainer.addChild(bg);
+        }
+      }
+
+      bg.rect(minX, 0, width, worldHeight);
+      bg.fill(cardColors.base);
+      bg.alpha = 0.15;
+      bg.visible = true;
+      bgIndex++;
+    }
+  }
+
+  // Hide unused background graphics
+  for (let i = bgIndex; i < backgroundGraphics.length; i++) {
+    backgroundGraphics[i].visible = false;
+  }
+}
+
+export function updateHighlight(
+  bucketsContainer: PIXI.Container | null,
+  container: HTMLDivElement | null,
+  grouping: GroupingResult,
+  layout: LayoutResult,
+  hoveredGroupIndex: number | null,
+  cardWidth: number,
+  zoomLevel: number,
+) {
+  if (!bucketsContainer || !container || grouping.groups.length === 0) return;
+
+  // `zoomLevel` is part of the signature for future use; reference it
+  // to avoid unused-parameter lint errors when callers pass it.
+  void zoomLevel;
+
+  let highlight = bucketsContainer.children.find(child => (child as any).name === 'highlight') as PIXI.Graphics;
+
+  if (!highlight) {
+    highlight = new PIXI.Graphics();
+    (highlight as any).name = 'highlight';
+    bucketsContainer.addChild(highlight);
+  }
+
+  highlight.clear();
+
+  if (hoveredGroupIndex === null || hoveredGroupIndex < 0) {
+    highlight.visible = false;
+    return;
+  }
+
+  const group = grouping.groups[hoveredGroupIndex];
+  if (!group || group.ids.length === 0) {
+    highlight.visible = false;
+    return;
+  }
+
+  let minX = Infinity;
+  let maxX = -Infinity;
+
+  for (let j = 0; j < group.ids.length; j++) {
+    const id = group.ids[j];
+    const pos = layout.positions.get(id);
+    if (pos) {
+      minX = Math.min(minX, pos.x);
+      maxX = Math.max(maxX, pos.x + cardWidth);
+    }
+  }
+
+  if (minX === Infinity) {
+    highlight.visible = false;
+    return;
+  }
+
+  const worldHeight = layout.totalHeight || container.clientHeight;
+  highlight.rect(minX, 0, maxX - minX, worldHeight);
+  highlight.fill(0xffffff);
+  highlight.alpha = 0.05;
+  highlight.visible = true;
+}

package/PivotViewer/components/pivot/colorResolver.ts

@@ -0,0 +1,67 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DEFAULT_COLORS, type CardColors } from './constants';
+
+export function createCssColorResolver() {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+
+  const parseHex = (val: string): number | null => {
+    if (!val.startsWith('#')) return null;
+    const hex = val.slice(1);
+    const normalized = hex.length === 3
+      ? hex.split('').map((c) => c + c).join('')
+      : hex.length === 4
+        ? hex.slice(0, 3).split('').map((c) => c + c).join('')
+        : hex.length === 6
+          ? hex
+          : hex.length === 8
+            ? hex.slice(0, 6)
+            : null;
+    return normalized ? Number.parseInt(normalized, 16) : null;
+  };
+
+  return (cssValue: string, fallback: number): number => {
+    if (!ctx) {
+      return fallback;
+    }
+    ctx.fillStyle = cssValue.trim();
+    const resolved = ctx.fillStyle; // normalized by canvas
+    const hex = parseHex(resolved);
+    if (hex !== null && Number.isFinite(hex)) {
+      return hex;
+    }
+
+    if (resolved.startsWith('rgb')) {
+      const nums = resolved
+        .replace(/rgba?\(/, '')
+        .replace(/\)/, '')
+        .split(',')
+        .map((n) => Number.parseFloat(n.trim()))
+        .filter((n) => !Number.isNaN(n));
+      if (nums.length >= 3) {
+        const [r, g, b] = nums;
+        return ((r & 0xff) << 16) | ((g & 0xff) << 8) | (b & 0xff);
+      }
+    }
+
+    return fallback;
+  };
+}
+
+export function resolveCardColors(cssColorResolver: (s: string, f: number) => number): CardColors {
+  const root = document.documentElement;
+  const style = getComputedStyle(root);
+  const getVar = (name: string, fallback: number) =>
+    cssColorResolver(style.getPropertyValue(name) || name, fallback);
+
+  return {
+    base: getVar('--surface-b', DEFAULT_COLORS.base),
+    mid: getVar('--surface-a', DEFAULT_COLORS.mid),
+    gradient: getVar('--surface-ground', DEFAULT_COLORS.gradient),
+    border: getVar('--surface-border', DEFAULT_COLORS.border),
+    text: getVar('--text-color', DEFAULT_COLORS.text),
+    textSecondary: getVar('--text-color-secondary', DEFAULT_COLORS.textSecondary),
+  };
+}

package/PivotViewer/components/pivot/constants.ts

@@ -0,0 +1,46 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type * as PIXI from 'pixi.js';
+
+export const ANIMATION_SPEED = 0.15;
+export const CARD_PADDING = 10;
+export const CARD_RADIUS = 12;
+export const CARD_GAP = 8; // Gap between cards (must match layout gap)
+
+export const DEFAULT_COLORS = {
+  base: 0x1b2b2f,
+  mid: 0x234445,
+  gradient: 0x2f5b56,
+  border: 0x5ad1a0,
+  text: 0xffffff,
+  textSecondary: 0x8899aa,
+};
+
+export type CardColors = typeof DEFAULT_COLORS;
+
+export interface CardSprite {
+  container: PIXI.Container;
+  graphics: PIXI.Graphics;
+  titleText: PIXI.Text;
+  labelsText: PIXI.Text;
+  valuesText: PIXI.Text;
+  itemId: number | string;
+  targetX: number;
+  targetY: number;
+  currentX: number;
+  currentY: number;
+  // Animation state
+  animationStartTime?: number;
+  animationDelay?: number;
+  startX?: number;
+  startY?: number;
+  // Cache state to avoid unnecessary redraws
+  lastSelectedId?: string | number | null;
+  lastCardColors?: CardColors;
+  lastTitle?: string;
+  lastLabels?: string;
+  lastValues?: string;
+}
+
+export default {};

package/PivotViewer/components/pivot/sprites.ts

@@ -0,0 +1,265 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import * as PIXI from 'pixi.js';
+import { CARD_GAP, CARD_PADDING, CARD_RADIUS } from './constants';
+import type { CardSprite, CardColors } from './constants';
+
+const spritePool: CardSprite[] = [];
+
+export function createCardSprite<TItem extends object>(
+  id: number | string,
+  x: number,
+  y: number,
+  items: TItem[],
+  onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void,
+  onPanStart: (e: MouseEvent) => void,
+  cardWidth: number,
+  cardHeight: number,
+  cardColors: CardColors,
+): CardSprite {
+  if (spritePool.length > 0) {
+    const sprite = spritePool.pop()!;
+    sprite.container.visible = true;
+    sprite.container.alpha = 1;
+    sprite.container.position.set(x, y);
+    sprite.itemId = id;
+    sprite.targetX = x;
+    sprite.targetY = y;
+    sprite.currentX = x;
+    sprite.currentY = y;
+
+    // Reset animation state
+    delete sprite.animationStartTime;
+    delete sprite.animationDelay;
+    delete sprite.startX;
+    delete sprite.startY;
+
+    // Reset cache
+    sprite.lastSelectedId = null;
+    sprite.lastCardColors = undefined;
+    sprite.lastTitle = undefined;
+    sprite.lastLabels = undefined;
+    sprite.lastValues = undefined;
+
+    // Update event context
+    (sprite.container as any)._eventContext = { items, onCardClick, id };
+
+    return sprite;
+  }
+
+  const container = new PIXI.Container();
+  container.eventMode = 'static';
+  container.cursor = 'pointer';
+  container.position.set(x, y);
+
+  // Store context for event handlers
+  (container as any)._eventContext = { items, onCardClick, id };
+
+  const graphics = new PIXI.Graphics();
+
+  const actualWidth = cardWidth - CARD_GAP;
+  const actualHeight = cardHeight - CARD_GAP;
+  const offsetX = CARD_GAP / 2;
+  const offsetY = CARD_GAP / 2;
+
+  const gradient = new PIXI.FillGradient(0, offsetY, 0, offsetY + actualHeight);
+  gradient.addColorStop(0, cardColors.mid);
+  gradient.addColorStop(1, cardColors.base);
+
+  graphics.roundRect(offsetX, offsetY, actualWidth, actualHeight, CARD_RADIUS);
+  graphics.fill(gradient);
+
+  container.addChild(graphics);
+
+  const titleText = new PIXI.Text('', {
+    fontSize: 13,
+    fill: cardColors.text as any,
+    fontWeight: '600',
+    lineHeight: 18,
+    wordWrap: false,
+  } as any);
+  titleText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING);
+  container.addChild(titleText);
+
+  const labelsText = new PIXI.Text('', {
+    fontSize: 11,
+    fill: cardColors.textSecondary as any,
+    fontWeight: '400',
+    lineHeight: 18,
+  } as any);
+  labelsText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING + 40);
+  container.addChild(labelsText);
+
+  const valuesText = new PIXI.Text('', {
+    fontSize: 11,
+    fill: cardColors.text as any,
+    fontWeight: '500',
+    lineHeight: 18,
+    wordWrap: false,
+  } as any);
+  valuesText.position.set(offsetX + CARD_PADDING + 65, offsetY + CARD_PADDING + 40);
+  container.addChild(valuesText);
+
+  container.on('click', (e: PIXI.FederatedPointerEvent) => {
+    e.stopPropagation();
+    const ctx = (container as any)._eventContext as { items: any; onCardClick: (item: any, e: MouseEvent, id: number | string) => void; id: number | string };
+    const itemsMap = ctx.items as Record<string, any>;
+    const item = itemsMap[String(ctx.id)];
+    if (item) {
+      ctx.onCardClick(item, e.nativeEvent as MouseEvent, ctx.id);
+    }
+  });
+
+  container.on('pointerdown', (e: PIXI.FederatedPointerEvent) => {
+    e.stopPropagation();
+    // onPanStart(e.nativeEvent as MouseEvent);
+  });
+
+  return {
+    container,
+    graphics,
+    titleText,
+    labelsText,
+    valuesText,
+    itemId: id,
+    targetX: x,
+    targetY: y,
+    currentX: x,
+    currentY: y,
+  };
+}
+
+export function destroySprite(sprite: CardSprite) {
+  if (sprite.container && sprite.container.parent) {
+    sprite.container.parent.removeChild(sprite.container);
+  }
+  // Reset visibility to ensure it doesn't ghost if something goes wrong
+  if (sprite.container) {
+    sprite.container.visible = false;
+  }
+  spritePool.push(sprite);
+}
+
+export function clearSpritePool() {
+  for (const sprite of spritePool) {
+    try {
+      sprite.graphics?.destroy();
+      sprite.titleText?.destroy();
+      sprite.labelsText?.destroy();
+      sprite.valuesText?.destroy();
+      sprite.container?.destroy();
+    } catch (e) {
+      void e;
+    }
+  }
+  spritePool.length = 0;
+}
+
+export function updateCardContent<TItem extends object>(
+  sprite: CardSprite,
+  item: TItem,
+  selectedId: string | number | null,
+  cardWidth: number,
+  cardHeight: number,
+  cardColors: CardColors,
+) {
+  if (!item) return;
+
+  const event = item as any;
+  const eventType = event.type || event.name || event.title || 'Event';
+
+  const timeStr = event.occurred ? new Date(event.occurred).toLocaleString('en-US', {
+    month: '2-digit',
+    day: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false
+  }).replace(',', '') : '';
+
+  const correlation = event.correlationId || event.correlation || '';
+  const correlationShort = correlation ? String(correlation).substring(0, 12) + '...' : '';
+
+  const maxTitleLength = 20;
+  const titleDisplay = eventType.length > maxTitleLength
+    ? eventType.substring(0, maxTitleLength) + '...'
+    : eventType;
+
+  const maxTypeLength = 16;
+  const typeDisplay = eventType.length > maxTypeLength
+    ? eventType.substring(0, maxTypeLength) + '...'
+    : eventType;
+
+  const colors = cardColors;
+  const labelsText = 'Type\nOccurred\nCorrelation';
+  const valuesText = `${typeDisplay}\n${timeStr}\n${correlationShort}`;
+  const colorsChanged = sprite.lastCardColors !== colors;
+
+  if (sprite.lastTitle !== titleDisplay) {
+    sprite.titleText.text = titleDisplay;
+    sprite.lastTitle = titleDisplay;
+  }
+
+    if (sprite.lastLabels !== labelsText) {
+    sprite.labelsText.text = labelsText;
+    sprite.lastLabels = labelsText;
+  }
+
+  if (colorsChanged) {
+    (sprite.labelsText.style as any).fill = colors.textSecondary as any;
+  }
+
+  if (sprite.lastValues !== valuesText) {
+    sprite.valuesText.text = valuesText;
+    sprite.lastValues = valuesText;
+  }
+
+  if (colorsChanged) {
+    (sprite.valuesText.style as any).fill = colors.text as any;
+  }
+
+  sprite.titleText.visible = true;
+  sprite.labelsText.visible = true;
+  sprite.valuesText.visible = true;
+
+  const isSelected = sprite.itemId === selectedId;
+
+  // Only redraw graphics if selection state or colors changed
+  if (sprite.lastSelectedId === selectedId && !colorsChanged && sprite.graphics) {
+    return;
+  }
+
+  sprite.lastSelectedId = selectedId;
+  sprite.lastCardColors = cardColors;
+
+  if (sprite.graphics) {
+    sprite.graphics.clear();
+  } else {
+    sprite.graphics = new PIXI.Graphics();
+    sprite.container.addChildAt(sprite.graphics, 0);
+  }
+
+  const actualWidth = cardWidth - CARD_GAP;
+  const actualHeight = cardHeight - CARD_GAP;
+  const offsetX = CARD_GAP / 2;
+  const offsetY = CARD_GAP / 2;
+
+  const gradient = new PIXI.FillGradient(0, offsetY, 0, offsetY + actualHeight);
+  if (isSelected) {
+    gradient.addColorStop(0, colors.gradient);
+    gradient.addColorStop(1, colors.mid);
+  } else {
+    gradient.addColorStop(0, colors.mid);
+    gradient.addColorStop(1, colors.base);
+  }
+
+  sprite.graphics.roundRect(offsetX, offsetY, actualWidth, actualHeight, CARD_RADIUS);
+  sprite.graphics.fill(gradient);
+
+  if (isSelected) {
+    sprite.graphics.stroke({ width: 2, color: colors.border });
+  } else {
+    sprite.graphics.stroke({ width: 1, color: colors.border, alpha: 0.35 });
+  }
+}