@cratis/components 0.1.9 → 0.1.10

package/PivotViewer/components/AxisLabels.tsx

@@ -1,69 +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 { PivotGroup } from '../types';
-import { GROUP_SPACING } from '../constants';
-
-export interface AxisLabelsProps<TItem extends object> {
-  groups: PivotGroup<TItem>[];
-  bucketWidths: number[];
-  dimensionFilter: string | null;
-  hoveredGroup: string | null;
-  zoomLevel: number;
-  onHover: (key: string | null) => void;
-  onClick: (key: string) => void;
-  containerRef: React.RefObject<HTMLDivElement | null>;
-}
-
-export function AxisLabels<TItem extends object>({
-  groups,
-  bucketWidths,
-  dimensionFilter,
-  hoveredGroup,
-  zoomLevel,
-  onHover,
-  onClick,
-  containerRef,
-}: AxisLabelsProps<TItem>) {
-  return (
-    <div
-      className="pv-axis-labels"
-      ref={containerRef}
-      style={{
-        pointerEvents: 'none',
-        gap: `${GROUP_SPACING * zoomLevel}px`,
-        paddingLeft: 0,
-        paddingRight: 0,
-        overflowX: 'hidden',
-        whiteSpace: 'nowrap',
-      }}
-    >
-      {groups.map((group, index) => {
-        const isSelected = dimensionFilter === group.key;
-        const baseBucketWidth = bucketWidths[index] || 0;
-        // Apply zoom to bucket width
-        const bucketWidth = baseBucketWidth * zoomLevel;
-        // Width is just the bucket width - spacing is handled by CSS gap
-        const width = bucketWidth;
-
-        return (
-          <button
-            key={group.key}
-            type="button"
-            className={`pv-axis-label ${hoveredGroup === group.key ? 'highlighted' : ''} ${isSelected ? 'selected' : ''}`}
-            style={{
-              width,
-              pointerEvents: 'auto'
-            }}
-            onMouseEnter={() => onHover(group.key)}
-            onMouseLeave={() => onHover(null)}
-            onClick={() => onClick(group.key)}
-          >
-            <span className="pv-axis-label-text">{group.label}</span>
-            <span className="pv-axis-label-count">{group.count ?? group.items.length}</span>
-          </button>
-        );
-      })}
-    </div>
-  );
-}

package/PivotViewer/components/DetailPanel.tsx

@@ -1,108 +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 { AnimatePresence, motion } from 'framer-motion';
-
-type WithRecord<TItem> = TItem extends Record<string, unknown> ? TItem : never;
-
-export interface DetailPanelProps<TItem extends object> {
-  selectedItem: TItem | null;
-  onClose: () => void;
-}
-
-export function DetailPanel<TItem extends object>({
-  selectedItem,
-  onClose,
-}: DetailPanelProps<TItem>) {
-  const selectedRecord = selectedItem as WithRecord<TItem> | null;
-
-  const selectedContent = selectedRecord
-    ? ((selectedRecord['content'] as Record<string, unknown> | undefined) ?? {})
-    : {};
-
-  const metadataEntries = selectedRecord
-    ? (
-        [
-          ['Type', selectedRecord['type']],
-          [
-            'Occurred',
-            selectedRecord['occurred'] instanceof Date
-              ? (selectedRecord['occurred'] as Date).toLocaleString()
-              : selectedRecord['occurred']
-              ? new Date(String(selectedRecord['occurred'])).toLocaleString()
-              : undefined,
-          ],
-          ['Service', selectedRecord['service']],
-          ['Environment', selectedRecord['environment']],
-          ['Tenant', selectedRecord['tenant']],
-          ['Correlation Id', selectedRecord['correlationId']],
-        ] as Array<[string, unknown]>
-      ).filter(([, value]) => value !== undefined && value !== null)
-    : [];
-
-  const causation = Array.isArray(selectedRecord?.['causation'])
-    ? (selectedRecord?.['causation'] as unknown[])
-    : [];
-
-  return (
-    <AnimatePresence>
-      {selectedRecord && (
-        <motion.aside
-          className="pv-detail-panel"
-          initial={{ x: '100%' }}
-          animate={{ x: 0 }}
-          exit={{ x: '100%' }}
-          transition={{ type: 'spring', stiffness: 400, damping: 35 }}
-        >
-          <header>
-            <div>
-              <h2>{String(selectedRecord['name'] ?? selectedRecord['type'] ?? 'Event')}</h2>
-              {selectedRecord['type'] ? <p>{String(selectedRecord['type'])}</p> : null}
-            </div>
-            <button type="button" onClick={onClose} title="Close">
-              ×
-            </button>
-          </header>
-          <div className="pv-detail-panel-content">
-            {metadataEntries.length > 0 && (
-              <section className="pv-detail-meta">
-                <h3>Metadata</h3>
-                <dl>
-                  {metadataEntries.map(([key, value]) => (
-                    <div key={key}>
-                      <dt>{key}</dt>
-                      <dd>{String(value)}</dd>
-                    </div>
-                  ))}
-                </dl>
-              </section>
-            )}
-            {causation.length > 0 && (
-              <section className="pv-detail-causation">
-                <h3>Causation</h3>
-                <div className="pv-pill-row">
-                  {causation.map((value, index) => (
-                    <span key={`${value}-${index}`} className="pv-pill">
-                      {String(value)}
-                    </span>
-                  ))}
-                </div>
-              </section>
-            )}
-            <section className="pv-detail-content">
-              <h3>Content</h3>
-              <dl>
-                {Object.entries(selectedContent).map(([key, value]) => (
-                  <div key={key}>
-                    <dt>{key}</dt>
-                    <dd>{typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value)}</dd>
-                  </div>
-                ))}
-              </dl>
-            </section>
-          </div>
-        </motion.aside>
-      )}
-    </AnimatePresence>
-  );
-}

package/PivotViewer/components/FilterPanel.tsx

@@ -1,189 +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 { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { AnimatePresence, motion } from 'framer-motion';
-import type { PivotFilter, PivotFilterOption, PivotPrimitive } from '../types';
-import type { FilterState, RangeFilterState } from '../utils/utils';
-import { renderOptionCount } from '../utils/utils';
-import { RangeHistogramFilter } from './RangeHistogramFilter';
-
-export interface FilterPanelProps<TItem extends object> {
-  isOpen: boolean;
-  search: string;
-  filterState: FilterState;
-  rangeFilterState: RangeFilterState;
-  expandedFilterKey: string | null;
-  filterOptions: {
-    filter: PivotFilter<TItem>;
-    options: PivotFilterOption[];
-    numericRange?: { min: number; max: number; values: PivotPrimitive[] };
-  }[];
-  anchorRef: React.RefObject<HTMLButtonElement | null>;
-  onClose: () => void;
-  onSearchChange: (value: string) => void;
-  onFilterToggle: (filterKey: string, optionKey: string, multi: boolean | undefined) => void;
-  onFilterClear: (filterKey: string) => void;
-  onRangeChange: (filterKey: string, range: [number, number] | null) => void;
-  onExpandedFilterChange: (key: string | null) => void;
-}
-
-export function FilterPanel<TItem extends object>({
-  isOpen,
-  search,
-  filterState,
-  rangeFilterState,
-  expandedFilterKey,
-  filterOptions,
-  anchorRef,
-  onClose,
-  onSearchChange,
-  onFilterToggle,
-  onFilterClear,
-  onRangeChange,
-  onExpandedFilterChange,
-}: FilterPanelProps<TItem>) {
-  const panelRef = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-
-  // Calculate position when opening
-  useEffect(() => {
-    if (isOpen && anchorRef.current) {
-      const rect = anchorRef.current.getBoundingClientRect();
-      setPosition({
-        top: rect.bottom + 8,
-        left: rect.left,
-      });
-    }
-  }, [isOpen, anchorRef]);
-
-  // Handle click outside to close
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as Node;
-      const panel = panelRef.current;
-      const anchor = anchorRef.current;
-
-      if (panel && !panel.contains(target) && anchor && !anchor.contains(target)) {
-        onClose();
-      }
-    };
-
-    // Use capture phase to ensure we catch the event before any other handlers
-    // Use timeout to avoid closing immediately when clicking the button to open
-    const timeoutId = setTimeout(() => {
-      document.addEventListener('mousedown', handleClickOutside, true);
-    }, 0);
-
-    return () => {
-      clearTimeout(timeoutId);
-      document.removeEventListener('mousedown', handleClickOutside, true);
-    };
-  }, [isOpen, anchorRef, onClose]);
-
-  return createPortal(
-    <AnimatePresence initial={false}>
-      {isOpen && (
-        <motion.aside
-          ref={panelRef}
-          className="pv-filter-dropdown"
-          style={{
-            position: 'fixed',
-            left: position.left,
-            top: position.top,
-          }}
-          initial={{ opacity: 0, y: -8 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -8 }}
-          transition={{ duration: 0.15 }}
-        >
-          <div className="pv-filter-dropdown-content">
-            <div className="pv-search">
-              <input
-                type="search"
-                placeholder="Search events"
-                value={search}
-                onChange={(event) => onSearchChange(event.target.value)}
-              />
-            </div>
-            <div className="pv-filter-groups">
-              {filterOptions.map(({ filter, options, numericRange }) => {
-                const selections = filterState[filter.key] ?? new Set<string>();
-                const rangeSelection = rangeFilterState[filter.key];
-                const isExpanded = expandedFilterKey === filter.key;
-                const isNumeric = filter.type === 'number';
-
-                return (
-                  <div key={filter.key} className={`pv-filter ${isExpanded ? 'expanded' : ''}`}>
-                    <button
-                      type="button"
-                      className="pv-filter-trigger"
-                      onClick={() => onExpandedFilterChange(isExpanded ? null : filter.key)}
-                    >
-                      <span className="pv-filter-label">{filter.label}</span>
-                      <span className="pv-filter-trigger-meta">
-                        {!isNumeric && selections.size > 0 && <span className="pv-filter-count">{selections.size}</span>}
-                        {isNumeric && rangeSelection && <span className="pv-filter-count">Range</span>}
-                        <span className="pv-filter-chevron" />
-                      </span>
-                    </button>
-                    <div className={`pv-filter-content ${isExpanded ? 'expanded' : ''}`}>
-                      {isNumeric && numericRange ? (
-                        <RangeHistogramFilter
-                          values={numericRange.values}
-                          min={numericRange.min}
-                          max={numericRange.max}
-                          buckets={filter.buckets ?? 20}
-                          selectedRange={rangeSelection ?? null}
-                          onChange={(range) => onRangeChange(filter.key, range)}
-                        />
-                      ) : (
-                        <>
-                          <ul>
-                            {options.map((option) => {
-                              const optionKey = option.key;
-                              const checked = selections.has(optionKey);
-                              return (
-                                <li key={option.key}>
-                                  <label>
-                                    <input
-                                      type={filter.multi ? 'checkbox' : 'radio'}
-                                      name={`filter-${filter.key}`}
-                                      checked={checked}
-                                      onChange={() =>
-                                        onFilterToggle(filter.key, optionKey, filter.multi ?? false)
-                                      }
-                                    />
-                                    <span>{option.label}</span>
-                                    <span className="pv-option-count">{renderOptionCount(option.count)}</span>
-                                  </label>
-                                </li>
-                              );
-                            })}
-                          </ul>
-                          {selections.size > 0 && (
-                            <button
-                              type="button"
-                              className="pv-filter-clear"
-                              onClick={() => onFilterClear(filter.key)}
-                            >
-                              Clear
-                            </button>
-                          )}
-                        </>
-                      )}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        </motion.aside>
-      )}
-    </AnimatePresence>,
-    document.body
-  );
-}

package/PivotViewer/components/FilterPanelContainer.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 { FilterPanel, type FilterPanelProps } from './FilterPanel';
-
-export type FilterPanelContainerProps<TItem extends object> = FilterPanelProps<TItem>;
-
-export function FilterPanelContainer<TItem extends object>(props: FilterPanelContainerProps<TItem>) {
-  return <FilterPanel {...props} />;
-}