@cratis/components 0.1.9

package/PivotViewer/hooks/useContainerDimensions.ts

@@ -0,0 +1,45 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Hook to track container dimensions using ResizeObserver.
+ *
+ * @param containerRef - Ref to the container element.
+ * @param dependency - Optional dependency to trigger updates.
+ * @returns Dimensions of the container.
+ */
+export function useContainerDimensions(
+  containerRef: React.RefObject<HTMLDivElement>,
+  dependency?: unknown
+) {
+  const [dimensions, setDimensions] = useState({ width: 1200, height: 600 });
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const updateDimensions = () => {
+      setDimensions({
+        width: container.clientWidth,
+        height: container.clientHeight,
+      });
+    };
+
+    // Initial dimensions
+    updateDimensions();
+
+    // Observe for resize changes
+    const resizeObserver = new ResizeObserver(() => {
+      updateDimensions();
+    });
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [containerRef, dependency]);
+
+  return dimensions;
+}

package/PivotViewer/hooks/useDimensionState.ts

@@ -0,0 +1,53 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import type { PivotDimension } from '../types';
+
+export type PivotDimensionFilter = string | null;
+
+export function useDimensionState<TItem extends object>(
+    dimensions: PivotDimension<TItem>[],
+    defaultDimensionKey?: string
+) {
+    const dimensionMap = useMemo(() => {
+        const map = new Map<string, PivotDimension<TItem>>();
+        dimensions.forEach((dimension) => map.set(dimension.key, dimension));
+        return map;
+    }, [dimensions]);
+
+    const initialDimension = useMemo(() => {
+        if (defaultDimensionKey && dimensionMap.has(defaultDimensionKey)) {
+            return defaultDimensionKey;
+        }
+        return dimensions[0]?.key ?? '';
+    }, [defaultDimensionKey, dimensionMap, dimensions]);
+
+    const [activeDimensionKey, setActiveDimensionKey] = useState(initialDimension);
+    const [dimensionFilter, setDimensionFilter] = useState<string | null>(null);
+
+    useEffect(() => {
+        setActiveDimensionKey((previous) => {
+            if (previous && dimensionMap.has(previous)) {
+                return previous;
+            }
+            return initialDimension;
+        });
+        setDimensionFilter(null);
+    }, [dimensionMap, initialDimension]);
+
+    const activeDimension = dimensionMap.get(activeDimensionKey) ?? dimensions[0];
+
+    const handleAxisLabelClick = useCallback((groupKey: string) => {
+        setDimensionFilter((prev) => (prev === groupKey ? null : groupKey));
+    }, []);
+
+    return {
+        dimensionMap,
+        activeDimensionKey,
+        setActiveDimensionKey,
+        activeDimension,
+        dimensionFilter,
+        handleAxisLabelClick,
+    };
+}

package/PivotViewer/hooks/useFilterOptions.ts

@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useMemo } from 'react';
+import type { PivotFilter, PivotFilterOption, PivotPrimitive } from '../types';
+import { applyFilters, computeFilterOptions, computeNumericRange } from '../utils/utils';
+import type { FilterState, RangeFilterState } from '../types';
+
+export function useFilterOptions<TItem extends object>(
+  data: TItem[],
+  filters: PivotFilter<TItem>[] | undefined,
+  filterState: FilterState,
+  rangeFilterState: RangeFilterState
+) {
+  return useMemo(() => {
+    if (!filters?.length) {
+      return [] as {
+        filter: PivotFilter<TItem>;
+        options: PivotFilterOption[];
+        numericRange?: { min: number; max: number; values: PivotPrimitive[] };
+      }[];
+    }
+
+    return filters.map((filter) => {
+      const baseData = applyFilters(data, filters, filterState, rangeFilterState, filter.key);
+
+      if (filter.type === 'number') {
+        const numericRange = computeNumericRange(baseData, filter);
+        return { filter, options: [], numericRange };
+      }
+
+      const options = computeFilterOptions(baseData, filter);
+      return { filter, options };
+    });
+  }, [data, filters, filterState, rangeFilterState]);
+}

package/PivotViewer/hooks/useFilterPanelDrag.ts

@@ -0,0 +1,49 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState, useCallback, useEffect } from 'react';
+
+export function useFilterPanelDrag() {
+  const [filterPanelPos, setFilterPanelPos] = useState({ x: 16, y: 88 });
+  const [isDraggingPanel, setIsDraggingPanel] = useState(false);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+
+  const handleFilterPanelDragStart = useCallback((e: React.MouseEvent) => {
+    (e as any).preventDefault?.();
+    setIsDraggingPanel(true);
+    setDragOffset({
+      x: e.clientX - filterPanelPos.x,
+      y: e.clientY - filterPanelPos.y,
+    });
+  }, [filterPanelPos]);
+
+  const handleFilterPanelDrag = useCallback((e: MouseEvent) => {
+    if (!isDraggingPanel) return;
+    setFilterPanelPos({
+      x: Math.max(0, e.clientX - dragOffset.x),
+      y: Math.max(60, e.clientY - dragOffset.y),
+    });
+  }, [isDraggingPanel, dragOffset]);
+
+  const handleFilterPanelDragEnd = useCallback(() => {
+    setIsDraggingPanel(false);
+  }, []);
+
+  useEffect(() => {
+    if (isDraggingPanel) {
+      document.addEventListener('mousemove', handleFilterPanelDrag);
+      document.addEventListener('mouseup', handleFilterPanelDragEnd);
+      return () => {
+        document.removeEventListener('mousemove', handleFilterPanelDrag);
+        document.removeEventListener('mouseup', handleFilterPanelDragEnd);
+      };
+    }
+    return undefined;
+  }, [isDraggingPanel, handleFilterPanelDrag, handleFilterPanelDragEnd]);
+
+  return {
+    filterPanelPos,
+    isDraggingPanel,
+    handleFilterPanelDragStart,
+  };
+}

package/PivotViewer/hooks/useFilterState.ts

@@ -0,0 +1,106 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState, useEffect, useCallback } from 'react';
+import { buildFilterState, buildRangeFilterState } from '../utils/utils';
+import { FilterState, RangeFilterState, PivotFilter } from '../types';
+
+/**
+ * Hook to manage filter state.
+ */
+export function useFilterState<TItem extends object>(
+  filters: PivotFilter<TItem>[] | undefined
+) {
+  const [filterState, setFilterState] = useState<FilterState>(() => buildFilterState(filters));
+  const [rangeFilterState, setRangeFilterState] = useState<RangeFilterState>(() => buildRangeFilterState(filters));
+  const [expandedFilterKey, setExpandedFilterKey] = useState<string | null>(filters?.[0]?.key ?? null);
+
+  useEffect(() => {
+    setFilterState((prev) => {
+      const next = buildFilterState(filters);
+      if (!filters) return next;
+
+      filters.forEach((filter) => {
+        if (prev[filter.key]) {
+          next[filter.key] = new Set(prev[filter.key]);
+        }
+      });
+
+      return next;
+    });
+    setRangeFilterState((prev) => {
+      const next = buildRangeFilterState(filters);
+      if (!filters) return next;
+      filters.forEach((filter) => {
+        if (filter.type === 'number' && filter.key in prev) {
+          next[filter.key] = prev[filter.key];
+        }
+      });
+      return next;
+    });
+  }, [filters]);
+
+  useEffect(() => {
+    if (!filters?.length) {
+      setExpandedFilterKey(null);
+      return;
+    }
+
+    setExpandedFilterKey((current) => {
+      if (current && filters.some((filter) => filter.key === current)) {
+        return current;
+      }
+      return filters[0]?.key ?? null;
+    });
+  }, [filters]);
+
+  const handleToggleFilter = useCallback((filterKey: string, optionKey: string, multi: boolean | undefined) => {
+    setFilterState((prev) => {
+      const next: FilterState = { ...prev };
+      const current = new Set(prev[filterKey] ?? []);
+
+      if (multi) {
+        if (current.has(optionKey)) {
+          current.delete(optionKey);
+        } else {
+          current.add(optionKey);
+        }
+      } else {
+        if (current.has(optionKey)) {
+          current.clear();
+        } else {
+          current.clear();
+          current.add(optionKey);
+        }
+      }
+
+      next[filterKey] = current;
+      return next;
+    });
+  }, []);
+
+  const handleClearFilter = useCallback((filterKey: string) => {
+    setFilterState((prev) => {
+      const next: FilterState = { ...prev };
+      next[filterKey] = new Set();
+      return next;
+    });
+  }, []);
+
+  const handleRangeChange = useCallback((filterKey: string, range: [number, number] | null) => {
+    setRangeFilterState((prev) => ({
+      ...prev,
+      [filterKey]: range,
+    }));
+  }, []);
+
+  return {
+    filterState,
+    rangeFilterState,
+    expandedFilterKey,
+    setExpandedFilterKey,
+    handleToggleFilter,
+    handleClearFilter,
+    handleRangeChange,
+  };
+}

package/PivotViewer/hooks/useFilteredData.ts

@@ -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 { useMemo } from 'react';
+import type { PivotDimension, PivotFilter, PivotGroup } from '../types';
+import { applyFilters, groupData, toKey } from '../utils/utils';
+import type { FilterState, RangeFilterState } from '../utils/utils';
+
+export function useFilteredData<TItem extends object>(
+  data: TItem[],
+  filters: PivotFilter<TItem>[] | undefined,
+  filterState: FilterState,
+  rangeFilterState: RangeFilterState,
+  activeDimension: PivotDimension<TItem> | undefined,
+  dimensionFilter: string | null,
+  searchTerm: string,
+  searchFields?: (keyof TItem)[]
+) {
+  const filteredData = useMemo(() => {
+    let dataWithFilters = applyFilters(data, filters, filterState, rangeFilterState);
+
+    if (dimensionFilter && activeDimension) {
+      dataWithFilters = dataWithFilters.filter((item) => {
+        const value = activeDimension.getValue(item);
+        const key = toKey(value);
+        return key === dimensionFilter;
+      });
+    }
+
+    if (!searchTerm) {
+      return dataWithFilters;
+    }
+
+    // Optimize search by using indexOf instead of includes for better performance
+    return dataWithFilters.filter((item) => {
+      if (searchFields && searchFields.length) {
+        for (const field of searchFields) {
+          const value = item[field];
+          if (value !== undefined && String(value).toLowerCase().indexOf(searchTerm) !== -1) {
+            return true;
+          }
+        }
+        return false;
+      }
+
+      // Fallback to JSON stringify - less efficient but comprehensive
+      return JSON.stringify(item).toLowerCase().indexOf(searchTerm) !== -1;
+    });
+  }, [data, filters, filterState, rangeFilterState, dimensionFilter, activeDimension, searchFields, searchTerm]);
+
+  const allGroupsForBuckets = useMemo(() => {
+    if (!activeDimension) {
+      return [] as PivotGroup<TItem>[];
+    }
+    const dataWithoutDimensionFilter = applyFilters(data, filters, filterState, rangeFilterState);
+    return groupData(dataWithoutDimensionFilter, activeDimension);
+  }, [data, filters, filterState, rangeFilterState, activeDimension]);
+
+  const groupedGroups = useMemo(() => {
+    if (!activeDimension) {
+      return [] as PivotGroup<TItem>[];
+    }
+
+    if (dimensionFilter) {
+      const filteredGroup = allGroupsForBuckets.find((group) => group.key === dimensionFilter);
+      return filteredGroup ? [filteredGroup] : [];
+    }
+
+    return groupData(filteredData, activeDimension);
+  }, [filteredData, activeDimension, dimensionFilter, allGroupsForBuckets]);
+
+  const collectionGroup = useMemo(() => {
+    if (filteredData.length === 0) {
+      return [] as PivotGroup<TItem>[];
+    }
+
+    // Sort by active dimension when in collection mode
+    const sortedData = activeDimension
+      ? [...filteredData].sort((a, b) => {
+          const valueA = activeDimension.getValue(a);
+          const valueB = activeDimension.getValue(b);
+
+          // Handle null/undefined
+          if (valueA == null && valueB == null) return 0;
+          if (valueA == null) return 1;
+          if (valueB == null) return -1;
+
+          // Handle dates
+          if (valueA instanceof Date && valueB instanceof Date) {
+            return valueA.getTime() - valueB.getTime();
+          }
+
+          // Handle numbers
+          if (typeof valueA === 'number' && typeof valueB === 'number') {
+            return valueA - valueB;
+          }
+
+          // Handle strings
+          return String(valueA).localeCompare(String(valueB));
+        })
+      : filteredData;
+
+    return [
+      {
+        key: 'collection-all',
+        label: 'All Events',
+        value: null,
+        items: sortedData,
+      } as PivotGroup<TItem>,
+    ];
+  }, [filteredData, activeDimension]);
+
+  return {
+    filteredData,
+    allGroupsForBuckets,
+    groupedGroups,
+    collectionGroup,
+  };
+}

package/PivotViewer/hooks/usePanning.ts

@@ -0,0 +1,163 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState, useRef, useCallback } from 'react';
+
+export function usePanning(
+  containerRef: React.RefObject<HTMLDivElement | null>,
+  onBackgroundClick?: () => void,
+  onScrollChange?: (scroll: { x: number; y: number }) => void
+) {
+  const [isPanning, setIsPanning] = useState(false);
+  const panStartRef = useRef<{ x: number; y: number; scrollLeft: number; scrollTop: number } | null>(null);
+  const velocityRef = useRef({ x: 0, y: 0 });
+  const lastMouseRef = useRef<{ x: number; y: number; time: number } | null>(null);
+  const inertiaAnimationRef = useRef<number | null>(null);
+  const didDragRef = useRef(false);
+  const clickedOnBackgroundRef = useRef(false);
+
+  const stopInertia = useCallback(() => {
+    if (inertiaAnimationRef.current) {
+      cancelAnimationFrame(inertiaAnimationRef.current);
+      inertiaAnimationRef.current = null;
+    }
+  }, []);
+
+  const handlePanStart = useCallback((e: React.MouseEvent | MouseEvent, isExplicitlyOnCard?: boolean) => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    stopInertia();
+
+    const target = e.target as HTMLElement;
+    // Check if explicitly on card (from Pixi) or via DOM (fallback)
+    const isOnCard = isExplicitlyOnCard ?? !!target.closest('.pv-card');
+
+    clickedOnBackgroundRef.current = !isOnCard;
+    didDragRef.current = false;
+    velocityRef.current = { x: 0, y: 0 };
+
+      if (e.button === 1 || (e.button === 0 && (e.altKey || !isOnCard))) {
+      if (!isOnCard) {
+        (e as any).preventDefault?.();
+      }
+      setIsPanning(true);
+      panStartRef.current = {
+        x: e.clientX,
+        y: e.clientY,
+        scrollLeft: container.scrollLeft,
+        scrollTop: container.scrollTop,
+      };
+      lastMouseRef.current = { x: e.clientX, y: e.clientY, time: performance.now() };
+    }
+  }, [containerRef, stopInertia]);
+
+  const handlePanMove = useCallback((e: React.MouseEvent | MouseEvent) => {
+    const panStart = panStartRef.current;
+    if (!isPanning || !panStart) return;
+
+    const dx = e.clientX - panStart.x;
+    const dy = e.clientY - panStart.y;
+
+    // Mark as dragged if moved more than 3 pixels
+    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
+      didDragRef.current = true;
+    }
+
+    // Camera moves opposite to drag direction
+    const newCameraX = panStart.scrollLeft - dx;
+    const newCameraY = panStart.scrollTop - dy;
+
+    // Update camera position
+    // Update container scroll directly so the visual camera follows the drag
+    const container = containerRef.current;
+    if (container) {
+      container.scrollLeft = Math.max(0, Math.round(newCameraX));
+      container.scrollTop = Math.max(0, Math.round(newCameraY));
+    }
+
+    // Also notify parent about scroll change (keeps external state in sync)
+    if (onScrollChange) {
+      onScrollChange({ x: container ? container.scrollLeft : newCameraX, y: container ? container.scrollTop : newCameraY });
+    }
+
+    // Track velocity for inertia
+    const now = performance.now();
+    const last = lastMouseRef.current;
+    if (last) {
+      const dt = now - last.time;
+      if (dt > 0 && dt < 50) {
+        const instantVx = (last.x - e.clientX) / dt;
+        const instantVy = (last.y - e.clientY) / dt;
+        velocityRef.current = {
+          x: velocityRef.current.x * 0.5 + instantVx * 0.5,
+          y: velocityRef.current.y * 0.5 + instantVy * 0.5,
+        };
+      }
+    }
+    lastMouseRef.current = { x: e.clientX, y: e.clientY, time: now };
+  }, [isPanning, containerRef, onScrollChange]);
+
+  const handlePanEnd = useCallback(() => {
+    const wasPanning = isPanning;
+    const velocity = { ...velocityRef.current };
+
+    setIsPanning(false);
+    panStartRef.current = null;
+
+    // If clicked on background and didn't drag, trigger deselect
+    if (clickedOnBackgroundRef.current && !didDragRef.current && onBackgroundClick) {
+      onBackgroundClick();
+    }
+
+    if (!wasPanning) {
+      return;
+    }
+
+    const container = containerRef.current;
+    if (!container) {
+      lastMouseRef.current = null;
+      return;
+    }
+
+    const speed = Math.sqrt(velocity.x * velocity.x + velocity.y * velocity.y);
+
+    // Start inertia if moving fast enough
+    if (speed > 0.3) {
+      let vx = velocity.x * 16;
+      let vy = velocity.y * 16;
+
+      const animate = () => {
+        const currentSpeed = Math.sqrt(vx * vx + vy * vy);
+
+        if (currentSpeed < 0.5) {
+          inertiaAnimationRef.current = null;
+          return;
+        }
+
+        container.scrollLeft += vx;
+        container.scrollTop += vy;
+
+        // Decay
+        vx *= 0.95;
+        vy *= 0.95;
+
+        inertiaAnimationRef.current = requestAnimationFrame(animate);
+      };
+
+      inertiaAnimationRef.current = requestAnimationFrame(animate);
+    }
+
+    lastMouseRef.current = null;
+  }, [isPanning, containerRef, onBackgroundClick]);
+
+  return {
+    isPanning,
+    handlePanStart,
+    handlePanMove,
+    handlePanEnd,
+  };
+}
+
+
+