@cratis/components 0.1.9 → 0.1.10

package/PivotViewer/components/PivotViewerMain.tsx

@@ -1,229 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import type { ReactNode } from 'react';
-import type { ItemId, LayoutResult, GroupingResult } from '../engine/types';
-import type { ViewMode } from './Toolbar';
-import type { PivotDimensionFilter } from '../hooks/useDimensionState';
-import { Spinner } from './Spinner';
-import { PivotCanvas } from './PivotCanvas';
-import { AxisLabels } from './AxisLabels';
-import { DetailPanel } from './DetailPanel';
-
-export interface PivotViewerMainProps<TItem extends object> {
-  data: TItem[];
-  ready: boolean;
-  isLoading: boolean;
-  visibleIds: Uint32Array;
-  grouping: GroupingResult;
-  layout: LayoutResult;
-  cardWidth: number;
-  cardHeight: number;
-  zoomLevel: number;
-  scrollPosition: { x: number; y: number };
-  containerDimensions: { width: number; height: number };
-  selectedItem: TItem | null;
-  hoveredGroupIndex: number | null;
-  isZooming: boolean;
-  viewMode: ViewMode;
-  cardRenderer?: (item: TItem) => ReactNode;
-  resolveId: (item: TItem, index: number) => ItemId;
-  emptyContent?: ReactNode;
-  dimensionFilter: PivotDimensionFilter;
-  onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void;
-  onPanStart: (e: React.MouseEvent) => void;
-  onPanMove: (e: React.MouseEvent) => void;
-  onPanEnd: () => void;
-  onGroupHover: (index: number | null) => void;
-  onAxisLabelClick: (value: string) => void;
-  onCloseDetail: () => void;
-  containerRef: React.RefObject<HTMLDivElement | null>;
-  axisLabelsRef: React.RefObject<HTMLDivElement | null>;
-  spacerRef: React.RefObject<HTMLDivElement | null>;
-}
-
-export function PivotViewerMain<TItem extends object>({
-  data,
-  ready,
-  isLoading,
-  visibleIds,
-  grouping,
-  layout,
-  cardWidth,
-  cardHeight,
-  zoomLevel,
-  scrollPosition,
-  containerDimensions,
-  selectedItem,
-  hoveredGroupIndex,
-  isZooming,
-  viewMode,
-  cardRenderer,
-  resolveId,
-  emptyContent,
-  dimensionFilter,
-  onCardClick,
-  onPanStart,
-  onPanMove,
-  onPanEnd,
-  onGroupHover,
-  onAxisLabelClick,
-  onCloseDetail,
-  containerRef,
-  axisLabelsRef,
-  spacerRef,
-}: PivotViewerMainProps<TItem>) {
-  const handleViewportClick = (e: React.MouseEvent) => {
-    if (isZooming || !containerRef.current) return;
-
-    const container = containerRef.current;
-    const rect = container.getBoundingClientRect();
-    // Use live DOM scroll position for accurate hit testing
-    const scrollLeft = container.scrollLeft;
-    const scrollTop = container.scrollTop;
-
-    const clickX = e.clientX - rect.left + scrollLeft;
-    const clickY = e.clientY - rect.top + scrollTop;
-
-    const worldX = clickX / zoomLevel;
-    const worldY = clickY / zoomLevel;
-
-    // Check visible items
-    for (let i = 0; i < visibleIds.length; i++) {
-      const id = visibleIds[i];
-      const pos = layout.positions.get(id);
-      if (pos) {
-        if (worldX >= pos.x && worldX <= pos.x + cardWidth &&
-            worldY >= pos.y && worldY <= pos.y + cardHeight) {
-          const item = data[id];
-          if (item) {
-            onCardClick(item, e.nativeEvent as unknown as MouseEvent, id);
-          }
-          return;
-        }
-      }
-    }
-  };
-
-  const handleViewportMouseMove = (e: React.MouseEvent) => {
-    if (isZooming || !containerRef.current) return;
-
-    const container = containerRef.current;
-    const rect = container.getBoundingClientRect();
-    const scrollLeft = container.scrollLeft;
-    const scrollTop = container.scrollTop;
-
-    const mouseX = e.clientX - rect.left + scrollLeft;
-    const mouseY = e.clientY - rect.top + scrollTop;
-
-    const worldX = mouseX / zoomLevel;
-    const worldY = mouseY / zoomLevel;
-
-    let isOverCard = false;
-    for (let i = 0; i < visibleIds.length; i++) {
-      const id = visibleIds[i];
-      const pos = layout.positions.get(id);
-      if (pos) {
-        if (worldX >= pos.x && worldX <= pos.x + cardWidth &&
-            worldY >= pos.y && worldY <= pos.y + cardHeight) {
-          isOverCard = true;
-          break;
-        }
-      }
-    }
-
-    container.style.cursor = isOverCard ? 'pointer' : 'default';
-  };
-
-  return isLoading ? (
-    <Spinner />
-  ) : (
-    <div className="pv-groups-wrapper">
-      <div style={{ position: 'relative', flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
-        <div
-          className={`pv-viewport ${isZooming ? 'pv-zooming' : ''}`}
-          ref={containerRef}
-          style={{ overflow: 'auto', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1 }}
-          onClick={handleViewportClick}
-          onMouseMove={handleViewportMouseMove}
-        >
-          {/* Spacer for scrolling - explicitly rendered to allow synchronous updates during animation */}
-          <div
-              ref={spacerRef}
-              style={{
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  width: layout.totalWidth * zoomLevel,
-                  height: layout.totalHeight * zoomLevel,
-                  pointerEvents: 'none'
-              }}
-          />
-
-          {!ready && (
-            <div className="pv-loading">Building indexes...</div>
-          )}
-
-          {ready && visibleIds.length === 0 && (
-            <div className="pv-empty">
-              {emptyContent ?? 'No items to display.'}
-            </div>
-          )}
-
-          {ready && visibleIds.length > 0 && (
-            <PivotCanvas
-              items={data}
-              layout={layout}
-              grouping={grouping}
-              visibleIds={visibleIds}
-              cardWidth={cardWidth}
-              cardHeight={cardHeight}
-              zoomLevel={zoomLevel}
-              panX={scrollPosition.x}
-              panY={scrollPosition.y}
-              viewportWidth={containerDimensions.width}
-              viewportHeight={containerDimensions.height}
-              selectedId={selectedItem ? resolveId(selectedItem, 0) : null}
-              hoveredGroupIndex={hoveredGroupIndex}
-              isZooming={isZooming}
-              cardRenderer={cardRenderer}
-              resolveId={resolveId}
-              onCardClick={onCardClick}
-              onPanStart={onPanStart as any}
-              onPanMove={onPanMove as any}
-              onPanEnd={onPanEnd}
-              containerRef={containerRef}
-              viewMode={viewMode}
-            />
-          )}
-        </div>
-        <DetailPanel
-          selectedItem={selectedItem}
-          onClose={onCloseDetail}
-        />
-      </div>
-
-      {viewMode === 'grouped' && grouping.groups.length > 0 && (
-        <AxisLabels
-            groups={grouping.groups.map((g) => ({
-            key: g.key,
-            value: g.value,
-            label: String(g.value),
-            items: [],
-            count: g.ids.length,
-          }))}
-          bucketWidths={layout.bucketWidths || []}
-          zoomLevel={zoomLevel}
-          dimensionFilter={dimensionFilter}
-          hoveredGroup={hoveredGroupIndex !== null ? String(grouping.groups[hoveredGroupIndex]?.value) : null}
-          onHover={(label) => {
-            const index = grouping.groups.findIndex(g => String(g.value) === label);
-            onGroupHover(index >= 0 ? index : null);
-          }}
-          onClick={onAxisLabelClick}
-          containerRef={axisLabelsRef}
-        />
-      )}
-    </div>
-  );
-}

package/PivotViewer/components/RangeHistogramFilter.tsx

@@ -1,220 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { PivotPrimitive } from '../types';
-
-export interface RangeHistogramFilterProps {
-  values: PivotPrimitive[];
-  min: number;
-  max: number;
-  buckets?: number;
-  selectedRange: [number, number] | null;
-  onChange: (range: [number, number] | null) => void;
-}
-
-interface HistogramBucket {
-  start: number;
-  end: number;
-  count: number;
-  maxCount: number;
-}
-
-export function RangeHistogramFilter({
-  values,
-  min,
-  max,
-  buckets = 20,
-  selectedRange,
-  onChange,
-}: RangeHistogramFilterProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isDragging, setIsDragging] = useState<'left' | 'right' | 'range' | null>(null);
-  const [dragStart, setDragStart] = useState<{ x: number; range: [number, number] } | null>(null);
-
-  const numericValues = useMemo(() => {
-    return values
-      .map((v) => {
-        if (typeof v === 'number') return v;
-        if (v instanceof Date) return v.getTime();
-        const parsed = Number(v);
-        return Number.isNaN(parsed) ? null : parsed;
-      })
-      .filter((v): v is number => v !== null);
-  }, [values]);
-
-  const histogram = useMemo((): HistogramBucket[] => {
-    const range = max - min;
-    if (range <= 0 || numericValues.length === 0) {
-      return [];
-    }
-
-    const bucketSize = range / buckets;
-    const bucketCounts: number[] = Array(buckets).fill(0);
-
-    numericValues.forEach((value) => {
-      const bucketIndex = Math.min(
-        Math.floor((value - min) / bucketSize),
-        buckets - 1
-      );
-      if (bucketIndex >= 0 && bucketIndex < buckets) {
-        bucketCounts[bucketIndex]++;
-      }
-    });
-
-    const maxCount = Math.max(...bucketCounts, 1);
-
-    return bucketCounts.map((count, i) => ({
-      start: min + i * bucketSize,
-      end: min + (i + 1) * bucketSize,
-      count,
-      maxCount,
-    }));
-  }, [numericValues, min, max, buckets]);
-
-  const currentRange = selectedRange ?? [min, max];
-
-  const getPositionFromValue = useCallback(
-    (value: number) => {
-      const range = max - min;
-      if (range <= 0) return 0;
-      return ((value - min) / range) * 100;
-    },
-    [min, max]
-  );
-
-  const handleMouseDown = (
-    e: React.MouseEvent,
-    handle: 'left' | 'right' | 'range'
-  ) => {
-    (e as any).preventDefault?.();
-    setIsDragging(handle);
-    setDragStart({ x: e.clientX, range: [...currentRange] as [number, number] });
-  };
-
-  useEffect(() => {
-    if (!isDragging || !dragStart || !containerRef.current) return;
-
-    const container = containerRef.current;
-    const rect = container.getBoundingClientRect();
-    const range = max - min;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const deltaX = e.clientX - dragStart.x;
-      const deltaPercent = (deltaX / rect.width) * 100;
-      const deltaValue = (deltaPercent / 100) * range;
-
-      let newRange: [number, number] = [...dragStart.range];
-
-      if (isDragging === 'left') {
-        newRange[0] = Math.max(min, Math.min(dragStart.range[0] + deltaValue, newRange[1] - range * 0.01));
-      } else if (isDragging === 'right') {
-        newRange[1] = Math.min(max, Math.max(dragStart.range[1] + deltaValue, newRange[0] + range * 0.01));
-      } else if (isDragging === 'range') {
-        const rangeWidth = dragStart.range[1] - dragStart.range[0];
-        let newStart = dragStart.range[0] + deltaValue;
-        let newEnd = dragStart.range[1] + deltaValue;
-
-        if (newStart < min) {
-          newStart = min;
-          newEnd = min + rangeWidth;
-        }
-        if (newEnd > max) {
-          newEnd = max;
-          newStart = max - rangeWidth;
-        }
-
-        newRange = [newStart, newEnd];
-      }
-
-      onChange(newRange);
-    };
-
-    const handleMouseUp = () => {
-      setIsDragging(null);
-      setDragStart(null);
-    };
-
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [isDragging, dragStart, min, max, onChange]);
-
-  const handleBarClick = (bucket: HistogramBucket) => {
-    onChange([bucket.start, bucket.end]);
-  };
-
-  const handleClear = () => {
-    onChange(null);
-  };
-
-  const leftPos = getPositionFromValue(currentRange[0]);
-  const rightPos = getPositionFromValue(currentRange[1]);
-
-  const formatValue = (value: number) => {
-    if (Number.isInteger(value)) return value.toString();
-    return value.toFixed(1);
-  };
-
-  return (
-    <div className="pv-range-histogram" ref={containerRef}>
-      <div className="pv-histogram-bars">
-        {histogram.map((bucket, i) => {
-          const heightPercent = (bucket.count / bucket.maxCount) * 100;
-          const isInRange =
-            bucket.start >= currentRange[0] && bucket.end <= currentRange[1];
-          const isPartiallyInRange =
-            bucket.end > currentRange[0] && bucket.start < currentRange[1];
-
-          return (
-            <button
-              key={i}
-              className={`pv-histogram-bar ${isInRange ? 'in-range' : ''} ${isPartiallyInRange && !isInRange ? 'partial' : ''}`}
-              style={{ height: `${heightPercent}%` }}
-              onClick={() => handleBarClick(bucket)}
-              title={`${formatValue(bucket.start)} - ${formatValue(bucket.end)}: ${bucket.count} items`}
-              type="button"
-            />
-          );
-        })}
-      </div>
-
-      <div className="pv-range-slider">
-        <div className="pv-range-track" />
-        <div
-          className="pv-range-selection"
-          style={{
-            left: `${leftPos}%`,
-            width: `${rightPos - leftPos}%`,
-          }}
-          onMouseDown={(e) => handleMouseDown(e, 'range')}
-        />
-        <div
-          className="pv-range-handle pv-range-handle-left"
-          style={{ left: `${leftPos}%` }}
-          onMouseDown={(e) => handleMouseDown(e, 'left')}
-        />
-        <div
-          className="pv-range-handle pv-range-handle-right"
-          style={{ left: `${rightPos}%` }}
-          onMouseDown={(e) => handleMouseDown(e, 'right')}
-        />
-      </div>
-
-      <div className="pv-range-labels">
-        <span className="pv-range-value">{formatValue(currentRange[0])}</span>
-        <span className="pv-range-value">{formatValue(currentRange[1])}</span>
-      </div>
-
-      {selectedRange && (
-        <button type="button" className="pv-range-clear" onClick={handleClear}>
-          Clear Range
-        </button>
-      )}
-    </div>
-  );
-}

package/PivotViewer/components/Spinner.tsx

@@ -1,21 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import './Spinner.css';
-
-export function Spinner() {
-  return (
-    <div className="pv-loading">
-      <div className="pv-spinner">
-        <div className="pv-spinner-ring" />
-        <div className="pv-spinner-ring" />
-        <div className="pv-spinner-ring" />
-        <div className="pv-spinner-ring" />
-        <div className="pv-spinner-ring" />
-        <div className="pv-spinner-ring" />
-        <div className="pv-spinner-ring" />
-        <div className="pv-spinner-ring" />
-      </div>
-    </div>
-  );
-}

package/PivotViewer/components/Toolbar.tsx

@@ -1,130 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import type { PivotDimension } from '../types';
-import { ZOOM_MIN, ZOOM_MAX, ZOOM_STEP } from '../utils/utils';
-
-export type ViewMode = 'collection' | 'grouped';
-
-export interface ToolbarProps<TItem extends object> {
-  hasFilters: boolean;
-  filtersOpen: boolean;
-  filteredCount: number;
-  viewMode: ViewMode;
-  zoomLevel: number;
-  activeDimensionKey: string;
-  dimensions: PivotDimension<TItem>[];
-  activeFilterCount: number;
-  onFiltersToggle: () => void;
-  onViewModeChange: (mode: ViewMode) => void;
-  onZoomIn: () => void;
-  onZoomOut: () => void;
-  onZoomSlider: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onDimensionChange: (key: string) => void;
-  filterButtonRef: React.RefObject<HTMLButtonElement | null>;
-}
-
-export function Toolbar<TItem extends object>({
-  hasFilters,
-  filtersOpen,
-  filteredCount,
-  viewMode,
-  zoomLevel,
-  activeDimensionKey,
-  dimensions,
-  activeFilterCount,
-  onFiltersToggle,
-  onViewModeChange,
-  onZoomIn,
-  onZoomOut,
-  onZoomSlider,
-  onDimensionChange,
-  filterButtonRef,
-}: ToolbarProps<TItem>) {
-  const labelText = 'Sort by';
-
-  return (
-    <header className="pv-toolbar">
-      <div className="pv-toolbar-left">
-        {hasFilters && (
-          <button
-            ref={filterButtonRef}
-            type="button"
-            className={`pv-filter-icon-button ${filtersOpen ? 'active' : ''}`}
-            onClick={onFiltersToggle}
-            title="Filters"
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
-            </svg>
-            {activeFilterCount > 0 && (
-              <span className="pv-filter-badge">{activeFilterCount}</span>
-            )}
-          </button>
-        )}
-        <h1>Pivot Viewer</h1>
-        <span className="pv-count">{filteredCount} events</span>
-      </div>
-      <div className="pv-toolbar-right">
-        <div className="pv-zoom-controls">
-          <button
-            type="button"
-            onClick={onZoomOut}
-            disabled={zoomLevel <= ZOOM_MIN}
-            title="Zoom out"
-          >
-            −
-          </button>
-          <input
-            type="range"
-            className="pv-zoom-slider"
-            min={ZOOM_MIN}
-            max={ZOOM_MAX}
-            step={ZOOM_STEP}
-            value={zoomLevel}
-            onChange={onZoomSlider}
-            title={`Zoom: ${Math.round(zoomLevel * 100)}%`}
-          />
-          <span className="pv-zoom-level">{Math.round(zoomLevel * 100)}%</span>
-          <button
-            type="button"
-            onClick={onZoomIn}
-            disabled={zoomLevel >= ZOOM_MAX}
-            title="Zoom in"
-          >
-            +
-          </button>
-        </div>
-        <div className="pv-view-toggle">
-          <button
-            type="button"
-            className={viewMode === 'collection' ? 'active' : ''}
-            onClick={() => onViewModeChange('collection')}
-          >
-            Collection
-          </button>
-          <button
-            type="button"
-            className={viewMode === 'grouped' ? 'active' : ''}
-            onClick={() => onViewModeChange('grouped')}
-          >
-            Buckets
-          </button>
-        </div>
-        <label className="pv-dimension-select">
-          <span>{labelText}</span>
-          <select
-            value={activeDimensionKey}
-            onChange={(event) => onDimensionChange(event.target.value)}
-          >
-            {dimensions.map((dimension) => (
-              <option key={dimension.key} value={dimension.key}>
-                {dimension.label}
-              </option>
-            ))}
-          </select>
-        </label>
-      </div>
-    </header>
-  );
-}

package/PivotViewer/components/ToolbarContainer.tsx

@@ -1,10 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { Toolbar, type ToolbarProps } from './Toolbar';
-
-export type ToolbarContainerProps<TItem extends object> = ToolbarProps<TItem>;
-
-export function ToolbarContainer<TItem extends object>(props: ToolbarContainerProps<TItem>) {
-  return <Toolbar {...props} />;
-}

package/PivotViewer/components/index.ts

@@ -1,12 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-export { PivotCanvas } from './PivotCanvas';
-export { FilterPanel } from './FilterPanel';
-export { Toolbar } from './Toolbar';
-export { DetailPanel } from './DetailPanel';
-export { AxisLabels } from './AxisLabels';
-export { Spinner } from './Spinner';
-export { RangeHistogramFilter } from './RangeHistogramFilter';
-
-export type { ViewMode } from './Toolbar';