@cratis/components 0.1.13 → 0.1.15

package/dist/esm/PivotViewer/PivotViewer.js

@@ -5,10 +5,7 @@ import { computeLayout } from './engine/layout.js';
 import { useFilterState } from './hooks/useFilterState.js';
 import { useDimensionState } from './hooks/useDimensionState.js';
 import { useZoomState } from './hooks/useZoomState.js';
-import { handleCardSelection } from './utils/selection.js';
-import { calculateCenterScrollPosition, smoothScrollTo, animateZoomAndScroll } from './utils/animations.js';
 import { BASE_CARD_HEIGHT, BASE_CARD_WIDTH, GROUP_SPACING, CARDS_PER_COLUMN } from './constants.js';
-import { DETAIL_PANEL_WIDTH, ZOOM_MAX, MIN_ZOOM_ON_SELECT, ZOOM_MULTIPLIER } from './utils/constants.js';
 import './PivotViewer.css';
 import { PivotViewerMain } from './components/PivotViewerMain.js';
 import { FilterPanelContainer } from './components/FilterPanelContainer.js';
@@ -17,6 +14,13 @@ import { useFilterOptions } from './hooks/useFilterOptions.js';
 import { usePanning } from './hooks/usePanning.js';
 import { useWheelZoom } from './hooks/useWheelZoom.js';
 import 'react-dom';
+import { useFieldExtractors } from './hooks/useFieldExtractors.js';
+import { useCurrentFilters, useCurrentGroupBy } from './hooks/useCurrentFilters.js';
+import { useCardSelection } from './hooks/useCardSelection.js';
+import { useDetailPanelClose } from './hooks/useDetailPanelClose.js';
+import { useScrollSync } from './hooks/useScrollSync.js';
+import { useAnimationModeTracking } from './hooks/useAnimationModeTracking.js';
+import { useViewModeScrollHandling } from './hooks/useViewModeScrollHandling.js';
 import { useContainerDimensions } from './hooks/useContainerDimensions.js';
 
 function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRenderer, getItemId, searchFields, className, emptyContent, isLoading = false, }) {
@@ -37,12 +41,6 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
     const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 });
     const { filterState, rangeFilterState, expandedFilterKey, setExpandedFilterKey, handleToggleFilter, handleClearFilter, handleRangeChange, } = useFilterState(filters);
     const { activeDimensionKey, setActiveDimensionKey, activeDimension, dimensionFilter, handleAxisLabelClick, } = useDimensionState(dimensions, defaultDimensionKey);
-    const prevFilterStateRef = useRef(filterState);
-    const prevRangeFilterStateRef = useRef(rangeFilterState);
-    const prevSearchRef = useRef(search);
-    const prevDimensionRef = useRef(activeDimensionKey);
-    const prevViewModeRef = useRef(viewMode);
-    const isFirstRenderRef = useRef(true);
     const { zoomLevel, setZoomLevel, handleZoomIn, handleZoomOut, handleZoomSlider, } = useZoomState(1);
     const { isPanning, handlePanStart, handlePanMove, handlePanEnd, } = usePanning(containerRef, undefined, setScrollPosition);
     useWheelZoom(containerRef, zoomLevel, setZoomLevel);
@@ -60,125 +58,14 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
         container.addEventListener('scroll', handleScroll);
         return () => container.removeEventListener('scroll', handleScroll);
     }, []);
-    useEffect(() => {
-        if (isFirstRenderRef.current) {
-            isFirstRenderRef.current = false;
-            return;
-        }
-        const filterChanged = prevFilterStateRef.current !== filterState;
-        const rangeChanged = prevRangeFilterStateRef.current !== rangeFilterState;
-        const searchChanged = prevSearchRef.current !== search;
-        const dimensionChanged = prevDimensionRef.current !== activeDimensionKey;
-        const viewModeChanged = prevViewModeRef.current !== viewMode;
-        if (filterChanged || rangeChanged || searchChanged) {
-            setAnimationMode('filter');
-        }
-        else if (dimensionChanged || viewModeChanged) {
-            setAnimationMode('layout');
-        }
-        prevFilterStateRef.current = filterState;
-        prevRangeFilterStateRef.current = rangeFilterState;
-        prevSearchRef.current = search;
-        prevDimensionRef.current = activeDimensionKey;
-        prevViewModeRef.current = viewMode;
-    }, [filterState, rangeFilterState, search, activeDimensionKey, viewMode]);
-    useEffect(() => {
-        const container = containerRef.current;
-        const axisLabels = axisLabelsRef.current;
-        if (!container || !axisLabels || viewMode !== 'grouped')
-            return;
-        const handleScroll = () => {
-            axisLabels.scrollLeft = container.scrollLeft;
-        };
-        handleScroll();
-        container.addEventListener('scroll', handleScroll);
-        return () => container.removeEventListener('scroll', handleScroll);
-    }, [viewMode]);
-    const fieldExtractors = useMemo(() => {
-        const extractors = new Map();
-        for (const dim of dimensions) {
-            extractors.set(dim.key, (item) => {
-                const val = dim.getValue(item);
-                if (val instanceof Date)
-                    return val.getTime();
-                if (typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean' || val === null) {
-                    return val;
-                }
-                return String(val);
-            });
-        }
-        if (filters) {
-            for (const filter of filters) {
-                extractors.set(filter.key, (item) => {
-                    const val = filter.getValue(item);
-                    if (val instanceof Date)
-                        return val.getTime();
-                    if (typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean' || val === null) {
-                        return val;
-                    }
-                    return String(val);
-                });
-            }
-        }
-        return extractors;
-    }, [dimensions, filters]);
-    const indexFields = useMemo(() => {
-        const fields = new Set();
-        for (const dim of dimensions) {
-            fields.add(dim.key);
-        }
-        if (filters) {
-            for (const filter of filters) {
-                fields.add(filter.key);
-            }
-        }
-        return Array.from(fields);
-    }, [dimensions, filters]);
+    const { fieldExtractors, indexFields } = useFieldExtractors(dimensions, filters);
     const { ready, applyFilters: engineApplyFilters, computeGrouping, sortIds } = usePivotEngine({
         data,
         fieldExtractors,
         indexFields,
     });
-    const currentFilters = useMemo(() => {
-        const specs = [];
-        const searchTerm = search.trim().toLowerCase();
-        if (searchTerm && searchFields && searchFields.length > 0) ;
-        for (const [key, values] of Object.entries(filterState)) {
-            const valueSet = values;
-            if (valueSet.size > 0) {
-                specs.push({
-                    field: key,
-                    type: 'categorical',
-                    values: valueSet,
-                });
-            }
-        }
-        for (const [key, range] of Object.entries(rangeFilterState)) {
-            if (range && (range[0] !== null || range[1] !== null)) {
-                const min = range[0] ?? -Infinity;
-                const max = range[1] ?? Infinity;
-                specs.push({
-                    field: key,
-                    type: 'numeric',
-                    range: { min, max },
-                });
-            }
-        }
-        if (dimensionFilter && activeDimension) {
-            specs.push({
-                field: activeDimension.key,
-                type: 'categorical',
-                values: new Set([dimensionFilter]),
-            });
-        }
-        return specs;
-    }, [filterState, rangeFilterState, search, searchFields, dimensionFilter, activeDimension]);
-    const currentGroupBy = useMemo(() => {
-        return {
-            field: activeDimensionKey || dimensions[0]?.key || '',
-            buckets: 10,
-        };
-    }, [activeDimensionKey, dimensions]);
+    const currentFilters = useCurrentFilters(filters, filterState, rangeFilterState, search, searchFields, dimensionFilter, activeDimension);
+    const currentGroupBy = useCurrentGroupBy(activeDimensionKey, dimensions);
     useEffect(() => {
         if (!ready)
             return;
@@ -224,7 +111,7 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
         const lastRequest = lastGroupingRequest.current;
         if (lastRequest &&
             lastRequest.viewMode === viewMode &&
-            lastRequest.groupBy.field === currentGroupBy.field &&
+            lastRequest.groupBy?.field === currentGroupBy.field &&
             lastRequest.visibleIds === visibleIds) {
             console.log('[PivotViewer] Skipping duplicate grouping request');
             return;
@@ -262,260 +149,52 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
         const id = item['id'];
         return typeof id === 'number' ? id : index;
     }, [getItemId]);
-    const lastProcessedViewMode = useRef(viewMode);
-    const lastProcessedGrouping = useRef(grouping);
-    useEffect(() => {
-        const viewModeChanged = lastProcessedViewMode.current !== viewMode;
-        const groupingChanged = lastProcessedGrouping.current !== grouping;
-        if (!viewModeChanged && !groupingChanged)
-            return;
-        lastProcessedViewMode.current = viewMode;
-        lastProcessedGrouping.current = grouping;
-        const container = containerRef.current;
-        if (!container)
-            return;
-        if (selectedItem) {
-            let itemId = resolveId(selectedItem, 0);
-            if (typeof itemId === 'string' && !layout.positions.has(itemId)) {
-                const numId = Number(itemId);
-                if (!isNaN(numId) && layout.positions.has(numId))
-                    itemId = numId;
-            }
-            else if (typeof itemId === 'number' && !layout.positions.has(itemId)) {
-                const strId = String(itemId);
-                if (layout.positions.has(strId))
-                    itemId = strId;
-            }
-            const position = layout.positions.get(itemId);
-            if (position) {
-                const cardPosition = {
-                    x: position.x,
-                    y: position.y,
-                    width: BASE_CARD_WIDTH,
-                    height: BASE_CARD_HEIGHT
-                };
-                const detailWidth = viewMode === 'collection' ? 0 : DETAIL_PANEL_WIDTH;
-                const { scrollLeft, scrollTop } = calculateCenterScrollPosition(container, cardPosition, zoomLevel, detailWidth, layout.totalHeight);
-                container.scrollTo({ left: scrollLeft, top: scrollTop });
-                setPreSelectionState(null);
-            }
-        }
-        else if (viewMode === 'grouped') {
-            setTimeout(() => {
-                container.scrollTop = container.scrollHeight;
-                setScrollPosition({ x: container.scrollLeft, y: container.scrollTop });
-            }, 0);
-        }
-    }, [viewMode, grouping, layout, selectedItem, resolveId, zoomLevel]);
-    const handleCardClick = useCallback((item, e, id) => {
-        if (isPanning)
-            return;
-        const container = containerRef.current;
-        if (!container)
-            return;
-        let itemId = (id !== undefined && id !== null) ? id : resolveId(item, 0);
-        if (typeof itemId === 'string' && !layout.positions.has(itemId)) {
-            const numId = Number(itemId);
-            if (!isNaN(numId) && layout.positions.has(numId)) {
-                itemId = numId;
-            }
-        }
-        else if (typeof itemId === 'number' && !layout.positions.has(itemId)) {
-            const strId = String(itemId);
-            if (layout.positions.has(strId)) {
-                itemId = strId;
-            }
-        }
-        const selectedId = selectedItem ? (data.indexOf(selectedItem) !== -1 ? data.indexOf(selectedItem) : resolveId(selectedItem, 0)) : null;
-        const position = layout.positions.get(itemId);
-        const cardPosition = position ? {
-            x: position.x,
-            y: position.y,
-            width: BASE_CARD_WIDTH,
-            height: BASE_CARD_HEIGHT
-        } : null;
-        let targetCardPosition = null;
-        let getCardPositionAtZoom = undefined;
-        let targetTotalHeight = layout.totalHeight;
-        if (viewMode === 'grouped' && cardPosition) {
-            const targetZoom = Math.min(ZOOM_MAX, Math.max(MIN_ZOOM_ON_SELECT, zoomLevel * ZOOM_MULTIPLIER));
-            const targetContainerWidth = containerDimensions.width / targetZoom;
-            const targetContainerHeight = containerDimensions.height;
-            const targetLayout = computeLayout(grouping, {
-                viewMode,
-                cardWidth: BASE_CARD_WIDTH,
-                cardHeight: BASE_CARD_HEIGHT,
-                cardsPerColumn: CARDS_PER_COLUMN,
-                groupSpacing: GROUP_SPACING,
-                containerWidth: targetContainerWidth,
-                containerHeight: targetContainerHeight,
-            });
-            targetTotalHeight = targetLayout.totalHeight;
-            const targetPos = targetLayout.positions.get(itemId);
-            if (targetPos) {
-                targetCardPosition = {
-                    x: targetPos.x,
-                    y: targetPos.y,
-                    width: BASE_CARD_WIDTH,
-                    height: BASE_CARD_HEIGHT
-                };
-            }
-            getCardPositionAtZoom = (zoom) => {
-                const currentContainerWidth = containerDimensions.width / zoom;
-                const currentContainerHeight = containerDimensions.height;
-                const currentLayout = computeLayout(grouping, {
-                    viewMode,
-                    cardWidth: BASE_CARD_WIDTH,
-                    cardHeight: BASE_CARD_HEIGHT,
-                    cardsPerColumn: CARDS_PER_COLUMN,
-                    groupSpacing: GROUP_SPACING,
-                    containerWidth: currentContainerWidth,
-                    containerHeight: currentContainerHeight,
-                });
-                const pos = currentLayout.positions.get(itemId);
-                return pos ? { x: pos.x, y: pos.y, width: BASE_CARD_WIDTH, height: BASE_CARD_HEIGHT } : null;
-            };
-        }
-        const getLayoutSizeAtZoom = (zoom) => {
-            if (viewMode === 'collection') {
-                return { width: layout.totalWidth, height: layout.totalHeight };
-            }
-            const currentContainerWidth = containerDimensions.width / zoom;
-            const currentContainerHeight = containerDimensions.height;
-            const currentLayout = computeLayout(grouping, {
-                viewMode,
-                cardWidth: BASE_CARD_WIDTH,
-                cardHeight: BASE_CARD_HEIGHT,
-                cardsPerColumn: CARDS_PER_COLUMN,
-                groupSpacing: GROUP_SPACING,
-                containerWidth: currentContainerWidth,
-                containerHeight: currentContainerHeight,
-            });
-            return { width: currentLayout.totalWidth, height: currentLayout.totalHeight };
-        };
-        handleCardSelection({
-            item,
-            itemId,
-            selectedItemId: selectedId,
-            container,
-            cardPosition,
-            targetCardPosition,
-            getCardPositionAtZoom,
-            getLayoutSizeAtZoom,
-            spacer: spacerRef.current,
-            preSelectionState,
-            startScrollPosition: { x: scrollPosition.x, y: scrollPosition.y },
-            setZoomLevel,
-            setIsZooming,
-            setSelectedItem,
-            setPreSelectionState,
-            viewMode,
-            zoomLevel,
-            totalHeight: targetTotalHeight,
-        });
-    }, [isPanning, selectedItem, zoomLevel, preSelectionState, viewMode, resolveId, setZoomLevel, layout, grouping, containerDimensions, scrollPosition]);
-    const closeDetail = useCallback(() => {
-        const container = containerRef.current;
-        if (!container || !selectedItem) {
-            setSelectedItem(null);
-            return;
-        }
-        const index = data.indexOf(selectedItem);
-        let itemId = index !== -1 ? index : resolveId(selectedItem, 0);
-        if (typeof itemId === 'string' && !layout.positions.has(itemId)) {
-            const numId = Number(itemId);
-            if (!isNaN(numId) && layout.positions.has(numId)) {
-                itemId = numId;
-            }
-        }
-        else if (typeof itemId === 'number' && !layout.positions.has(itemId)) {
-            const strId = String(itemId);
-            if (layout.positions.has(strId)) {
-                itemId = strId;
-            }
-        }
-        const position = layout.positions.get(itemId);
-        const cardPosition = position ? {
-            x: position.x,
-            y: position.y,
-            width: BASE_CARD_WIDTH,
-            height: BASE_CARD_HEIGHT
-        } : null;
-        if (!preSelectionState) {
-            setSelectedItem(null);
-            return;
-        }
-        if (viewMode === 'collection') {
-            setSelectedItem(null);
-            smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);
-            setPreSelectionState(null);
-            return;
-        }
-        const zoomChanged = Math.abs(preSelectionState.zoom - zoomLevel) > 0.001;
-        if (!zoomChanged || !cardPosition) {
-            setSelectedItem(null);
-            smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);
-            setPreSelectionState(null);
-            return;
-        }
-        let targetCardPosition = null;
-        let getCardPositionAtZoom = undefined;
-        if (viewMode === 'grouped') {
-            const targetZoom = preSelectionState.zoom;
-            const targetContainerWidth = containerDimensions.width / targetZoom;
-            const targetContainerHeight = containerDimensions.height;
-            const targetLayout = computeLayout(grouping, {
-                viewMode,
-                cardWidth: BASE_CARD_WIDTH,
-                cardHeight: BASE_CARD_HEIGHT,
-                cardsPerColumn: CARDS_PER_COLUMN,
-                groupSpacing: GROUP_SPACING,
-                containerWidth: targetContainerWidth,
-                containerHeight: targetContainerHeight,
-            });
-            const targetPos = targetLayout.positions.get(itemId);
-            if (targetPos) {
-                targetCardPosition = {
-                    x: targetPos.x,
-                    y: targetPos.y,
-                    width: BASE_CARD_WIDTH,
-                    height: BASE_CARD_HEIGHT
-                };
-            }
-            getCardPositionAtZoom = (zoom) => {
-                const currentContainerWidth = containerDimensions.width / zoom;
-                const currentContainerHeight = containerDimensions.height;
-                const currentLayout = computeLayout(grouping, {
-                    viewMode,
-                    cardWidth: BASE_CARD_WIDTH,
-                    cardHeight: BASE_CARD_HEIGHT,
-                    cardsPerColumn: CARDS_PER_COLUMN,
-                    groupSpacing: GROUP_SPACING,
-                    containerWidth: currentContainerWidth,
-                    containerHeight: currentContainerHeight,
-                });
-                const pos = currentLayout.positions.get(itemId);
-                return pos ? { x: pos.x, y: pos.y, width: BASE_CARD_WIDTH, height: BASE_CARD_HEIGHT } : null;
-            };
-        }
-        setIsZooming(true);
-        animateZoomAndScroll({
-            container,
-            cardPosition,
-            targetCardPosition,
-            getCardPositionAtZoom,
-            startZoom: zoomLevel,
-            targetZoom: preSelectionState.zoom,
-            targetScrollLeft: preSelectionState.scrollLeft,
-            targetScrollTop: preSelectionState.scrollTop,
-            onUpdate: setZoomLevel,
-            onComplete: () => {
-                setIsZooming(false);
-                setSelectedItem(null);
-                setPreSelectionState(null);
-            },
-        });
-    }, [preSelectionState, selectedItem, zoomLevel, viewMode, resolveId, setZoomLevel, layout, grouping, containerDimensions]);
+    useAnimationModeTracking(filterState, rangeFilterState, search, activeDimensionKey, viewMode, setAnimationMode);
+    useScrollSync(containerRef, axisLabelsRef, viewMode);
+    useViewModeScrollHandling({
+        containerRef,
+        viewMode,
+        grouping,
+        layout,
+        selectedItem,
+        zoomLevel,
+        resolveId,
+        data,
+        setPreSelectionState,
+    });
+    const handleCardClick = useCardSelection({
+        data,
+        isPanning,
+        selectedItem,
+        zoomLevel,
+        viewMode,
+        layout,
+        containerDimensions,
+        scrollPosition,
+        preSelectionState,
+        grouping,
+        getItemId,
+        resolveId,
+        setZoomLevel,
+        setIsZooming,
+        setSelectedItem,
+        setPreSelectionState,
+    });
+    const closeDetail = useDetailPanelClose({
+        selectedItem,
+        preSelectionState,
+        zoomLevel,
+        viewMode,
+        layout,
+        containerDimensions,
+        grouping,
+        data,
+        resolveId,
+        setZoomLevel,
+        setIsZooming,
+        setSelectedItem,
+        setPreSelectionState,
+    });
     const cardWidth = BASE_CARD_WIDTH;
     const cardHeight = BASE_CARD_HEIGHT;
     const filterOptions = useFilterOptions(data, filters, filterState, rangeFilterState);