@cratis/components 0.1.12 → 0.1.14

package/dist/cjs/PivotViewer/PivotViewer.js

@@ -7,10 +7,7 @@ var layout = require('./engine/layout.js');
 var useFilterState = require('./hooks/useFilterState.js');
 var useDimensionState = require('./hooks/useDimensionState.js');
 var useZoomState = require('./hooks/useZoomState.js');
-var selection = require('./utils/selection.js');
-var animations = require('./utils/animations.js');
 var constants = require('./constants.js');
-var constants$1 = require('./utils/constants.js');
 require('./PivotViewer.css');
 var PivotViewerMain = require('./components/PivotViewerMain.js');
 var FilterPanelContainer = require('./components/FilterPanelContainer.js');
@@ -19,6 +16,13 @@ var useFilterOptions = require('./hooks/useFilterOptions.js');
 var usePanning = require('./hooks/usePanning.js');
 var useWheelZoom = require('./hooks/useWheelZoom.js');
 require('react-dom');
+var useFieldExtractors = require('./hooks/useFieldExtractors.js');
+var useCurrentFilters = require('./hooks/useCurrentFilters.js');
+var useCardSelection = require('./hooks/useCardSelection.js');
+var useDetailPanelClose = require('./hooks/useDetailPanelClose.js');
+var useScrollSync = require('./hooks/useScrollSync.js');
+var useAnimationModeTracking = require('./hooks/useAnimationModeTracking.js');
+var useViewModeScrollHandling = require('./hooks/useViewModeScrollHandling.js');
 var useContainerDimensions = require('./hooks/useContainerDimensions.js');
 
 function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRenderer, getItemId, searchFields, className, emptyContent, isLoading = false, }) {
@@ -39,12 +43,6 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
     const [scrollPosition, setScrollPosition] = React.useState({ x: 0, y: 0 });
     const { filterState, rangeFilterState, expandedFilterKey, setExpandedFilterKey, handleToggleFilter, handleClearFilter, handleRangeChange, } = useFilterState.useFilterState(filters);
     const { activeDimensionKey, setActiveDimensionKey, activeDimension, dimensionFilter, handleAxisLabelClick, } = useDimensionState.useDimensionState(dimensions, defaultDimensionKey);
-    const prevFilterStateRef = React.useRef(filterState);
-    const prevRangeFilterStateRef = React.useRef(rangeFilterState);
-    const prevSearchRef = React.useRef(search);
-    const prevDimensionRef = React.useRef(activeDimensionKey);
-    const prevViewModeRef = React.useRef(viewMode);
-    const isFirstRenderRef = React.useRef(true);
     const { zoomLevel, setZoomLevel, handleZoomIn, handleZoomOut, handleZoomSlider, } = useZoomState.useZoomState(1);
     const { isPanning, handlePanStart, handlePanMove, handlePanEnd, } = usePanning.usePanning(containerRef, undefined, setScrollPosition);
     useWheelZoom.useWheelZoom(containerRef, zoomLevel, setZoomLevel);
@@ -62,125 +60,14 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
         container.addEventListener('scroll', handleScroll);
         return () => container.removeEventListener('scroll', handleScroll);
     }, []);
-    React.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]);
-    React.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 = React.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 = React.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.useFieldExtractors(dimensions, filters);
     const { ready, applyFilters: engineApplyFilters, computeGrouping, sortIds } = usePivotEngine.usePivotEngine({
         data,
         fieldExtractors,
         indexFields,
     });
-    const currentFilters = React.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 = React.useMemo(() => {
-        return {
-            field: activeDimensionKey || dimensions[0]?.key || '',
-            buckets: 10,
-        };
-    }, [activeDimensionKey, dimensions]);
+    const currentFilters = useCurrentFilters.useCurrentFilters(filters, filterState, rangeFilterState, search, searchFields, dimensionFilter, activeDimension);
+    const currentGroupBy = useCurrentFilters.useCurrentGroupBy(activeDimensionKey, dimensions);
     React.useEffect(() => {
         if (!ready)
             return;
@@ -226,7 +113,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;
@@ -264,260 +151,52 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
         const id = item['id'];
         return typeof id === 'number' ? id : index;
     }, [getItemId]);
-    const lastProcessedViewMode = React.useRef(viewMode);
-    const lastProcessedGrouping = React.useRef(grouping);
-    React.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$1.positions.has(itemId)) {
-                const numId = Number(itemId);
-                if (!isNaN(numId) && layout$1.positions.has(numId))
-                    itemId = numId;
-            }
-            else if (typeof itemId === 'number' && !layout$1.positions.has(itemId)) {
-                const strId = String(itemId);
-                if (layout$1.positions.has(strId))
-                    itemId = strId;
-            }
-            const position = layout$1.positions.get(itemId);
-            if (position) {
-                const cardPosition = {
-                    x: position.x,
-                    y: position.y,
-                    width: constants.BASE_CARD_WIDTH,
-                    height: constants.BASE_CARD_HEIGHT
-                };
-                const detailWidth = viewMode === 'collection' ? 0 : constants$1.DETAIL_PANEL_WIDTH;
-                const { scrollLeft, scrollTop } = animations.calculateCenterScrollPosition(container, cardPosition, zoomLevel, detailWidth, layout$1.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$1, selectedItem, resolveId, zoomLevel]);
-    const handleCardClick = React.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$1.positions.has(itemId)) {
-            const numId = Number(itemId);
-            if (!isNaN(numId) && layout$1.positions.has(numId)) {
-                itemId = numId;
-            }
-        }
-        else if (typeof itemId === 'number' && !layout$1.positions.has(itemId)) {
-            const strId = String(itemId);
-            if (layout$1.positions.has(strId)) {
-                itemId = strId;
-            }
-        }
-        const selectedId = selectedItem ? (data.indexOf(selectedItem) !== -1 ? data.indexOf(selectedItem) : resolveId(selectedItem, 0)) : null;
-        const position = layout$1.positions.get(itemId);
-        const cardPosition = position ? {
-            x: position.x,
-            y: position.y,
-            width: constants.BASE_CARD_WIDTH,
-            height: constants.BASE_CARD_HEIGHT
-        } : null;
-        let targetCardPosition = null;
-        let getCardPositionAtZoom = undefined;
-        let targetTotalHeight = layout$1.totalHeight;
-        if (viewMode === 'grouped' && cardPosition) {
-            const targetZoom = Math.min(constants$1.ZOOM_MAX, Math.max(constants$1.MIN_ZOOM_ON_SELECT, zoomLevel * constants$1.ZOOM_MULTIPLIER));
-            const targetContainerWidth = containerDimensions.width / targetZoom;
-            const targetContainerHeight = containerDimensions.height;
-            const targetLayout = layout.computeLayout(grouping, {
-                viewMode,
-                cardWidth: constants.BASE_CARD_WIDTH,
-                cardHeight: constants.BASE_CARD_HEIGHT,
-                cardsPerColumn: constants.CARDS_PER_COLUMN,
-                groupSpacing: constants.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: constants.BASE_CARD_WIDTH,
-                    height: constants.BASE_CARD_HEIGHT
-                };
-            }
-            getCardPositionAtZoom = (zoom) => {
-                const currentContainerWidth = containerDimensions.width / zoom;
-                const currentContainerHeight = containerDimensions.height;
-                const currentLayout = layout.computeLayout(grouping, {
-                    viewMode,
-                    cardWidth: constants.BASE_CARD_WIDTH,
-                    cardHeight: constants.BASE_CARD_HEIGHT,
-                    cardsPerColumn: constants.CARDS_PER_COLUMN,
-                    groupSpacing: constants.GROUP_SPACING,
-                    containerWidth: currentContainerWidth,
-                    containerHeight: currentContainerHeight,
-                });
-                const pos = currentLayout.positions.get(itemId);
-                return pos ? { x: pos.x, y: pos.y, width: constants.BASE_CARD_WIDTH, height: constants.BASE_CARD_HEIGHT } : null;
-            };
-        }
-        const getLayoutSizeAtZoom = (zoom) => {
-            if (viewMode === 'collection') {
-                return { width: layout$1.totalWidth, height: layout$1.totalHeight };
-            }
-            const currentContainerWidth = containerDimensions.width / zoom;
-            const currentContainerHeight = containerDimensions.height;
-            const currentLayout = layout.computeLayout(grouping, {
-                viewMode,
-                cardWidth: constants.BASE_CARD_WIDTH,
-                cardHeight: constants.BASE_CARD_HEIGHT,
-                cardsPerColumn: constants.CARDS_PER_COLUMN,
-                groupSpacing: constants.GROUP_SPACING,
-                containerWidth: currentContainerWidth,
-                containerHeight: currentContainerHeight,
-            });
-            return { width: currentLayout.totalWidth, height: currentLayout.totalHeight };
-        };
-        selection.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$1, grouping, containerDimensions, scrollPosition]);
-    const closeDetail = React.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$1.positions.has(itemId)) {
-            const numId = Number(itemId);
-            if (!isNaN(numId) && layout$1.positions.has(numId)) {
-                itemId = numId;
-            }
-        }
-        else if (typeof itemId === 'number' && !layout$1.positions.has(itemId)) {
-            const strId = String(itemId);
-            if (layout$1.positions.has(strId)) {
-                itemId = strId;
-            }
-        }
-        const position = layout$1.positions.get(itemId);
-        const cardPosition = position ? {
-            x: position.x,
-            y: position.y,
-            width: constants.BASE_CARD_WIDTH,
-            height: constants.BASE_CARD_HEIGHT
-        } : null;
-        if (!preSelectionState) {
-            setSelectedItem(null);
-            return;
-        }
-        if (viewMode === 'collection') {
-            setSelectedItem(null);
-            animations.smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);
-            setPreSelectionState(null);
-            return;
-        }
-        const zoomChanged = Math.abs(preSelectionState.zoom - zoomLevel) > 0.001;
-        if (!zoomChanged || !cardPosition) {
-            setSelectedItem(null);
-            animations.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 = layout.computeLayout(grouping, {
-                viewMode,
-                cardWidth: constants.BASE_CARD_WIDTH,
-                cardHeight: constants.BASE_CARD_HEIGHT,
-                cardsPerColumn: constants.CARDS_PER_COLUMN,
-                groupSpacing: constants.GROUP_SPACING,
-                containerWidth: targetContainerWidth,
-                containerHeight: targetContainerHeight,
-            });
-            const targetPos = targetLayout.positions.get(itemId);
-            if (targetPos) {
-                targetCardPosition = {
-                    x: targetPos.x,
-                    y: targetPos.y,
-                    width: constants.BASE_CARD_WIDTH,
-                    height: constants.BASE_CARD_HEIGHT
-                };
-            }
-            getCardPositionAtZoom = (zoom) => {
-                const currentContainerWidth = containerDimensions.width / zoom;
-                const currentContainerHeight = containerDimensions.height;
-                const currentLayout = layout.computeLayout(grouping, {
-                    viewMode,
-                    cardWidth: constants.BASE_CARD_WIDTH,
-                    cardHeight: constants.BASE_CARD_HEIGHT,
-                    cardsPerColumn: constants.CARDS_PER_COLUMN,
-                    groupSpacing: constants.GROUP_SPACING,
-                    containerWidth: currentContainerWidth,
-                    containerHeight: currentContainerHeight,
-                });
-                const pos = currentLayout.positions.get(itemId);
-                return pos ? { x: pos.x, y: pos.y, width: constants.BASE_CARD_WIDTH, height: constants.BASE_CARD_HEIGHT } : null;
-            };
-        }
-        setIsZooming(true);
-        animations.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$1, grouping, containerDimensions]);
+    useAnimationModeTracking.useAnimationModeTracking(filterState, rangeFilterState, search, activeDimensionKey, viewMode, setAnimationMode);
+    useScrollSync.useScrollSync(containerRef, axisLabelsRef, viewMode);
+    useViewModeScrollHandling.useViewModeScrollHandling({
+        containerRef,
+        viewMode,
+        grouping,
+        layout: layout$1,
+        selectedItem,
+        zoomLevel,
+        resolveId,
+        data,
+        setPreSelectionState,
+    });
+    const handleCardClick = useCardSelection.useCardSelection({
+        data,
+        isPanning,
+        selectedItem,
+        zoomLevel,
+        viewMode,
+        layout: layout$1,
+        containerDimensions,
+        scrollPosition,
+        preSelectionState,
+        grouping,
+        getItemId,
+        resolveId,
+        setZoomLevel,
+        setIsZooming,
+        setSelectedItem,
+        setPreSelectionState,
+    });
+    const closeDetail = useDetailPanelClose.useDetailPanelClose({
+        selectedItem,
+        preSelectionState,
+        zoomLevel,
+        viewMode,
+        layout: layout$1,
+        containerDimensions,
+        grouping,
+        data,
+        resolveId,
+        setZoomLevel,
+        setIsZooming,
+        setSelectedItem,
+        setPreSelectionState,
+    });
     const cardWidth = constants.BASE_CARD_WIDTH;
     const cardHeight = constants.BASE_CARD_HEIGHT;
     const filterOptions = useFilterOptions.useFilterOptions(data, filters, filterState, rangeFilterState);