@cratis/components 0.1.9

package/PivotViewer/components/PivotViewerMain.tsx

@@ -0,0 +1,229 @@
+// 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

@@ -0,0 +1,220 @@
+// 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

@@ -0,0 +1,21 @@
+// 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

@@ -0,0 +1,130 @@
+// 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

@@ -0,0 +1,10 @@
+// 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

@@ -0,0 +1,12 @@
+// 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';