@cratis/components 0.1.9

package/PivotViewer/hooks/usePivotEngine.ts

@@ -0,0 +1,252 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+import type {
+  PivotStore,
+  PivotIndexes,
+  FilterSpec,
+  FilterResult,
+  GroupSpec,
+  GroupingResult,
+  WorkerInMessage,
+  WorkerOutMessage,
+  FieldValue,
+} from '../engine/types';
+import { buildStore, buildIndexes, applyFilters, computeGrouping, sortIds } from '../engine/store';
+
+export interface UsePivotEngineOptions<TItem extends object> {
+  data: TItem[];
+  fieldExtractors: Map<string, (item: TItem) => FieldValue>;
+  indexFields: string[];
+}
+
+export interface UsePivotEngineResult {
+  ready: boolean;
+  applyFilters: (filters: FilterSpec[]) => Promise<FilterResult>;
+  computeGrouping: (visibleIds: Uint32Array, groupBy: GroupSpec) => Promise<GroupingResult>;
+  sortIds: (visibleIds: Uint32Array, sortBy: string) => Promise<Uint32Array>;
+}
+
+export function usePivotEngine<TItem extends object>({
+  data,
+  fieldExtractors,
+  indexFields,
+}: UsePivotEngineOptions<TItem>): UsePivotEngineResult {
+  const [ready, setReady] = useState(false);
+  const workerRef = useRef<Worker | null>(null);
+  const indexesRef = useRef<PivotIndexes | null>(null);
+  const fallbackRef = useRef(false);
+  const storeRef = useRef<PivotStore | null>(null);
+  const pendingCallbacksRef = useRef<Map<string, (result: unknown) => void>>(new Map());
+
+  useEffect(() => {
+    const worker = new Worker(
+      new URL('../engine/pivot.worker.ts', import.meta.url),
+      { type: 'module' }
+    );
+
+    workerRef.current = worker;
+
+    worker.onmessage = (e: MessageEvent<WorkerOutMessage>) => {
+      const message = e.data;
+
+      switch (message.type) {
+        case 'indexesReady':
+          console.log('[PivotEngine] Indexes ready');
+          setReady(true);
+          break;
+
+        case 'filterResult': {
+          const callback = pendingCallbacksRef.current.get('filter');
+          if (callback) {
+            callback(message.result);
+            pendingCallbacksRef.current.delete('filter');
+          }
+          break;
+        }
+
+        case 'groupingResult': {
+          const callback = pendingCallbacksRef.current.get('grouping');
+          if (callback) {
+            callback(message.result);
+            pendingCallbacksRef.current.delete('grouping');
+          }
+          break;
+        }
+
+        case 'sortResult': {
+          const callback = pendingCallbacksRef.current.get('sort');
+          if (callback) {
+            callback(message.result);
+            pendingCallbacksRef.current.delete('sort');
+          }
+          break;
+        }
+      }
+    };
+
+    worker.onerror = (error) => {
+      console.error('[PivotEngine] Worker error:', error);
+      // enable synchronous fallback so UI can still function without worker
+      fallbackRef.current = true;
+      workerRef.current = null;
+      // if we already built store/indexes, mark ready so UI can use fallback
+      if (storeRef.current) {
+        try {
+          indexesRef.current = buildIndexes(storeRef.current, indexFields);
+        } catch (e) {
+          console.error('[PivotEngine] Failed to build indexes in fallback:', e);
+          indexesRef.current = null;
+        }
+        setReady(true);
+      }
+    };
+
+    return () => {
+      worker.terminate();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!workerRef.current) return;
+
+    console.log('[PivotEngine] Building indexes for', data.length, 'items');
+    setReady(false);
+
+    const store = buildStore(data, fieldExtractors);
+    storeRef.current = store;
+
+    // compute indexes locally for immediate fallback and cache
+    try {
+      indexesRef.current = buildIndexes(store, indexFields);
+    } catch (e) {
+      console.error('[PivotEngine] buildIndexes failed:', e);
+      indexesRef.current = null;
+    }
+
+    if (workerRef.current) {
+      const message: WorkerInMessage = {
+        type: 'buildIndexes',
+        store,
+        fields: indexFields,
+      };
+
+      workerRef.current.postMessage(message);
+    } else {
+      // no worker available, mark ready to allow fallback synchronous usage
+      setReady(true);
+    }
+  }, [data, fieldExtractors, indexFields]);
+
+  const applyFiltersCallback = useCallback(
+    (filters: FilterSpec[]): Promise<FilterResult> => {
+      return new Promise((resolve) => {
+        // If worker is not available, use synchronous fallback using local indexes
+        if (!workerRef.current || fallbackRef.current) {
+          try {
+            const store = storeRef.current;
+            const indexes = indexesRef.current;
+            if (store && indexes) {
+              const result = applyFilters(store, indexes, filters);
+              resolve(result);
+              return;
+            }
+          } catch (e) {
+            console.error('[PivotEngine] fallback applyFilters error:', e);
+          }
+
+          // if fallback not possible, return empty result
+          resolve({ visibleIds: new Uint32Array(0), count: 0 });
+          return;
+        }
+
+        pendingCallbacksRef.current.set('filter', resolve as (result: unknown) => void);
+
+        const message: WorkerInMessage = {
+          type: 'applyFilters',
+          filters,
+        };
+
+        workerRef.current.postMessage(message);
+      });
+    },
+    [ready]
+  );
+
+  const computeGroupingCallback = useCallback(
+    (visibleIds: Uint32Array, groupBy: GroupSpec): Promise<GroupingResult> => {
+      return new Promise((resolve) => {
+        // synchronous fallback if worker unavailable
+        if (!workerRef.current || fallbackRef.current) {
+          try {
+            const store = storeRef.current;
+            const indexes = indexesRef.current;
+            if (store && indexes) {
+              const result = computeGrouping(store, indexes, visibleIds, groupBy);
+              resolve(result);
+              return;
+            }
+          } catch (e) {
+            console.error('[PivotEngine] fallback computeGrouping error:', e);
+          }
+
+          resolve({ groups: [] });
+          return;
+        }
+
+        pendingCallbacksRef.current.set('grouping', resolve as (result: unknown) => void);
+
+        const message: WorkerInMessage = {
+          type: 'computeGrouping',
+          visibleIds,
+          groupBy,
+        };
+
+        workerRef.current.postMessage(message);
+      });
+    },
+    [ready]
+  );
+
+  const sortIdsCallback = useCallback(
+    (visibleIds: Uint32Array, sortBy: string): Promise<Uint32Array> => {
+      return new Promise((resolve) => {
+        // synchronous fallback if worker unavailable
+        if (!workerRef.current || fallbackRef.current) {
+          try {
+            const store = storeRef.current;
+            if (store) {
+              const result = sortIds(store, visibleIds, sortBy);
+              resolve(result);
+              return;
+            }
+          } catch (e) {
+            console.error('[PivotEngine] fallback sortIds error:', e);
+          }
+
+          resolve(visibleIds);
+          return;
+        }
+
+        pendingCallbacksRef.current.set('sort', resolve as (result: unknown) => void);
+
+        const message: WorkerInMessage = {
+          type: 'sort',
+          ids: visibleIds,
+          sortBy,
+        };
+
+        workerRef.current.postMessage(message);
+      });
+    },
+    [ready]
+  );
+
+  return {
+    ready,
+    applyFilters: applyFiltersCallback,
+    computeGrouping: computeGroupingCallback,
+    sortIds: sortIdsCallback,
+  };
+}

package/PivotViewer/hooks/useSelectedItem.ts

@@ -0,0 +1,402 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { flushSync } from 'react-dom';
+import { ZOOM_MAX } from '../utils/utils';
+
+function getOffsetWithin(element: HTMLElement, ancestor: HTMLElement) {
+  let current: HTMLElement | null = element;
+  let x = 0;
+  let y = 0;
+
+  while (current && current !== ancestor) {
+    x += current.offsetLeft;
+    y += current.offsetTop;
+    current = current.offsetParent as HTMLElement | null;
+  }
+
+  if (current !== ancestor) {
+    const containerRect = ancestor.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    x = elementRect.left - containerRect.left + ancestor.scrollLeft;
+    y = elementRect.top - containerRect.top + ancestor.scrollTop;
+  }
+
+  return { x, y };
+}
+
+function scrollCardToCenter(
+  container: HTMLElement,
+  card: HTMLElement,
+  smooth: boolean = true,
+  detailPanelWidth: number = 0
+) {
+  const { x, y } = getOffsetWithin(card, container);
+  const cardCenterX = x + card.offsetWidth / 2;
+  const cardCenterY = y + card.offsetHeight / 2;
+
+  const availableWidth = container.clientWidth - detailPanelWidth;
+  const targetX = availableWidth / 2;
+  const targetY = container.clientHeight / 2;
+
+  const maxScrollLeft = Math.max(0, container.scrollWidth - container.clientWidth);
+  const maxScrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
+  const targetLeft = Math.min(maxScrollLeft, Math.max(0, cardCenterX - targetX));
+  const targetTop = Math.min(maxScrollTop, Math.max(0, cardCenterY - targetY));
+
+  container.scrollTo({
+    left: targetLeft,
+    top: targetTop,
+    behavior: smooth ? 'smooth' : 'auto'
+  });
+}
+
+function escapeAttributeSelectorValue(value: string) {
+  return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+
+export function useSelectedItem<TItem extends object>(
+  containerRef: React.RefObject<HTMLDivElement | null>,
+  zoomLevel: number,
+  setZoomLevel: (zoom: number) => void,
+  resolveId: (item: TItem, index: number) => string | number,
+  viewMode: 'collection' | 'grouped' = 'grouped'
+) {
+  const [selectedItem, setSelectedItem] = useState<TItem | null>(null);
+  const [preSelectionState, setPreSelectionState] = useState<{ zoom: number; scrollLeft: number; scrollTop: number } | null>(null);
+  const [isZooming, setIsZooming] = useState(false);
+  const pendingCenterRaf = useRef<number | null>(null);
+
+  const focusCardById = useCallback((targetId: string | number, detailPanelWidth: number = 380) => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const selector = `[data-card-id="${escapeAttributeSelectorValue(String(targetId))}"]`;
+    const latestCard = container.querySelector(selector) as HTMLElement | null;
+    if (latestCard) {
+      scrollCardToCenter(container, latestCard, true, detailPanelWidth);
+    }
+  }, [containerRef]);
+
+  const handleCardClick = useCallback((item: TItem, e: React.MouseEvent) => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const card = (e.target as HTMLElement).closest('.pv-card') as HTMLElement;
+    if (!card) return;
+
+    const itemId = resolveId(item, 0);
+    const selectedId = selectedItem ? resolveId(selectedItem, 0) : null;
+
+    if (selectedId === itemId) {
+      if (pendingCenterRaf.current !== null && typeof window !== 'undefined') {
+        window.clearTimeout(pendingCenterRaf.current);
+        pendingCenterRaf.current = null;
+      }
+
+      if (viewMode === 'collection') {
+        setSelectedItem(null);
+        if (preSelectionState) {
+          container.scrollTo({ left: preSelectionState.scrollLeft, top: preSelectionState.scrollTop, behavior: 'smooth' });
+          setPreSelectionState(null);
+        }
+        return;
+      }
+
+      if (!preSelectionState || Math.abs(preSelectionState.zoom - zoomLevel) <= 0.001) {
+        setSelectedItem(null);
+        if (preSelectionState) {
+          container.scrollTo({ left: preSelectionState.scrollLeft, top: preSelectionState.scrollTop, behavior: 'smooth' });
+          setPreSelectionState(null);
+        }
+        return;
+      }
+
+      setIsZooming(true);
+      container.style.scrollBehavior = 'auto';
+
+      const startZoom = zoomLevel;
+      const targetZoom = preSelectionState.zoom;
+      const targetScrollLeft = preSelectionState.scrollLeft;
+      const targetScrollTop = preSelectionState.scrollTop;
+
+      const startOffset = getOffsetWithin(card, container);
+      const startCardScreenX = startOffset.x + card.offsetWidth / 2 - container.scrollLeft;
+      const startCardScreenY = startOffset.y + card.offsetHeight / 2 - container.scrollTop;
+
+      const duration = 300;
+      let startTime: number | null = null;
+
+      const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
+
+      const animate = (timestamp: number) => {
+        if (startTime === null) {
+          startTime = timestamp;
+        }
+
+        const elapsed = timestamp - startTime;
+        const progress = Math.min(1, elapsed / duration);
+        const easedProgress = easeOutCubic(progress);
+
+        const currentZoom = startZoom + (targetZoom - startZoom) * easedProgress;
+
+        flushSync(() => {
+          setZoomLevel(currentZoom);
+        });
+
+        const currentOffset = getOffsetWithin(card, container);
+        const currentCardCenterX = currentOffset.x + card.offsetWidth / 2;
+        const currentCardCenterY = currentOffset.y + card.offsetHeight / 2;
+
+        const endCardScreenX = currentCardCenterX - targetScrollLeft;
+        const endCardScreenY = currentCardCenterY - targetScrollTop;
+
+        const desiredScreenX = startCardScreenX + (endCardScreenX - startCardScreenX) * easedProgress;
+        const desiredScreenY = startCardScreenY + (endCardScreenY - startCardScreenY) * easedProgress;
+
+        const neededScrollLeft = currentCardCenterX - desiredScreenX;
+        const neededScrollTop = currentCardCenterY - desiredScreenY;
+
+        const maxScrollLeft = container.scrollWidth - container.clientWidth;
+        const maxScrollTop = container.scrollHeight - container.clientHeight;
+        container.scrollLeft = Math.max(0, Math.min(neededScrollLeft, maxScrollLeft));
+        container.scrollTop = Math.max(0, Math.min(neededScrollTop, maxScrollTop));
+
+        if (progress < 1) {
+          requestAnimationFrame(animate);
+        } else {
+          container.style.scrollBehavior = '';
+          setIsZooming(false);
+          setSelectedItem(null);
+          setPreSelectionState(null);
+          container.scrollLeft = targetScrollLeft;
+          container.scrollTop = targetScrollTop;
+        }
+      };
+
+      requestAnimationFrame(animate);
+      return;
+    }
+
+    const isFirstSelection = selectedItem === null;
+
+    if (isFirstSelection) {
+      setPreSelectionState({
+        zoom: zoomLevel,
+        scrollLeft: container.scrollLeft,
+        scrollTop: container.scrollTop,
+      });
+    }
+
+    setSelectedItem(item);
+
+    if (isFirstSelection) {
+      if (viewMode === 'collection') {
+        focusCardById(itemId, 0);
+      } else {
+        const zoomMultiplier = 1.15;
+        const minZoom = 1.2;
+        const targetZoom = Math.min(ZOOM_MAX, Math.max(minZoom, zoomLevel * zoomMultiplier));
+        const shouldZoom = Math.abs(targetZoom - zoomLevel) > 0.001;
+
+        if (shouldZoom) {
+          const selector = `[data-card-id="${escapeAttributeSelectorValue(String(itemId))}"]`;
+          const cardEl = container.querySelector(selector) as HTMLElement | null;
+
+          if (cardEl) {
+            setIsZooming(true);
+            container.style.scrollBehavior = 'auto';
+
+            const detailPanelWidth = 380;
+            const availableWidth = container.clientWidth - detailPanelWidth;
+            const targetScreenX = availableWidth / 2;
+            const targetScreenY = container.clientHeight / 2;
+
+            const startZoom = zoomLevel;
+
+            const startOffset = getOffsetWithin(cardEl, container);
+            const startCardScreenX = startOffset.x + cardEl.offsetWidth / 2 - container.scrollLeft;
+            const startCardScreenY = startOffset.y + cardEl.offsetHeight / 2 - container.scrollTop;
+
+            const duration = 300;
+            let startTime: number | null = null;
+
+            const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
+
+            const animate = (timestamp: number) => {
+              if (startTime === null) {
+                startTime = timestamp;
+              }
+
+              const elapsed = timestamp - startTime;
+              const progress = Math.min(1, elapsed / duration);
+              const easedProgress = easeOutCubic(progress);
+
+              const currentZoom = startZoom + (targetZoom - startZoom) * easedProgress;
+
+              flushSync(() => {
+                setZoomLevel(currentZoom);
+              });
+
+              const currentOffset = getOffsetWithin(cardEl, container);
+              const currentCardCenterX = currentOffset.x + cardEl.offsetWidth / 2;
+              const currentCardCenterY = currentOffset.y + cardEl.offsetHeight / 2;
+
+              const desiredScreenX = startCardScreenX + (targetScreenX - startCardScreenX) * easedProgress;
+              const desiredScreenY = startCardScreenY + (targetScreenY - startCardScreenY) * easedProgress;
+
+              const neededScrollLeft = currentCardCenterX - desiredScreenX;
+              const neededScrollTop = currentCardCenterY - desiredScreenY;
+
+              const maxScrollLeft = container.scrollWidth - container.clientWidth;
+              const maxScrollTop = container.scrollHeight - container.clientHeight;
+              container.scrollLeft = Math.max(0, Math.min(neededScrollLeft, maxScrollLeft));
+              container.scrollTop = Math.max(0, Math.min(neededScrollTop, maxScrollTop));
+
+              if (progress < 1) {
+                requestAnimationFrame(animate);
+              } else {
+                container.style.scrollBehavior = '';
+                setIsZooming(false);
+                requestAnimationFrame(() => {
+                  focusCardById(itemId, 380);
+                });
+              }
+            };
+
+            requestAnimationFrame(animate);
+          }
+        } else {
+          focusCardById(itemId, 380);
+        }
+      }
+    } else {
+      focusCardById(itemId, viewMode === 'collection' ? 0 : 380);
+    }
+  }, [selectedItem, zoomLevel, preSelectionState, resolveId, setZoomLevel, containerRef, viewMode]);
+
+  const closeDetail = useCallback(() => {
+    const container = containerRef.current;
+
+    if (pendingCenterRaf.current !== null && typeof window !== 'undefined') {
+      window.clearTimeout(pendingCenterRaf.current);
+      pendingCenterRaf.current = null;
+    }
+
+    if (preSelectionState && container && selectedItem) {
+      const itemId = resolveId(selectedItem, 0);
+      const selector = `[data-card-id="${escapeAttributeSelectorValue(String(itemId))}"]`;
+      const cardEl = container.querySelector(selector) as HTMLElement | null;
+
+      if (viewMode === 'collection') {
+        setSelectedItem(null);
+        container.scrollTo({ left: preSelectionState.scrollLeft, top: preSelectionState.scrollTop, behavior: 'smooth' });
+        setPreSelectionState(null);
+        return;
+      }
+
+      if (cardEl && Math.abs(preSelectionState.zoom - zoomLevel) > 0.001) {
+        setIsZooming(true);
+        container.style.scrollBehavior = 'auto';
+
+        const startZoom = zoomLevel;
+        const targetZoom = preSelectionState.zoom;
+        const targetScrollLeft = preSelectionState.scrollLeft;
+        const targetScrollTop = preSelectionState.scrollTop;
+
+        const startOffset = getOffsetWithin(cardEl, container);
+        const startCardScreenX = startOffset.x + cardEl.offsetWidth / 2 - container.scrollLeft;
+        const startCardScreenY = startOffset.y + cardEl.offsetHeight / 2 - container.scrollTop;
+
+        const duration = 300;
+        let startTime: number | null = null;
+
+        const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
+
+        const animate = (timestamp: number) => {
+          if (startTime === null) {
+            startTime = timestamp;
+          }
+
+          const elapsed = timestamp - startTime;
+          const progress = Math.min(1, elapsed / duration);
+          const easedProgress = easeOutCubic(progress);
+
+          const currentZoom = startZoom + (targetZoom - startZoom) * easedProgress;
+
+          flushSync(() => {
+            setZoomLevel(currentZoom);
+          });
+
+          const currentOffset = getOffsetWithin(cardEl, container);
+          const currentCardCenterX = currentOffset.x + cardEl.offsetWidth / 2;
+          const currentCardCenterY = currentOffset.y + cardEl.offsetHeight / 2;
+
+          const endCardScreenX = currentCardCenterX - targetScrollLeft;
+          const endCardScreenY = currentCardCenterY - targetScrollTop;
+
+          const desiredScreenX = startCardScreenX + (endCardScreenX - startCardScreenX) * easedProgress;
+          const desiredScreenY = startCardScreenY + (endCardScreenY - startCardScreenY) * easedProgress;
+
+          const neededScrollLeft = currentCardCenterX - desiredScreenX;
+          const neededScrollTop = currentCardCenterY - desiredScreenY;
+
+          const maxScrollLeft = container.scrollWidth - container.clientWidth;
+          const maxScrollTop = container.scrollHeight - container.clientHeight;
+          container.scrollLeft = Math.max(0, Math.min(neededScrollLeft, maxScrollLeft));
+          container.scrollTop = Math.max(0, Math.min(neededScrollTop, maxScrollTop));
+
+          if (progress < 1) {
+            requestAnimationFrame(animate);
+          } else {
+            container.style.scrollBehavior = '';
+            setIsZooming(false);
+            setSelectedItem(null);
+            setPreSelectionState(null);
+            container.scrollLeft = targetScrollLeft;
+            container.scrollTop = targetScrollTop;
+          }
+        };
+
+        requestAnimationFrame(animate);
+      } else {
+        setSelectedItem(null);
+        if (preSelectionState) {
+          setZoomLevel(preSelectionState.zoom);
+          container.scrollTo({ left: preSelectionState.scrollLeft, top: preSelectionState.scrollTop, behavior: 'smooth' });
+          setPreSelectionState(null);
+        }
+      }
+    } else {
+      setSelectedItem(null);
+      if (preSelectionState) {
+        setPreSelectionState(null);
+      }
+    }
+  }, [preSelectionState, selectedItem, zoomLevel, setZoomLevel, containerRef, resolveId, viewMode]);
+
+  const clearSelection = useCallback(() => {
+    if (selectedItem) {
+      closeDetail();
+    }
+  }, [selectedItem, closeDetail]);
+
+  useEffect(() => {
+    return () => {
+      if (typeof window !== 'undefined' && pendingCenterRaf.current !== null) {
+        window.clearTimeout(pendingCenterRaf.current);
+        pendingCenterRaf.current = null;
+      }
+    };
+  }, []);
+
+  return {
+    selectedItem,
+    isZooming,
+    handleCardClick,
+    closeDetail,
+    clearSelection,
+  };
+}