@cratis/components 0.1.9

package/PivotViewer/components/AxisLabels.tsx

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

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

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

@@ -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 { 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} />;
+}