@cratis/components 0.1.9

package/PivotViewer/utils/selection.ts

@@ -0,0 +1,292 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { animateZoomAndScroll, calculateCenterScrollPosition, smoothScrollTo } from './animations';
+import { ZOOM_MAX, MIN_ZOOM_ON_SELECT, ZOOM_MULTIPLIER, DETAIL_PANEL_WIDTH } from './constants';
+import type { ViewMode } from '../components/Toolbar';
+
+export interface SelectionState {
+  zoom: number;
+  scrollLeft: number;
+  scrollTop: number;
+}
+
+export interface CardClickHandlerParams<TItem> {
+  item: TItem;
+  itemId: string | number;
+  selectedItemId: string | number | null;
+  container: HTMLElement;
+  cardPosition: { x: number; y: number; width: number; height: number } | null;
+  targetCardPosition?: { x: number; y: number; width: number; height: number } | null;
+  getCardPositionAtZoom?: (zoom: number) => { x: number; y: number; width: number; height: number } | null;
+  getLayoutSizeAtZoom?: (zoom: number) => { width: number; height: number };
+  spacer?: HTMLElement | null;
+  viewMode: ViewMode;
+  zoomLevel: number;
+  totalHeight?: number;
+  preSelectionState: SelectionState | null;
+  startScrollPosition?: { x: number; y: number };
+  setZoomLevel: (zoom: number) => void;
+  setIsZooming: (isZooming: boolean) => void;
+  setSelectedItem: (item: TItem | null) => void;
+  setPreSelectionState: (state: SelectionState | null) => void;
+}
+
+/**
+ * Handle card click for selection with zoom and scroll animation
+ */
+export function handleCardSelection<TItem>({
+  itemId,
+  selectedItemId,
+  container,
+  cardPosition,
+  targetCardPosition,
+  getCardPositionAtZoom,
+  getLayoutSizeAtZoom,
+  spacer,
+  viewMode,
+  zoomLevel,
+  totalHeight,
+  preSelectionState,
+  startScrollPosition,
+  setZoomLevel,
+  setIsZooming,
+  setSelectedItem,
+  setPreSelectionState,
+  item,
+}: CardClickHandlerParams<TItem>): void {
+  // Clicking the same card - deselect
+  if (selectedItemId === itemId) {
+    deselectCard({
+      container,
+      cardPosition,
+      targetCardPosition,
+      getCardPositionAtZoom,
+      getLayoutSizeAtZoom,
+      spacer,
+      viewMode,
+      zoomLevel,
+      preSelectionState,
+      setZoomLevel,
+      setIsZooming,
+      setSelectedItem,
+      setPreSelectionState,
+    });
+    return;
+  }
+
+  // First selection - save state and zoom in
+  const isFirstSelection = selectedItemId === null;
+
+  if (isFirstSelection) {
+    setPreSelectionState({
+      zoom: zoomLevel,
+      scrollLeft: container.scrollLeft,
+      scrollTop: container.scrollTop,
+    });
+  }
+
+  setSelectedItem(item);
+
+  if (isFirstSelection) {
+    if (viewMode === 'collection') {
+      // Collection mode: just smooth scroll to center, no zoom
+      if (cardPosition) {
+        // In collection mode, we don't have a detail panel width offset because the panel is an overlay or separate
+        // But if we want to center it, we should consider if the detail panel pushes content
+        // For now, assume 0 offset as per original code
+        const { scrollLeft, scrollTop } = calculateCenterScrollPosition(container, cardPosition, zoomLevel, 0, totalHeight);
+        smoothScrollTo(container, scrollLeft, scrollTop, true);
+      }
+    } else {
+      // Grouped mode: animate zoom and scroll
+      zoomAndCenterCard({
+        container,
+        cardPosition,
+        targetCardPosition,
+        getCardPositionAtZoom,
+        getLayoutSizeAtZoom,
+        spacer,
+        itemId,
+        zoomLevel,
+        totalHeight,
+        startScrollPosition,
+        setZoomLevel,
+        setIsZooming,
+      });
+    }
+  } else {
+    // Subsequent selections: just center the new card
+    if (cardPosition) {
+      // In collection mode, we don't zoom, so we just center.
+      // In grouped mode, we might be zoomed in, so we center with offset.
+      const detailWidth = viewMode === 'collection' ? 0 : DETAIL_PANEL_WIDTH;
+      const { scrollLeft, scrollTop } = calculateCenterScrollPosition(container, cardPosition, zoomLevel, detailWidth, totalHeight);
+      smoothScrollTo(container, scrollLeft, scrollTop, true);
+    }
+  }
+}
+
+interface DeselectParams {
+  container: HTMLElement;
+  cardPosition: { x: number; y: number; width: number; height: number } | null;
+  targetCardPosition?: { x: number; y: number; width: number; height: number } | null;
+  getCardPositionAtZoom?: (zoom: number) => { x: number; y: number; width: number; height: number } | null;
+  getLayoutSizeAtZoom?: (zoom: number) => { width: number; height: number };
+  spacer?: HTMLElement | null;
+  viewMode: ViewMode;
+  zoomLevel: number;
+  preSelectionState: SelectionState | null;
+  setZoomLevel: (zoom: number) => void;
+  setIsZooming: (isZooming: boolean) => void;
+  setSelectedItem: (item: null) => void;
+  setPreSelectionState: (state: SelectionState | null) => void;
+}
+
+/**
+ * Deselect card with zoom-out animation if needed
+ */
+function deselectCard({
+  container,
+  cardPosition,
+  targetCardPosition,
+  getCardPositionAtZoom,
+  getLayoutSizeAtZoom,
+  spacer,
+  viewMode,
+  zoomLevel,
+  preSelectionState,
+  setZoomLevel,
+  setIsZooming,
+  setSelectedItem,
+  setPreSelectionState,
+}: DeselectParams): void {
+  if (!preSelectionState) {
+    setSelectedItem(null);
+    return;
+  }
+
+  // Collection mode: just scroll back
+  if (viewMode === 'collection') {
+    setSelectedItem(null);
+    smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);
+    setPreSelectionState(null);
+    return;
+  }
+
+  // Grouped mode: check if zoom changed
+  const zoomChanged = Math.abs(preSelectionState.zoom - zoomLevel) > 0.001;
+
+  if (!zoomChanged || !cardPosition) {
+    setSelectedItem(null);
+    smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);
+    setPreSelectionState(null);
+    return;
+  }
+
+  // Animate zoom out
+  setIsZooming(true);
+
+  animateZoomAndScroll({
+    container,
+    cardPosition,
+    targetCardPosition,
+    getCardPositionAtZoom,
+    getLayoutSizeAtZoom,
+    spacer,
+    startZoom: zoomLevel,
+    targetZoom: preSelectionState.zoom,
+    targetScrollLeft: preSelectionState.scrollLeft,
+    targetScrollTop: preSelectionState.scrollTop,
+    onUpdate: setZoomLevel,
+    onComplete: () => {
+      setIsZooming(false);
+      setSelectedItem(null);
+      setPreSelectionState(null);
+    },
+  });
+}
+
+interface ZoomAndCenterParams {
+  container: HTMLElement;
+  cardPosition: { x: number; y: number; width: number; height: number } | null;
+  targetCardPosition?: { x: number; y: number; width: number; height: number } | null;
+  getCardPositionAtZoom?: (zoom: number) => { x: number; y: number; width: number; height: number } | null;
+  getLayoutSizeAtZoom?: (zoom: number) => { width: number; height: number };
+  spacer?: HTMLElement | null;
+  itemId: string | number;
+  zoomLevel: number;
+  totalHeight?: number;
+  startScrollPosition?: { x: number; y: number };
+  setZoomLevel: (zoom: number) => void;
+  setIsZooming: (isZooming: boolean) => void;
+}
+
+/**
+ * Zoom in and center a card
+ */
+function zoomAndCenterCard({
+  container,
+  cardPosition,
+  targetCardPosition,
+  getCardPositionAtZoom,
+  getLayoutSizeAtZoom,
+  spacer,
+  zoomLevel,
+  totalHeight,
+  startScrollPosition,
+  setZoomLevel,
+  setIsZooming,
+}: ZoomAndCenterParams): void {
+  const targetZoom = Math.min(ZOOM_MAX, Math.max(MIN_ZOOM_ON_SELECT, zoomLevel * ZOOM_MULTIPLIER));
+  const shouldZoom = Math.abs(targetZoom - zoomLevel) > 0.001;
+
+  if (!shouldZoom || !cardPosition) {
+    if (cardPosition) {
+      const { scrollLeft, scrollTop } = calculateCenterScrollPosition(container, cardPosition, zoomLevel, DETAIL_PANEL_WIDTH, totalHeight);
+      smoothScrollTo(container, scrollLeft, scrollTop, true);
+    }
+    return;
+  }
+
+  setIsZooming(true);
+
+  // Use targetCardPosition if available, otherwise fallback to cardPosition
+  const { scrollLeft: targetScrollLeft, scrollTop: targetScrollTop } = calculateCenterScrollPosition(
+    container,
+    targetCardPosition || cardPosition,
+    targetZoom,
+    DETAIL_PANEL_WIDTH,
+    totalHeight
+  );
+
+  animateZoomAndScroll({
+    container,
+    cardPosition,
+    targetCardPosition,
+    getCardPositionAtZoom,
+    getLayoutSizeAtZoom,
+    spacer,
+    startZoom: zoomLevel,
+    targetZoom,
+    targetScrollLeft,
+    targetScrollTop,
+    startScrollLeft: startScrollPosition?.x,
+    startScrollTop: startScrollPosition?.y,
+    onUpdate: setZoomLevel,
+    onComplete: () => {
+      setIsZooming(false);
+    },
+  });
+}
+
+/**
+ * Get card element by ID from container
+ */
+export function getCardElementById(_container: HTMLElement, _itemId: string | number): HTMLElement | null {
+  // Deprecated: Pixi renderer doesn't use DOM elements for cards
+  // Keep parameter names prefixed to indicate intentional non-use.
+  void _container;
+  void _itemId;
+  return null;
+}

package/PivotViewer/utils/utils.ts

@@ -0,0 +1,259 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type {
+  PivotDimension,
+  PivotFilter,
+  PivotFilterOption,
+  PivotGroup,
+  PivotPrimitive,
+} from '../types';
+
+export type FilterState = Record<string, Set<string>>;
+export type RangeFilterState = Record<string, [number, number] | null>;
+
+// Zoom configuration
+export const ZOOM_MIN = 0.1;
+export const ZOOM_MAX = 3;
+export const ZOOM_STEP = 0.05;
+export const CARDS_PER_COLUMN = 5;
+export const BASE_CARD_WIDTH = 180;
+export const BASE_CARD_HEIGHT = 140;
+
+export const toKey = (value: PivotPrimitive): string => {
+  if (value === undefined) return 'undefined';
+  if (value === null) return 'null';
+  if (value instanceof Date) return value.toISOString();
+  if (typeof value === 'number' && Number.isNaN(value)) return 'nan';
+  return String(value);
+};
+
+export const defaultFormat = (value: PivotPrimitive): string => {
+  if (value === undefined) return 'Unknown';
+  if (value === null) return 'None';
+  if (value instanceof Date) return value.toLocaleString();
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+  return String(value);
+};
+
+export const buildFilterState = <TItem extends object>(
+  filters: PivotFilter<TItem>[] | undefined,
+): FilterState => {
+  const state: FilterState = {};
+  filters?.forEach((filter) => {
+    state[filter.key] = new Set<string>();
+  });
+  return state;
+};
+
+export const buildRangeFilterState = <TItem extends object>(
+  filters: PivotFilter<TItem>[] | undefined,
+): RangeFilterState => {
+  const state: RangeFilterState = {};
+  filters?.forEach((filter) => {
+    if (filter.type === 'number') {
+      state[filter.key] = null;
+    }
+  });
+  return state;
+};
+
+export const applyFilters = <TItem extends object>(
+  data: TItem[],
+  filters: PivotFilter<TItem>[] | undefined,
+  state: FilterState,
+  rangeState: RangeFilterState,
+  skipKey?: string,
+): TItem[] => {
+  if (!filters?.length) {
+    return data;
+  }
+
+  // Pre-compute active filters to avoid checking empty Sets repeatedly
+  const activeFilters: Array<{
+    filter: PivotFilter<TItem>;
+    selections?: Set<string>;
+    range?: [number, number];
+  }> = [];
+
+  for (const filter of filters) {
+    if (filter.key === skipKey) {
+      continue;
+    }
+
+    if (filter.type === 'number') {
+      const range = rangeState[filter.key];
+      if (range) {
+        activeFilters.push({ filter, range });
+      }
+    } else {
+      const selections = state[filter.key];
+      if (selections && selections.size > 0) {
+        activeFilters.push({ filter, selections });
+      }
+    }
+  }
+
+  // Early exit if no active filters
+  if (activeFilters.length === 0) {
+    return data;
+  }
+
+  return data.filter((item) => {
+    for (const { filter, selections, range } of activeFilters) {
+      if (range) {
+        const value = filter.getValue(item);
+        const numValue = typeof value === 'number' ? value : Number(value);
+        if (!Number.isNaN(numValue) && (numValue < range[0] || numValue > range[1])) {
+          return false;
+        }
+      } else if (selections) {
+        const valueKey = toKey(filter.getValue(item));
+        if (!selections.has(valueKey)) {
+          return false;
+        }
+      }
+    }
+    return true;
+  });
+};
+
+export const computeFilterOptions = <TItem extends object>(
+  data: TItem[],
+  filter: PivotFilter<TItem>,
+): PivotFilterOption[] => {
+  if (filter.options?.length) {
+    return filter.options;
+  }
+
+  const counts = new Map<string, { option: PivotFilterOption; count: number }>();
+
+  data.forEach((item) => {
+    const value = filter.getValue(item);
+    const key = toKey(value);
+    const existing = counts.get(key);
+    if (existing) {
+      existing.count += 1;
+    } else {
+      counts.set(key, {
+        option: {
+          key,
+          label: defaultFormat(value),
+          value,
+          count: 1,
+        },
+        count: 1,
+      });
+    }
+  });
+
+  const options = Array.from(counts.values()).map(({ option, count }) => ({
+    ...option,
+    count,
+  }));
+
+  return filter.sort ? options.sort(filter.sort) : options.sort((a, b) => b.count - a.count);
+};
+
+export const renderOptionCount = (count: number | undefined): string | number =>
+  typeof count === 'number' ? count : '';
+
+export const computeNumericRange = <TItem extends object>(
+  data: TItem[],
+  filter: PivotFilter<TItem>,
+): { min: number; max: number; values: PivotPrimitive[] } => {
+  const values: PivotPrimitive[] = [];
+  let min = Infinity;
+  let max = -Infinity;
+
+  data.forEach((item) => {
+    const value = filter.getValue(item);
+    values.push(value);
+    const numValue = typeof value === 'number' ? value : Number(value);
+    if (!Number.isNaN(numValue)) {
+      min = Math.min(min, numValue);
+      max = Math.max(max, numValue);
+    }
+  });
+
+  return {
+    min: min === Infinity ? 0 : min,
+    max: max === -Infinity ? 100 : max,
+    values,
+  };
+};
+
+export const groupData = <TItem extends object>(
+  data: TItem[],
+  dimension: PivotDimension<TItem>,
+): PivotGroup<TItem>[] => {
+  const groups = new Map<string, PivotGroup<TItem>>();
+
+  // Cache the formatValue function if it exists
+  const formatValue = dimension.formatValue;
+
+  data.forEach((item) => {
+    const rawValue = dimension.getValue(item);
+    const key = toKey(rawValue) || 'default';
+    const group = groups.get(key);
+
+    if (group) {
+      group.items.push(item);
+    } else {
+      const label = formatValue ? formatValue(rawValue) : defaultFormat(rawValue);
+      groups.set(key, {
+        key,
+        label,
+        value: rawValue,
+        items: [item],
+      });
+    }
+  });
+
+  const result = Array.from(groups.values());
+  return dimension.sort ? result.sort(dimension.sort) : result.sort((a, b) => a.label.localeCompare(b.label));
+};
+
+/**
+ * Reorder items for a CSS Grid that displays bottom-up, left-to-right.
+ * CSS Grid fills top-to-bottom, left-to-right by default.
+ *
+ * Visual goal (items fill bottom row first, then row above, etc.):
+ *   Grid Row 0 (top):    [4] [5] [6] [ ] [ ]   <- partial top row, empties on RIGHT
+ *   Grid Row 1 (bottom): [0] [1] [2] [3] [4]   <- full bottom row
+ *
+ * Returns array with nulls for empty cells that need placeholder rendering.
+ */
+export const reorderForBottomUpGrid = <TItem,>(items: TItem[], columns: number): (TItem | null)[] => {
+  if (items.length === 0) return [];
+
+  const totalRows = Math.ceil(items.length / columns);
+  const itemsInTopRow = items.length % columns || columns;
+
+  const result: (TItem | null)[] = [];
+
+  // Top row: items from the "overflow" portion, plus empty cells on the right
+  const topRowStartIndex = items.length - itemsInTopRow;
+  for (let col = 0; col < columns; col++) {
+    if (col < itemsInTopRow) {
+      result.push(items[topRowStartIndex + col]);
+    } else {
+      result.push(null); // Empty cell on right side of top row
+    }
+  }
+
+  // Remaining rows (from second-to-top down to bottom)
+  // These are full rows, containing items 0 to (items.length - itemsInTopRow - 1)
+  for (let row = 1; row < totalRows; row++) {
+    // This grid row corresponds to visual row (totalRows - 1 - row) from bottom
+    // Visual row 0 = bottom, visual row (totalRows-1) = top
+    const visualRowFromBottom = totalRows - 1 - row;
+    const rowStartIndex = visualRowFromBottom * columns;
+
+    for (let col = 0; col < columns; col++) {
+      result.push(items[rowStartIndex + col]);
+    }
+  }
+
+  return result;
+};

package/README.md

@@ -0,0 +1 @@
+# Cratis Components

package/TimeMachine/EventsView.stories.tsx

@@ -0,0 +1,10 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import * as Comp from './EventsView';
+const Component: React.ComponentType<any> | undefined = (Comp as any).default || (Object.values(Comp)[0] as any);
+
+export default { title: 'TimeMachine/EventsView', component: Component };
+
+export const Default = () => (Component ? <Component /> : <div>Unable to render component</div>);

package/TimeMachine/EventsView.tsx

@@ -0,0 +1,119 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Timeline } from 'primereact/timeline';
+import type { Event } from './types';
+import { Properties } from './Properties';
+import './EventsView.css';
+
+interface EventsViewProps {
+    events: Event[];
+}
+
+export const EventsView: React.FC<EventsViewProps> = ({ events }) => {
+    // Use test data if no events provided
+    const displayEvents = events.length > 0 ? events : [];
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [canScrollUp, setCanScrollUp] = useState(false);
+    const [canScrollDown, setCanScrollDown] = useState(false);
+
+    const updateScrollState = () => {
+        const container = containerRef.current;
+        if (!container) {
+            setCanScrollUp(false);
+            setCanScrollDown(false);
+            return;
+        }
+
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const epsilon = 1;
+        setCanScrollUp(scrollTop > epsilon);
+        setCanScrollDown(scrollTop + clientHeight < scrollHeight - epsilon);
+    };
+
+    useEffect(() => {
+        updateScrollState();
+        const container = containerRef.current;
+        if (!container) return;
+
+        const handleScroll = () => updateScrollState();
+        container.addEventListener('scroll', handleScroll);
+        return () => container.removeEventListener('scroll', handleScroll);
+    }, [displayEvents.length]);
+
+    const renderEventCard = (event: Event, position: 'left' | 'right') => {
+        const isLeft = position === 'left';
+
+        return (
+            <div className={`events-view-event-card events-view-event-card--${position}`}>
+                <div className={`events-view-event-header ${isLeft ? 'events-view-event-header--right' : ''}`}>
+                    <h3 className={`events-view-event-name ${isLeft ? 'events-view-event-name--right' : ''}`}>{event.type}</h3>
+                    <div className={`events-view-event-timestamp ${isLeft ? 'events-view-event-timestamp--right' : ''}`}>
+                        {event.occurred.toLocaleString()}
+                    </div>
+                </div>
+                <div className="events-view-event-properties">
+                    <Properties data={event.content || {}} align="left" />
+                </div>
+            </div>
+        );
+    };
+
+    const customContent = (event: Event, index: number) => {
+        // PrimeReact places even indices (0,2,4,...) on the right, odd on the left
+        const position = index % 2 === 0 ? 'right' : 'left';
+        return renderEventCard(event, position);
+    };
+
+    const customMarker = () => {
+        return (
+            <div className="events-view-marker">
+                <div className="events-view-marker-dot"></div>
+            </div>
+        );
+    };
+
+    const scrollToTop = () => containerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+    const scrollToBottom = () => {
+        const container = containerRef.current;
+        if (!container) return;
+        container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+    };
+
+    return (
+        <div className="events-view-container" ref={containerRef}>
+            {canScrollUp && (
+                <div className="events-view-scroll-button-wrapper events-view-scroll-button-wrapper--top">
+                    <button
+                        type="button"
+                        className="events-view-scroll-button events-view-scroll-button--top"
+                        onClick={scrollToTop}
+                        aria-label="Scroll to top"
+                    >
+                        <i className="pi pi-arrow-up" />
+                    </button>
+                </div>
+            )}
+            <Timeline
+                value={displayEvents}
+                align="alternate"
+                content={customContent}
+                marker={customMarker}
+                className="events-view-timeline"
+            />
+            {canScrollDown && (
+                <div className="events-view-scroll-button-wrapper events-view-scroll-button-wrapper--bottom">
+                    <button
+                        type="button"
+                        className="events-view-scroll-button events-view-scroll-button--bottom"
+                        onClick={scrollToBottom}
+                        aria-label="Scroll to bottom"
+                    >
+                        <i className="pi pi-arrow-down" />
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};

package/TimeMachine/Properties.stories.tsx

@@ -0,0 +1,10 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import * as Comp from './Properties';
+const Component: React.ComponentType<any> | undefined = (Comp as any).default || (Object.values(Comp)[0] as any);
+
+export default { title: 'TimeMachine/Properties', component: Component };
+
+export const Default = () => (Component ? <Component /> : <div>Unable to render component</div>);