npm - @cratis/components - Versions diffs - 0.1.15 → 0.1.17 - Mend

@cratis/components 0.1.15 → 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (103) hide show

package/dist/cjs/PivotViewer/PivotViewer.css CHANGED Viewed

@@ -4,12 +4,19 @@
 .pivot-viewer {
   position: relative;
-  height: 100vh;
+  /* CRITICAL: Don't set explicit height - let parent control it via container constraints */
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* allow children to size without forcing overflow */
+  max-height: 100%; /* respect parent height if set */
   width: 100%;
-  background: radial-gradient(circle at 25% 20%, var(--primary-500), var(--surface-ground));
+  /* Keep root neutral; move visual background to the viewport so it never exceeds the container */
+  background: var(--surface-ground);
   color: var(--text-color);
   overflow: hidden;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  /* Ensure we shrink within flex parent */
+  flex: 1 1 0%;
 }
 .pv-filter-panel {
@@ -276,7 +283,8 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
-  height: 100%;
+  flex: 1 1 auto; /* grow within pivot-viewer */
+  height: auto;
   padding-left: 0;
   overflow: hidden;
 }
@@ -571,7 +579,7 @@
   cursor: grabbing;
 }
-/* Groups wrapper for bucket mode with axis labels */
+/* Groups wrapper for grouped mode with axis labels */
 .pv-groups-wrapper {
   display: flex;
   flex-direction: column;
@@ -581,7 +589,12 @@
   background: transparent;
 }
-.pv-groups-buckets {
+/* Visual background belongs to the scrollable viewport area so it respects container bounds */
+.pv-viewport {
+  background: radial-gradient(circle at 25% 20%, var(--primary-500), var(--surface-ground));
+}
+.pv-groups-grouped {
   flex: 1;
   padding-bottom: 0;
 }
@@ -599,21 +612,21 @@
   transition: background 180ms ease;
 }
-/* Bucket mode groups need to align cards to bottom and extend full height */
-.pv-group-bucket {
+/* Grouped mode groups need to align cards to bottom and extend full height */
+.pv-group-grouped {
   justify-content: flex-end;
   position: relative;
   min-height: 100%; /* Ensure full height for hover */
   width: var(--column-width); /* Fixed width even when empty */
 }
-/* Zebra striping for bucket mode - every other bucket gets a lighter background */
-.pv-group-bucket:nth-child(even)::before {
+/* Zebra striping for grouped mode - every other group gets a lighter background */
+.pv-group-grouped:nth-child(even)::before {
   background: rgba(255, 255, 255, 0.03);
 }
 /* Full-height hover highlight that extends to the top */
-.pv-group-bucket::before {
+.pv-group-grouped::before {
   content: '';
   position: absolute;
   inset: 0;
@@ -624,14 +637,14 @@
   z-index: 0;
 }
-.pv-group-bucket:hover::before,
-.pv-group-bucket.highlighted::before {
+.pv-group-grouped:hover::before,
+.pv-group-grouped.highlighted::before {
   background: var(--surface-hover);
 }
 /* Zebra striping hover state - combine with stripe background */
-.pv-group-bucket:nth-child(even):hover::before,
-.pv-group-bucket:nth-child(even).highlighted::before {
+.pv-group-grouped:nth-child(even):hover::before,
+.pv-group-grouped:nth-child(even).highlighted::before {
   background: var(--surface-hover);
 }
@@ -667,25 +680,25 @@
   width: var(--column-width, auto);
 }
-.pv-cards-bucket {
+.pv-cards-grouped {
   /* Grid fills left-to-right with fixed columns */
   grid-template-columns: repeat(var(--cards-per-row, 5), 1fr);
   grid-auto-flow: row;
   width: var(--column-width);
 }
-.pv-cards-bucket .pv-card {
+.pv-cards-grouped .pv-card {
   /* Cards maintain their direction */
 }
-/* Empty placeholder cells in bucket grid */
+/* Empty placeholder cells in grouped grid */
 .pv-card-placeholder {
   visibility: hidden;
   width: var(--card-width);
   height: var(--card-height);
 }
-/* Axis labels at bottom of bucket view */
+/* Axis labels at bottom of grouped view */
 .pv-axis-labels {
   display: flex;
   align-items: stretch;
@@ -715,7 +728,7 @@
   font: inherit;
 }
-/* Zebra striping for axis labels - match the bucket columns */
+/* Zebra striping for axis labels - match the grouped columns */
 .pv-axis-label:nth-child(even) {
   background: rgba(255, 255, 255, 0.03);
 }

package/dist/cjs/PivotViewer/PivotViewer.js CHANGED Viewed

@@ -25,7 +25,7 @@ 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, }) {
+function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRenderer, detailRenderer, getItemId, searchFields, className, emptyContent, isLoading = false, colors, }) {
     const containerRef = React.useRef(null);
     const filterButtonRef = React.useRef(null);
     const axisLabelsRef = React.useRef(null);
@@ -72,9 +72,17 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
         if (!ready)
             return;
         engineApplyFilters(currentFilters).then((result) => {
+            if (result.visibleIds.length === 0 && currentFilters.length === 0 && data.length > 0) {
+                const fallbackIds = new Uint32Array(data.length);
+                for (let i = 0; i < data.length; i++) {
+                    fallbackIds[i] = i;
+                }
+                setVisibleIds(fallbackIds);
+                return;
+            }
             setVisibleIds(result.visibleIds);
         });
-    }, [ready, currentFilters, engineApplyFilters]);
+    }, [ready, currentFilters, engineApplyFilters, data.length]);
     const lastGroupingRequest = React.useRef(null);
     React.useEffect(() => {
         if (!ready || visibleIds.length === 0) {
@@ -115,13 +123,10 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
             lastRequest.viewMode === viewMode &&
             lastRequest.groupBy?.field === currentGroupBy.field &&
             lastRequest.visibleIds === visibleIds) {
-            console.log('[PivotViewer] Skipping duplicate grouping request');
             return;
         }
         lastGroupingRequest.current = { viewMode, groupBy: currentGroupBy, visibleIds };
-        console.log('[PivotViewer] Computing grouping for', visibleIds.length, 'items');
         computeGrouping(visibleIds, currentGroupBy).then((result) => {
-            console.log('[PivotViewer] Grouping result received:', result.groups.length, 'groups');
             setGrouping(result);
         });
     }, [ready, visibleIds, currentGroupBy, viewMode, computeGrouping, sortIds, activeDimensionKey]);
@@ -137,7 +142,6 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
             cardWidth,
             cardHeight,
             cardsPerColumn: constants.CARDS_PER_COLUMN,
-            groupSpacing: constants.GROUP_SPACING,
             containerWidth,
             containerHeight,
         });
@@ -207,11 +211,43 @@ function PivotViewer({ data, dimensions, filters, defaultDimensionKey, cardRende
         'pivot-viewer',
         className,
         hasFilters ? (filtersOpen ? 'filters-open' : 'filters-closed') : 'no-filters',
-        viewMode === 'grouped' ? 'bucket-mode' : 'collection-mode',
+        viewMode === 'grouped' ? 'grouped-mode' : 'collection-mode',
     ]
         .filter(Boolean)
         .join(' ');
-    return (jsxRuntime.jsxs("div", { className: viewerClassName, children: [jsxRuntime.jsx(FilterPanelContainer.FilterPanelContainer, { isOpen: filtersOpen && hasFilters, search: search, filterState: filterState, rangeFilterState: rangeFilterState, expandedFilterKey: expandedFilterKey, filterOptions: filterOptions, anchorRef: filterButtonRef, onClose: () => setFiltersOpen(false), onSearchChange: setSearch, onFilterToggle: handleToggleFilter, onFilterClear: handleClearFilter, onRangeChange: handleRangeChange, onExpandedFilterChange: setExpandedFilterKey }), jsxRuntime.jsxs("main", { className: "pv-main", children: [jsxRuntime.jsx(ToolbarContainer.ToolbarContainer, { hasFilters: hasFilters, filtersOpen: filtersOpen, filteredCount: visibleIds.length, viewMode: viewMode, zoomLevel: zoomLevel, activeDimensionKey: activeDimensionKey, dimensions: dimensions, activeFilterCount: activeFilterCount, onFiltersToggle: () => setFiltersOpen((prev) => !prev), onViewModeChange: setViewMode, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onZoomSlider: handleZoomSlider, onDimensionChange: setActiveDimensionKey, filterButtonRef: filterButtonRef }), jsxRuntime.jsx(PivotViewerMain.PivotViewerMain, { data: data, ready: ready, isLoading: isLoading, visibleIds: visibleIds, grouping: grouping, layout: layout$1, cardWidth: cardWidth, cardHeight: cardHeight, zoomLevel: zoomLevel, scrollPosition: scrollPosition, containerDimensions: containerDimensions, selectedItem: selectedItem, hoveredGroupIndex: hoveredGroupIndex, isZooming: isZooming, viewMode: viewMode, cardRenderer: cardRenderer, resolveId: resolveId, emptyContent: emptyContent, dimensionFilter: dimensionFilter, onCardClick: handleCardClick, onPanStart: handlePanStart, onPanMove: handlePanMove, onPanEnd: handlePanEnd, onGroupHover: setHoveredGroupIndex, onAxisLabelClick: handleAxisLabelClick, onCloseDetail: closeDetail, containerRef: containerRef, axisLabelsRef: axisLabelsRef, spacerRef: spacerRef })] })] }));
+    const cssVariables = React.useMemo(() => {
+        const vars = {};
+        if (!colors)
+            return vars;
+        if (colors.primaryColor)
+            vars['--primary-color'] = colors.primaryColor;
+        if (colors.primaryColorText)
+            vars['--primary-color-text'] = colors.primaryColorText;
+        if (colors.primary500)
+            vars['--primary-500'] = colors.primary500;
+        if (colors.surfaceGround)
+            vars['--surface-ground'] = colors.surfaceGround;
+        if (colors.surfaceCard)
+            vars['--surface-card'] = colors.surfaceCard;
+        if (colors.surfaceSection)
+            vars['--surface-section'] = colors.surfaceSection;
+        if (colors.surfaceOverlay)
+            vars['--surface-overlay'] = colors.surfaceOverlay;
+        if (colors.surfaceBorder)
+            vars['--surface-border'] = colors.surfaceBorder;
+        if (colors.textColor)
+            vars['--text-color'] = colors.textColor;
+        if (colors.textColorSecondary)
+            vars['--text-color-secondary'] = colors.textColorSecondary;
+        if (colors.highlightBg)
+            vars['--highlight-bg'] = colors.highlightBg;
+        if (colors.maskbg)
+            vars['--maskbg'] = colors.maskbg;
+        if (colors.focusRing)
+            vars['--focus-ring'] = colors.focusRing;
+        return vars;
+    }, [colors]);
+    return (jsxRuntime.jsxs("div", { className: viewerClassName, style: cssVariables, children: [jsxRuntime.jsx(FilterPanelContainer.FilterPanelContainer, { isOpen: filtersOpen && hasFilters, search: search, filterState: filterState, rangeFilterState: rangeFilterState, expandedFilterKey: expandedFilterKey, filterOptions: filterOptions, anchorRef: filterButtonRef, onClose: () => setFiltersOpen(false), onSearchChange: setSearch, onFilterToggle: handleToggleFilter, onFilterClear: handleClearFilter, onRangeChange: handleRangeChange, onExpandedFilterChange: setExpandedFilterKey }), jsxRuntime.jsxs("main", { className: "pv-main", children: [jsxRuntime.jsx(ToolbarContainer.ToolbarContainer, { hasFilters: hasFilters, filtersOpen: filtersOpen, filteredCount: visibleIds.length, viewMode: viewMode, zoomLevel: zoomLevel, activeDimensionKey: activeDimensionKey, dimensions: dimensions, activeFilterCount: activeFilterCount, onFiltersToggle: () => setFiltersOpen((prev) => !prev), onViewModeChange: setViewMode, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onZoomSlider: handleZoomSlider, onDimensionChange: setActiveDimensionKey, filterButtonRef: filterButtonRef }), jsxRuntime.jsx(PivotViewerMain.PivotViewerMain, { data: data, ready: ready, isLoading: isLoading, visibleIds: visibleIds, grouping: grouping, layout: layout$1, cardWidth: cardWidth, cardHeight: cardHeight, zoomLevel: zoomLevel, scrollPosition: scrollPosition, containerDimensions: containerDimensions, selectedItem: selectedItem, hoveredGroupIndex: hoveredGroupIndex, isZooming: isZooming, viewMode: viewMode, cardRenderer: cardRenderer, detailRenderer: detailRenderer, resolveId: resolveId, emptyContent: emptyContent, dimensionFilter: dimensionFilter, onCardClick: handleCardClick, onPanStart: handlePanStart, onPanMove: handlePanMove, onPanEnd: handlePanEnd, onGroupHover: setHoveredGroupIndex, onAxisLabelClick: handleAxisLabelClick, onCloseDetail: closeDetail, containerRef: containerRef, axisLabelsRef: axisLabelsRef, spacerRef: spacerRef })] })] }));
 }
 exports.PivotViewer = PivotViewer;

package/dist/cjs/PivotViewer/PivotViewer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PivotViewer.js","sources":["../../../PivotViewer/PivotViewer.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { PivotViewerProps } from './types';\nimport type { GroupingResult } from './engine/types';\nimport { usePivotEngine } from './hooks/usePivotEngine';\nimport { computeLayout } from './engine/layout';\nimport { useFilterState } from './hooks/useFilterState';\nimport { useDimensionState } from './hooks/useDimensionState';\nimport { useZoomState } from './hooks/useZoomState';\nimport { BASE_CARD_WIDTH, BASE_CARD_HEIGHT, CARDS_PER_COLUMN, GROUP_SPACING } from './constants';\nimport './PivotViewer.css';\nimport { PivotViewerMain } from './components/PivotViewerMain';\nimport { FilterPanelContainer } from './components/FilterPanelContainer';\nimport { ToolbarContainer } from './components/ToolbarContainer';\nimport { usePanning, useWheelZoom, useFilterOptions } from './hooks';\nimport { useContainerDimensions } from './hooks/useContainerDimensions';\nimport type { ViewMode } from './components/Toolbar';\nimport { useFieldExtractors } from './hooks/useFieldExtractors';\nimport { useCurrentFilters, useCurrentGroupBy } from './hooks/useCurrentFilters';\nimport { useCardSelection } from './hooks/useCardSelection';\nimport { useDetailPanelClose } from './hooks/useDetailPanelClose';\nimport { useScrollSync } from './hooks/useScrollSync';\nimport { useAnimationModeTracking } from './hooks/useAnimationModeTracking';\nimport { useViewModeScrollHandling } from './hooks/useViewModeScrollHandling';\n\nexport function PivotViewer<TItem extends object>({\n data,\n dimensions,\n filters,\n defaultDimensionKey,\n cardRenderer,\n getItemId,\n searchFields,\n className,\n emptyContent,\n isLoading = false,\n}: PivotViewerProps<TItem>) {\n // Refs\n const containerRef = useRef<HTMLDivElement>(null!);\n const filterButtonRef = useRef<HTMLButtonElement>(null!);\n const axisLabelsRef = useRef<HTMLDivElement>(null!);\n const spacerRef = useRef<HTMLDivElement>(null!);\n\n // State\n const [search, setSearch] = useState('');\n const [viewMode, setViewMode] = useState<ViewMode>('collection');\n const [filtersOpen, setFiltersOpen] = useState(false);\n const [selectedItem, setSelectedItem] = useState<TItem \| null>(null);\n const [isZooming, setIsZooming] = useState(false);\n const [visibleIds, setVisibleIds] = useState<Uint32Array>(new Uint32Array(0));\n const [grouping, setGrouping] = useState<GroupingResult>({ groups: [] });\n const [hoveredGroupIndex, setHoveredGroupIndex] = useState<number \| null>(null);\n const [preSelectionState, setPreSelectionState] = useState<{ zoom: number; scrollLeft: number; scrollTop: number } \| null>(null);\n const [, setAnimationMode] = useState<'layout' \| 'filter'>('layout');\n const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 });\n\n // Filter hooks\n const {\n filterState,\n rangeFilterState,\n expandedFilterKey,\n setExpandedFilterKey,\n handleToggleFilter,\n handleClearFilter,\n handleRangeChange,\n } = useFilterState(filters);\n\n // Dimension hooks\n const {\n activeDimensionKey,\n setActiveDimensionKey,\n activeDimension,\n dimensionFilter,\n handleAxisLabelClick,\n } = useDimensionState(dimensions, defaultDimensionKey);\n\n // Zoom and pan hooks\n const {\n zoomLevel,\n setZoomLevel,\n handleZoomIn,\n handleZoomOut,\n handleZoomSlider,\n } = useZoomState(1);\n\n const {\n isPanning,\n handlePanStart,\n handlePanMove,\n handlePanEnd,\n } = usePanning(containerRef, undefined, setScrollPosition);\n\n useWheelZoom(containerRef, zoomLevel, setZoomLevel);\n\n // Track container dimensions for responsive layout\n const containerDimensions = useContainerDimensions(containerRef, isLoading);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const handleScroll = () => {\n setScrollPosition({\n x: container.scrollLeft,\n y: container.scrollTop,\n });\n };\n\n container.addEventListener('scroll', handleScroll);\n return () => container.removeEventListener('scroll', handleScroll);\n }, []);\n\n // Build field extractors for the columnar store\n const { fieldExtractors, indexFields } = useFieldExtractors(dimensions, filters);\n\n // Initialize the Web Worker engine\n const { ready, applyFilters: engineApplyFilters, computeGrouping, sortIds } = usePivotEngine({\n data,\n fieldExtractors,\n indexFields,\n });\n\n // Build filter specs from UI state\n const currentFilters = useCurrentFilters(\n filters,\n filterState,\n rangeFilterState,\n search,\n searchFields,\n dimensionFilter,\n activeDimension,\n );\n\n const currentGroupBy = useCurrentGroupBy(activeDimensionKey, dimensions);\n\n // Apply filters\n useEffect(() => {\n if (!ready) return;\n\n engineApplyFilters(currentFilters).then((result) => {\n setVisibleIds(result.visibleIds);\n });\n }, [ready, currentFilters, engineApplyFilters]);\n\n // Compute grouping\n const lastGroupingRequest = useRef<{ viewMode: ViewMode; groupBy: unknown; visibleIds: Uint32Array } \| null>(null);\n \n useEffect(() => {\n if (!ready \|\| visibleIds.length === 0) {\n setGrouping({ groups: [] });\n lastGroupingRequest.current = null;\n return;\n }\n\n if (viewMode === 'collection') {\n // In collection mode, create a single group with all items\n // Sort items if activeDimensionKey is set\n if (activeDimensionKey) {\n sortIds(visibleIds, activeDimensionKey).then((sortedIds) => {\n setGrouping({\n groups: [{\n key: 'all',\n label: 'All Items',\n value: 'all',\n ids: sortedIds,\n count: sortedIds.length\n }]\n });\n });\n } else {\n setGrouping({\n groups: [{\n key: 'all',\n label: 'All Items',\n value: 'all',\n ids: visibleIds,\n count: visibleIds.length\n }]\n });\n }\n lastGroupingRequest.current = null;\n return;\n }\n\n // Check if this is the same request as last time to prevent duplicate computations\n const lastRequest = lastGroupingRequest.current;\n if (\n lastRequest &&\n lastRequest.viewMode === viewMode &&\n (lastRequest.groupBy as unknown as typeof currentGroupBy)?.field === currentGroupBy.field &&\n lastRequest.visibleIds === visibleIds\n ) {\n console.log('[PivotViewer] Skipping duplicate grouping request');\n return;\n }\n\n lastGroupingRequest.current = { viewMode, groupBy: currentGroupBy, visibleIds };\n \n console.log('[PivotViewer] Computing grouping for', visibleIds.length, 'items');\n computeGrouping(visibleIds, currentGroupBy).then((result) => {\n console.log('[PivotViewer] Grouping result received:', result.groups.length, 'groups');\n setGrouping(result);\n });\n }, [ready, visibleIds, currentGroupBy, viewMode, computeGrouping, sortIds, activeDimensionKey]);\n\n // Compute layout\n const layout = useMemo(() => {\n // Calculate layout at base dimensions (zoom is applied as transform)\n const cardWidth = BASE_CARD_WIDTH;\n const cardHeight = BASE_CARD_HEIGHT;\n const containerWidth = containerDimensions.width / zoomLevel;\n // For grouped mode, use fixed container height to ensure stable layout during zoom\n const containerHeight = viewMode === 'collection'\n ? containerDimensions.height / zoomLevel\n : containerDimensions.height;\n\n const result = computeLayout(grouping, {\n viewMode,\n cardWidth,\n cardHeight,\n cardsPerColumn: CARDS_PER_COLUMN,\n groupSpacing: GROUP_SPACING,\n containerWidth,\n containerHeight,\n });\n\n return result;\n }, [grouping, viewMode, zoomLevel, containerDimensions.width, containerDimensions.height]);\n\n const resolveId = useCallback((item: TItem, index: number) => {\n if (getItemId) {\n const id = getItemId(item, index);\n return typeof id === 'number' ? id : index;\n }\n const id = (item as Record<string, unknown>)['id'];\n return typeof id === 'number' ? id : index;\n }, [getItemId]);\n\n // Track animation mode changes\n useAnimationModeTracking(filterState, rangeFilterState, search, activeDimensionKey, viewMode, setAnimationMode);\n\n // Sync axis labels scroll with container scroll\n useScrollSync(containerRef, axisLabelsRef, viewMode);\n\n // Handle scroll positioning when switching view modes or grouping changes\n useViewModeScrollHandling({\n containerRef,\n viewMode,\n grouping,\n layout,\n selectedItem,\n zoomLevel,\n resolveId,\n data,\n setPreSelectionState,\n });\n\n // Handle card selection (click)\n const handleCardClick = useCardSelection({\n data,\n isPanning,\n selectedItem,\n zoomLevel,\n viewMode,\n layout,\n containerDimensions,\n scrollPosition,\n preSelectionState,\n grouping,\n getItemId,\n resolveId,\n setZoomLevel,\n setIsZooming,\n setSelectedItem,\n setPreSelectionState,\n });\n\n // Handle detail panel close\n const closeDetail = useDetailPanelClose({\n selectedItem,\n preSelectionState,\n zoomLevel,\n viewMode,\n layout,\n containerDimensions,\n grouping,\n data,\n resolveId,\n setZoomLevel,\n setIsZooming,\n setSelectedItem,\n setPreSelectionState,\n });\n\n // Use base card dimensions - zoom is applied as transform in canvas\n const cardWidth = BASE_CARD_WIDTH;\n const cardHeight = BASE_CARD_HEIGHT;\n\n // Calculate filter options\n const filterOptions = useFilterOptions(data, filters, filterState, rangeFilterState);\n\n const hasFilters = Boolean(filters && filters.length > 0);\n const activeFilterCount = Object.values(filterState).reduce((sum: number, vals) => sum + (vals as Set<string>).size, 0) +\n Object.values(rangeFilterState).filter(r => r !== null).length;\n\n const viewerClassName = [\n 'pivot-viewer',\n className,\n hasFilters ? (filtersOpen ? 'filters-open' : 'filters-closed') : 'no-filters',\n viewMode === 'grouped' ? 'bucket-mode' : 'collection-mode',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={viewerClassName}>\n <FilterPanelContainer\n isOpen={filtersOpen && hasFilters}\n search={search}\n filterState={filterState}\n rangeFilterState={rangeFilterState}\n expandedFilterKey={expandedFilterKey}\n filterOptions={filterOptions}\n anchorRef={filterButtonRef}\n onClose={() => setFiltersOpen(false)}\n onSearchChange={setSearch}\n onFilterToggle={handleToggleFilter}\n onFilterClear={handleClearFilter}\n onRangeChange={handleRangeChange}\n onExpandedFilterChange={setExpandedFilterKey}\n />\n\n <main className=\"pv-main\">\n <ToolbarContainer\n hasFilters={hasFilters}\n filtersOpen={filtersOpen}\n filteredCount={visibleIds.length}\n viewMode={viewMode}\n zoomLevel={zoomLevel}\n activeDimensionKey={activeDimensionKey}\n dimensions={dimensions}\n activeFilterCount={activeFilterCount}\n onFiltersToggle={() => setFiltersOpen((prev) => !prev)}\n onViewModeChange={setViewMode}\n onZoomIn={handleZoomIn}\n onZoomOut={handleZoomOut}\n onZoomSlider={handleZoomSlider}\n onDimensionChange={setActiveDimensionKey}\n filterButtonRef={filterButtonRef}\n />\n\n <PivotViewerMain\n data={data}\n ready={ready}\n isLoading={isLoading}\n visibleIds={visibleIds}\n grouping={grouping}\n layout={layout}\n cardWidth={cardWidth}\n cardHeight={cardHeight}\n zoomLevel={zoomLevel}\n scrollPosition={scrollPosition}\n containerDimensions={containerDimensions}\n selectedItem={selectedItem}\n hoveredGroupIndex={hoveredGroupIndex}\n isZooming={isZooming}\n viewMode={viewMode}\n cardRenderer={cardRenderer}\n resolveId={resolveId}\n emptyContent={emptyContent}\n dimensionFilter={dimensionFilter}\n onCardClick={handleCardClick}\n onPanStart={handlePanStart as (e: React.MouseEvent) => void}\n onPanMove={handlePanMove as (e: React.MouseEvent) => void}\n onPanEnd={handlePanEnd}\n onGroupHover={setHoveredGroupIndex}\n onAxisLabelClick={handleAxisLabelClick}\n onCloseDetail={closeDetail}\n containerRef={containerRef}\n axisLabelsRef={axisLabelsRef}\n spacerRef={spacerRef}\n />\n </main>\n </div>\n );\n}\n"],"names":["useRef","useState","useFilterState","useDimensionState","useZoomState","usePanning","useWheelZoom","useContainerDimensions","useEffect","useFieldExtractors","usePivotEngine","useCurrentFilters","useCurrentGroupBy","layout","useMemo","BASE_CARD_WIDTH","BASE_CARD_HEIGHT","computeLayout","CARDS_PER_COLUMN","GROUP_SPACING","useCallback","useAnimationModeTracking","useScrollSync","useViewModeScrollHandling","useCardSelection","useDetailPanelClose","useFilterOptions","_jsxs","_jsx","FilterPanelContainer","ToolbarContainer","PivotViewerMain"],"mappings":"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"}
1	+ {"version":3,"file":"PivotViewer.js","sources":["../../../PivotViewer/PivotViewer.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { PivotViewerProps } from './types';\nimport type { GroupingResult } from './engine/types';\nimport { usePivotEngine } from './hooks/usePivotEngine';\nimport { computeLayout } from './engine/layout';\nimport { useFilterState } from './hooks/useFilterState';\nimport { useDimensionState } from './hooks/useDimensionState';\nimport { useZoomState } from './hooks/useZoomState';\nimport { BASE_CARD_WIDTH, BASE_CARD_HEIGHT, CARDS_PER_COLUMN, GROUP_SPACING } from './constants';\nimport './PivotViewer.css';\nimport { PivotViewerMain } from './components/PivotViewerMain';\nimport { FilterPanelContainer } from './components/FilterPanelContainer';\nimport { ToolbarContainer } from './components/ToolbarContainer';\nimport { usePanning, useWheelZoom, useFilterOptions } from './hooks';\nimport { useContainerDimensions } from './hooks/useContainerDimensions';\nimport type { ViewMode } from './components/Toolbar';\nimport { useFieldExtractors } from './hooks/useFieldExtractors';\nimport { useCurrentFilters, useCurrentGroupBy } from './hooks/useCurrentFilters';\nimport { useCardSelection } from './hooks/useCardSelection';\nimport { useDetailPanelClose } from './hooks/useDetailPanelClose';\nimport { useScrollSync } from './hooks/useScrollSync';\nimport { useAnimationModeTracking } from './hooks/useAnimationModeTracking';\nimport { useViewModeScrollHandling } from './hooks/useViewModeScrollHandling';\n\nexport function PivotViewer<TItem extends object>({\n data,\n dimensions,\n filters,\n defaultDimensionKey,\n cardRenderer,\n detailRenderer,\n getItemId,\n searchFields,\n className,\n emptyContent,\n isLoading = false,\n colors,\n}: PivotViewerProps<TItem>) {\n // Refs\n const containerRef = useRef<HTMLDivElement>(null!);\n const filterButtonRef = useRef<HTMLButtonElement>(null!);\n const axisLabelsRef = useRef<HTMLDivElement>(null!);\n const spacerRef = useRef<HTMLDivElement>(null!);\n\n // State\n const [search, setSearch] = useState('');\n const [viewMode, setViewMode] = useState<ViewMode>('collection');\n const [filtersOpen, setFiltersOpen] = useState(false);\n const [selectedItem, setSelectedItem] = useState<TItem \| null>(null);\n const [isZooming, setIsZooming] = useState(false);\n const [visibleIds, setVisibleIds] = useState<Uint32Array>(new Uint32Array(0));\n const [grouping, setGrouping] = useState<GroupingResult>({ groups: [] });\n const [hoveredGroupIndex, setHoveredGroupIndex] = useState<number \| null>(null);\n const [preSelectionState, setPreSelectionState] = useState<{ zoom: number; scrollLeft: number; scrollTop: number } \| null>(null);\n const [, setAnimationMode] = useState<'layout' \| 'filter'>('layout');\n const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 });\n\n // Filter hooks\n const {\n filterState,\n rangeFilterState,\n expandedFilterKey,\n setExpandedFilterKey,\n handleToggleFilter,\n handleClearFilter,\n handleRangeChange,\n } = useFilterState(filters);\n\n // Dimension hooks\n const {\n activeDimensionKey,\n setActiveDimensionKey,\n activeDimension,\n dimensionFilter,\n handleAxisLabelClick,\n } = useDimensionState(dimensions, defaultDimensionKey);\n\n // Zoom and pan hooks\n const {\n zoomLevel,\n setZoomLevel,\n handleZoomIn,\n handleZoomOut,\n handleZoomSlider,\n } = useZoomState(1);\n\n const {\n isPanning,\n handlePanStart,\n handlePanMove,\n handlePanEnd,\n } = usePanning(containerRef, undefined, setScrollPosition);\n\n useWheelZoom(containerRef, zoomLevel, setZoomLevel);\n\n // Track container dimensions for responsive layout\n const containerDimensions = useContainerDimensions(containerRef, isLoading);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const handleScroll = () => {\n setScrollPosition({\n x: container.scrollLeft,\n y: container.scrollTop,\n });\n };\n\n container.addEventListener('scroll', handleScroll);\n return () => container.removeEventListener('scroll', handleScroll);\n }, []);\n\n // Build field extractors for the columnar store\n const { fieldExtractors, indexFields } = useFieldExtractors(dimensions, filters);\n\n // Initialize the Web Worker engine\n const { ready, applyFilters: engineApplyFilters, computeGrouping, sortIds } = usePivotEngine({\n data,\n fieldExtractors,\n indexFields,\n });\n\n // Build filter specs from UI state\n const currentFilters = useCurrentFilters(\n filters,\n filterState,\n rangeFilterState,\n search,\n searchFields,\n dimensionFilter,\n activeDimension,\n );\n\n const currentGroupBy = useCurrentGroupBy(activeDimensionKey, dimensions);\n\n // Apply filters\n useEffect(() => {\n if (!ready) return;\n\n engineApplyFilters(currentFilters).then((result) => {\n // If the engine failed to return any IDs while no filters are active,\n // fall back to showing the full dataset so the canvas never renders empty.\n if (result.visibleIds.length === 0 && currentFilters.length === 0 && data.length > 0) {\n const fallbackIds = new Uint32Array(data.length);\n for (let i = 0; i < data.length; i++) {\n fallbackIds[i] = i;\n }\n setVisibleIds(fallbackIds);\n return;\n }\n\n setVisibleIds(result.visibleIds);\n });\n }, [ready, currentFilters, engineApplyFilters, data.length]);\n\n // Compute grouping\n const lastGroupingRequest = useRef<{ viewMode: ViewMode; groupBy: unknown; visibleIds: Uint32Array } \| null>(null);\n \n useEffect(() => {\n if (!ready \|\| visibleIds.length === 0) {\n setGrouping({ groups: [] });\n lastGroupingRequest.current = null;\n return;\n }\n\n if (viewMode === 'collection') {\n // In collection mode, create a single group with all items\n // Sort items if activeDimensionKey is set\n if (activeDimensionKey) {\n sortIds(visibleIds, activeDimensionKey).then((sortedIds) => {\n setGrouping({\n groups: [{\n key: 'all',\n label: 'All Items',\n value: 'all',\n ids: sortedIds,\n count: sortedIds.length\n }]\n });\n });\n } else {\n setGrouping({\n groups: [{\n key: 'all',\n label: 'All Items',\n value: 'all',\n ids: visibleIds,\n count: visibleIds.length\n }]\n });\n }\n lastGroupingRequest.current = null;\n return;\n }\n\n // Check if this is the same request as last time to prevent duplicate computations\n const lastRequest = lastGroupingRequest.current;\n if (\n lastRequest &&\n lastRequest.viewMode === viewMode &&\n (lastRequest.groupBy as unknown as typeof currentGroupBy)?.field === currentGroupBy.field &&\n lastRequest.visibleIds === visibleIds\n ) {\n return;\n }\n\n lastGroupingRequest.current = { viewMode, groupBy: currentGroupBy, visibleIds };\n \n computeGrouping(visibleIds, currentGroupBy).then((result) => {\n setGrouping(result);\n });\n }, [ready, visibleIds, currentGroupBy, viewMode, computeGrouping, sortIds, activeDimensionKey]);\n\n // Compute layout\n const layout = useMemo(() => {\n // Calculate layout at base dimensions (zoom is applied as transform)\n const cardWidth = BASE_CARD_WIDTH;\n const cardHeight = BASE_CARD_HEIGHT;\n const containerWidth = containerDimensions.width / zoomLevel;\n // For grouped mode, use fixed container height to ensure stable layout during zoom\n const containerHeight = viewMode === 'collection'\n ? containerDimensions.height / zoomLevel\n : containerDimensions.height;\n\n const result = computeLayout(grouping, {\n viewMode,\n cardWidth,\n cardHeight,\n cardsPerColumn: CARDS_PER_COLUMN,\n groupSpacing: GROUP_SPACING,\n containerWidth,\n containerHeight,\n });\n\n return result;\n }, [grouping, viewMode, zoomLevel, containerDimensions.width, containerDimensions.height]);\n\n const resolveId = useCallback((item: TItem, index: number) => {\n if (getItemId) {\n const id = getItemId(item, index);\n return typeof id === 'number' ? id : index;\n }\n const id = (item as Record<string, unknown>)['id'];\n return typeof id === 'number' ? id : index;\n }, [getItemId]);\n\n // Track animation mode changes\n useAnimationModeTracking(filterState, rangeFilterState, search, activeDimensionKey, viewMode, setAnimationMode);\n\n // Sync axis labels scroll with container scroll\n useScrollSync(containerRef, axisLabelsRef, viewMode);\n\n // Handle scroll positioning when switching view modes or grouping changes\n useViewModeScrollHandling({\n containerRef,\n viewMode,\n grouping,\n layout,\n selectedItem,\n zoomLevel,\n resolveId,\n data,\n setPreSelectionState,\n });\n\n // Handle card selection (click)\n const handleCardClick = useCardSelection({\n data,\n isPanning,\n selectedItem,\n zoomLevel,\n viewMode,\n layout,\n containerDimensions,\n scrollPosition,\n preSelectionState,\n grouping,\n getItemId,\n resolveId,\n setZoomLevel,\n setIsZooming,\n setSelectedItem,\n setPreSelectionState,\n });\n\n // Handle detail panel close\n const closeDetail = useDetailPanelClose({\n selectedItem,\n preSelectionState,\n zoomLevel,\n viewMode,\n layout,\n containerDimensions,\n grouping,\n data,\n resolveId,\n setZoomLevel,\n setIsZooming,\n setSelectedItem,\n setPreSelectionState,\n });\n\n // Use base card dimensions - zoom is applied as transform in canvas\n const cardWidth = BASE_CARD_WIDTH;\n const cardHeight = BASE_CARD_HEIGHT;\n\n // Calculate filter options\n const filterOptions = useFilterOptions(data, filters, filterState, rangeFilterState);\n\n const hasFilters = Boolean(filters && filters.length > 0);\n const activeFilterCount = Object.values(filterState).reduce((sum: number, vals) => sum + (vals as Set<string>).size, 0) +\n Object.values(rangeFilterState).filter(r => r !== null).length;\n\n const viewerClassName = [\n 'pivot-viewer',\n className,\n hasFilters ? (filtersOpen ? 'filters-open' : 'filters-closed') : 'no-filters',\n viewMode === 'grouped' ? 'grouped-mode' : 'collection-mode',\n ]\n .filter(Boolean)\n .join(' ');\n\n // Map provided color overrides to CSS variables understood by the component.\n const cssVariables = useMemo(() => {\n const vars: Record<string, string> = {};\n if (!colors) return vars;\n if (colors.primaryColor) vars['--primary-color'] = colors.primaryColor;\n if (colors.primaryColorText) vars['--primary-color-text'] = colors.primaryColorText;\n if (colors.primary500) vars['--primary-500'] = colors.primary500;\n if (colors.surfaceGround) vars['--surface-ground'] = colors.surfaceGround;\n if (colors.surfaceCard) vars['--surface-card'] = colors.surfaceCard;\n if (colors.surfaceSection) vars['--surface-section'] = colors.surfaceSection;\n if (colors.surfaceOverlay) vars['--surface-overlay'] = colors.surfaceOverlay;\n if (colors.surfaceBorder) vars['--surface-border'] = colors.surfaceBorder;\n if (colors.textColor) vars['--text-color'] = colors.textColor;\n if (colors.textColorSecondary) vars['--text-color-secondary'] = colors.textColorSecondary;\n if (colors.highlightBg) vars['--highlight-bg'] = colors.highlightBg;\n if (colors.maskbg) vars['--maskbg'] = colors.maskbg;\n if (colors.focusRing) vars['--focus-ring'] = colors.focusRing;\n return vars;\n }, [colors]);\n\n return (\n <div className={viewerClassName} style={cssVariables as React.CSSProperties}>\n <FilterPanelContainer\n isOpen={filtersOpen && hasFilters}\n search={search}\n filterState={filterState}\n rangeFilterState={rangeFilterState}\n expandedFilterKey={expandedFilterKey}\n filterOptions={filterOptions}\n anchorRef={filterButtonRef}\n onClose={() => setFiltersOpen(false)}\n onSearchChange={setSearch}\n onFilterToggle={handleToggleFilter}\n onFilterClear={handleClearFilter}\n onRangeChange={handleRangeChange}\n onExpandedFilterChange={setExpandedFilterKey}\n />\n\n <main className=\"pv-main\">\n <ToolbarContainer\n hasFilters={hasFilters}\n filtersOpen={filtersOpen}\n filteredCount={visibleIds.length}\n viewMode={viewMode}\n zoomLevel={zoomLevel}\n activeDimensionKey={activeDimensionKey}\n dimensions={dimensions}\n activeFilterCount={activeFilterCount}\n onFiltersToggle={() => setFiltersOpen((prev) => !prev)}\n onViewModeChange={setViewMode}\n onZoomIn={handleZoomIn}\n onZoomOut={handleZoomOut}\n onZoomSlider={handleZoomSlider}\n onDimensionChange={setActiveDimensionKey}\n filterButtonRef={filterButtonRef}\n />\n\n <PivotViewerMain\n data={data}\n ready={ready}\n isLoading={isLoading}\n visibleIds={visibleIds}\n grouping={grouping}\n layout={layout}\n cardWidth={cardWidth}\n cardHeight={cardHeight}\n zoomLevel={zoomLevel}\n scrollPosition={scrollPosition}\n containerDimensions={containerDimensions}\n selectedItem={selectedItem}\n hoveredGroupIndex={hoveredGroupIndex}\n isZooming={isZooming}\n viewMode={viewMode}\n cardRenderer={cardRenderer}\n detailRenderer={detailRenderer}\n resolveId={resolveId}\n emptyContent={emptyContent}\n dimensionFilter={dimensionFilter}\n onCardClick={handleCardClick}\n onPanStart={handlePanStart as (e: React.MouseEvent) => void}\n onPanMove={handlePanMove as (e: React.MouseEvent) => void}\n onPanEnd={handlePanEnd}\n onGroupHover={setHoveredGroupIndex}\n onAxisLabelClick={handleAxisLabelClick}\n onCloseDetail={closeDetail}\n containerRef={containerRef}\n axisLabelsRef={axisLabelsRef}\n spacerRef={spacerRef}\n />\n </main>\n </div>\n );\n}\n"],"names":["useRef","useState","useFilterState","useDimensionState","useZoomState","usePanning","useWheelZoom","useContainerDimensions","useEffect","useFieldExtractors","usePivotEngine","useCurrentFilters","useCurrentGroupBy","layout","useMemo","BASE_CARD_WIDTH","BASE_CARD_HEIGHT","computeLayout","CARDS_PER_COLUMN","useCallback","useAnimationModeTracking","useScrollSync","useViewModeScrollHandling","useCardSelection","useDetailPanelClose","useFilterOptions","_jsxs","_jsx","FilterPanelContainer","ToolbarContainer","PivotViewerMain"],"mappings":"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"}

package/dist/cjs/PivotViewer/components/PivotCanvas.js CHANGED Viewed

@@ -5,7 +5,7 @@ var PIXI = require('pixi.js');
 var colorResolver = require('./pivot/colorResolver.js');
 var sprites = require('./pivot/sprites.js');
 var visibility = require('./pivot/visibility.js');
-var buckets = require('./pivot/buckets.js');
+var groups = require('./pivot/groups.js');
 var animation = require('./pivot/animation.js');
 var constants = require('./pivot/constants.js');
@@ -29,13 +29,12 @@ function _interopNamespaceDefault(e) {
 var PIXI__namespace = /*#__PURE__*/_interopNamespaceDefault(PIXI);
 function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeight, zoomLevel, panX, panY, viewportWidth, viewportHeight, selectedId, hoveredGroupIndex, isZooming: _isZooming = false, resolveId: _resolveId, onCardClick, onPanStart, onPanMove, onPanEnd, viewMode, cardRenderer, containerRef, }) {
-    console.log('[PivotCanvas] Render', { viewMode });
     const parentContainerRef = containerRef;
     const canvasRef = React.useRef(null);
     const spacerRef = React.useRef(null);
     const appRef = React.useRef(null);
     const rootRef = React.useRef(null);
-    const bucketsContainerRef = React.useRef(null);
+    const groupsContainerRef = React.useRef(null);
     const spritesRef = React.useRef(new Map());
     const animationFrameRef = React.useRef(0);
     const mountedRef = React.useRef(true);
@@ -48,6 +47,8 @@ function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeigh
     const previousViewModeRef = React.useRef(viewMode);
     const prevLayoutRef = React.useRef(null);
     const prevGroupingRef = React.useRef(null);
+    const prevScrollTopRef = React.useRef(0);
+    const prevScrollLeftRef = React.useRef(0);
     const cardColorsRef = React.useRef(constants.DEFAULT_COLORS);
     const cssColorResolver = React.useMemo(() => colorResolver.createCssColorResolver(), []);
     const onPanStartRef = React.useRef(onPanStart);
@@ -99,9 +100,9 @@ function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeigh
                     return;
                 }
                 appRef.current = app;
-                const bucketsContainer = new PIXI__namespace.Container();
-                bucketsContainerRef.current = bucketsContainer;
-                app.stage.addChild(bucketsContainer);
+                const groupsContainer = new PIXI__namespace.Container();
+                groupsContainerRef.current = groupsContainer;
+                app.stage.addChild(groupsContainer);
                 const root = new PIXI__namespace.Container();
                 rootRef.current = root;
                 app.stage.addChild(root);
@@ -122,6 +123,9 @@ function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeigh
                     overlayParent.appendChild(c);
                     canvasRef.current = c;
                 }
+                else {
+                    console.error('PivotCanvas: Could not find canvas element from Pixi application');
+                }
                 if (canvasRef.current && parentContainerRef.current) {
                     const parentBounds = parentContainerRef.current.getBoundingClientRect();
                     void parentBounds;
@@ -175,7 +179,7 @@ function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeigh
                 appRef.current = null;
                 rootRef.current = null;
             }
-            sprites.clearSpritePool();
+            spritesRef.current.clear();
             try {
                 const parentEl = parentContainerRef.current;
                 if (parentEl) {
@@ -223,9 +227,9 @@ function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeigh
         };
     }, [pixiReady, viewportWidth, viewportHeight]);
     React.useEffect(() => {
-        if (!bucketsContainerRef.current || !parentContainerRef.current || !pixiReady)
+        if (!groupsContainerRef.current || !parentContainerRef.current || !pixiReady)
             return;
-        buckets.updateBucketBackgrounds(bucketsContainerRef.current, parentContainerRef.current, grouping, layout, zoomLevel, cardColorsRef.current, viewMode);
+        groups.updateGroupBackgrounds(groupsContainerRef.current, parentContainerRef.current, grouping, layout, zoomLevel, cardColorsRef.current, viewMode);
         needsRenderRef.current = true;
         appRef.current?.renderer?.render(appRef.current.stage);
     }, [grouping, layout, zoomLevel, viewMode, pixiReady]);
@@ -235,22 +239,12 @@ function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeigh
         }
         const viewModeChanged = previousViewModeRef.current !== viewMode;
         const groupingChanged = prevGroupingRef.current !== grouping;
-        if (viewModeChanged || groupingChanged) {
+        const layoutChanged = prevLayoutRef.current !== layout;
+        if (viewModeChanged || groupingChanged || layoutChanged) {
             isViewTransitionRef.current = true;
             lastViewChangeTimeRef.current = Date.now();
             previousViewModeRef.current = viewMode;
             prevGroupingRef.current = grouping;
-            console.log('[PivotCanvas] View mode or grouping changed - marking sprites for cleanup');
-            for (const sprite of spritesRef.current.values()) {
-                try {
-                    if (sprite.container) {
-                        sprite.container.visible = false;
-                    }
-                    sprite.__lastHiddenAt = Date.now();
-                }
-                catch (e) {
-                }
-            }
         }
         if (spacerRef.current) {
             const spacer = spacerRef.current;
@@ -265,8 +259,11 @@ function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeigh
         const panDeltaX = panX - prevPanRef.current.x;
         const panDeltaY = panY - prevPanRef.current.y;
         prevPanRef.current = { x: panX, y: panY };
+        const currentScrollTop = parentContainerRef.current?.scrollTop || 0;
+        const currentScrollLeft = parentContainerRef.current?.scrollLeft || 0;
         visibility.syncSpritesToViewport({
             root: rootRef.current,
+            groupsContainer: groupsContainerRef.current,
             container: parentContainerRef.current,
             sprites: spritesRef.current,
             layout,
@@ -281,11 +278,16 @@ function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeigh
             zoomLevel,
             viewportWidth,
             viewportHeight,
+            viewMode,
             createCardSprite: (id, x, y) => sprites.createCardSprite(id, x, y, items, (item, e, id) => (onCardClickRef.current)(item, e, id), (e) => (onPanStart)(e), cardWidth, cardHeight, cardColorsRef.current),
             updateCardContent: (sprite, item) => sprites.updateCardContent(sprite, item, selectedId, cardWidth, cardHeight, cardColorsRef.current),
-            isViewTransition: isViewTransitionRef.current || (Date.now() - lastViewChangeTimeRef.current < 1000),
+            isViewTransition: isViewTransitionRef.current,
             prevLayout: prevLayoutRef.current,
+            prevScrollTop: prevScrollTopRef.current,
+            prevScrollLeft: prevScrollLeftRef.current,
         });
+        prevScrollTopRef.current = currentScrollTop;
+        prevScrollLeftRef.current = currentScrollLeft;
         needsRenderRef.current = true;
         if (appRef.current?.renderer && rootRef.current) {
             appRef.current.renderer.render(appRef.current.stage);
@@ -304,21 +306,6 @@ function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeigh
     React.useEffect(() => {
         prevLayoutRef.current = layout;
     }, [layout]);
-    React.useEffect(() => {
-        if (!rootRef.current || !bucketsContainerRef.current)
-            return;
-        const effectivePanX = parentContainerRef.current ? parentContainerRef.current.scrollLeft : panX;
-        const effectivePanY = parentContainerRef.current ? parentContainerRef.current.scrollTop : panY;
-        if (rootRef.current.scale && bucketsContainerRef.current.scale) {
-            rootRef.current.scale.set(zoomLevel);
-            bucketsContainerRef.current.scale.set(zoomLevel);
-        }
-        if (rootRef.current.position && bucketsContainerRef.current.position) {
-            rootRef.current.position.set(-effectivePanX, -effectivePanY);
-            bucketsContainerRef.current.position.set(-effectivePanX, -effectivePanY);
-        }
-        appRef.current?.renderer?.render(appRef.current.stage);
-    }, [zoomLevel, panX, panY]);
     React.useEffect(() => {
         if (!rootRef.current)
             return;
@@ -347,20 +334,9 @@ function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeigh
                 const effectivePanY = container.scrollTop;
                 lastScroll.x = effectivePanX;
                 lastScroll.y = effectivePanY;
-                if (rootRef.current && bucketsContainerRef.current) {
-                    if (rootRef.current.scale && bucketsContainerRef.current.scale) {
-                        rootRef.current.scale.set(zoomLevel);
-                        bucketsContainerRef.current.scale.set(zoomLevel);
-                    }
-                    const invScale = zoomLevel && zoomLevel !== 0 ? 1 / zoomLevel : 1;
-                    void invScale;
-                    if (rootRef.current.position && bucketsContainerRef.current.position) {
-                        rootRef.current.position.set(-effectivePanX, -effectivePanY);
-                        bucketsContainerRef.current.position.set(-effectivePanX, -effectivePanY);
-                    }
-                }
                 visibility.syncSpritesToViewport({
                     root: rootRef.current,
+                    groupsContainer: groupsContainerRef.current,
                     container: parentContainerRef.current,
                     sprites: spritesRef.current,
                     layout,
@@ -375,8 +351,13 @@ function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeigh
                     viewportHeight,
                     createCardSprite: (id, x, y) => sprites.createCardSprite(id, x, y, items, (item, e, id) => (onCardClickRef.current)(item, e, id), (e) => (onPanStartRef.current)(e), cardWidth, cardHeight, cardColorsRef.current),
                     updateCardContent: (sprite, item) => sprites.updateCardContent(sprite, item, selectedId, cardWidth, cardHeight, cardColorsRef.current),
-                    isViewTransition: isViewTransitionRef.current || (Date.now() - lastViewChangeTimeRef.current < 1000),
+                    isViewTransition: isViewTransitionRef.current,
+                    viewMode,
+                    prevScrollTop: prevScrollTopRef.current,
+                    prevScrollLeft: prevScrollLeftRef.current,
                 });
+                prevScrollTopRef.current = container.scrollTop || 0;
+                prevScrollLeftRef.current = container.scrollLeft || 0;
                 needsRenderRef.current = true;
                 app.renderer?.render(app.stage);
             }
@@ -408,7 +389,7 @@ function PivotCanvas({ items, layout, grouping, visibleIds, cardWidth, cardHeigh
         }
     }
     function updateHighlight() {
-        buckets.updateHighlight(bucketsContainerRef.current, parentContainerRef.current, grouping, layout, hoveredGroupIndex, cardWidth);
+        groups.updateHighlight(groupsContainerRef.current, parentContainerRef.current, grouping, layout, hoveredGroupIndex, cardWidth, zoomLevel);
     }
     return null;
 }