@cratis/components 0.1.9 → 0.1.10

package/PivotViewer/hooks/useContainerDimensions.ts

@@ -1,45 +0,0 @@
-// 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

@@ -1,53 +0,0 @@
-// 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

@@ -1,36 +0,0 @@
-// 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

@@ -1,49 +0,0 @@
-// 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

@@ -1,106 +0,0 @@
-// 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

@@ -1,119 +0,0 @@
-// 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

@@ -1,163 +0,0 @@
-// 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,
-  };
-}
-
-
-