@ifc-lite/viewer 1.19.1 → 1.21.0

package/src/components/viewer/DeviationPanel.tsx

@@ -0,0 +1,172 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * BIM ↔ scan deviation heatmap controls.
+ *
+ * Renders a "Compute Deviation" button when the scene has at least
+ * one mesh and one point cloud. Once compute completes, exposes a
+ * range slider + diverging-ramp legend; the splat shader's
+ * deviation colour mode then visualises signed distance to the
+ * nearest mesh surface.
+ *
+ * Lives inside the `PointCloudPanel`; rendered conditionally on
+ * `pointCloudAssetCount > 0`.
+ */
+
+import { useCallback, useState } from 'react';
+import { useViewerStore } from '@/store';
+import { getGlobalRenderer } from '@/hooks/useBCF';
+import { cn } from '@/lib/utils';
+
+export interface DeviationPanelProps {
+  /** Total number of triangles currently in the scene — gates the
+   *  compute button on the existence of a BIM model. */
+  triangleCount: number;
+}
+
+export function DeviationPanel({ triangleCount }: DeviationPanelProps) {
+  const halfRange = useViewerStore((s) => s.pointCloudDeviationHalfRange);
+  const setHalfRange = useViewerStore((s) => s.setPointCloudDeviationHalfRange);
+  const computed = useViewerStore((s) => s.pointCloudDeviationComputed);
+  const setComputed = useViewerStore((s) => s.setPointCloudDeviationComputed);
+  const colorMode = useViewerStore((s) => s.pointCloudColorMode);
+  const setColorMode = useViewerStore((s) => s.setPointCloudColorMode);
+
+  const [running, setRunning] = useState(false);
+  const [stats, setStats] = useState<{
+    triangles: number;
+    points: number;
+    durationMs: number;
+  } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCompute = useCallback(async () => {
+    const renderer = getGlobalRenderer();
+    if (!renderer) {
+      setError('Renderer not initialised yet.');
+      return;
+    }
+    setError(null);
+    setRunning(true);
+    const t0 = performance.now();
+    try {
+      const result = await renderer.computeDeviations({ maxRange: 1.0 });
+      const dt = performance.now() - t0;
+      if (result.pointsProcessed === 0) {
+        setError('No points processed — load a point cloud first.');
+        setRunning(false);
+        return;
+      }
+      if (result.bvhTriangles === 0) {
+        setError('No mesh geometry in the scene — load an IFC first.');
+        setRunning(false);
+        return;
+      }
+      setStats({
+        triangles: result.bvhTriangles,
+        points: result.pointsProcessed,
+        durationMs: dt,
+      });
+      setComputed(true);
+      // Default-pick a sensible half-range from the BVH's bbox if the
+      // user hasn't touched the slider yet (initial 5 cm is fine for
+      // small models but useless for a city-block scan).
+      if (halfRange === 0.05 && result.suggestedHalfRange !== 0.05) {
+        setHalfRange(result.suggestedHalfRange);
+      }
+      // Auto-switch the colour mode to deviation so the user sees
+      // the result immediately.
+      setColorMode('deviation');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setRunning(false);
+    }
+  }, [halfRange, setHalfRange, setColorMode, setComputed]);
+
+  // Hide the panel entirely when there's no BIM to compare against.
+  // Point-cloud-only sessions (just a LAS / IFCx scan) have nothing
+  // to deviate from so the button would always fail.
+  if (triangleCount === 0) return null;
+
+  return (
+    <div className="flex flex-col gap-1 mt-1 pt-1 border-t border-border/40">
+      <span className="text-[9px] uppercase text-muted-foreground tracking-wider">
+        Deviation (BIM ↔ scan)
+      </span>
+      <button
+        type="button"
+        onClick={handleCompute}
+        disabled={running}
+        className={cn(
+          'text-xs px-2 py-1 rounded transition-colors',
+          running
+            ? 'bg-muted text-muted-foreground'
+            : 'bg-teal-600 text-white hover:bg-teal-500 disabled:opacity-50',
+        )}
+        title={`Build BVH from ${triangleCount.toLocaleString()} triangles, then signed-distance every loaded point against the nearest surface`}
+      >
+        {running ? 'Computing…' : computed ? 'Recompute' : 'Compute deviation'}
+      </button>
+      {error && (
+        <span className="text-[10px] text-destructive">{error}</span>
+      )}
+      {stats && (
+        <div className="text-[10px] text-muted-foreground">
+          {stats.points.toLocaleString()} pts vs.{' '}
+          {stats.triangles.toLocaleString()} tris in{' '}
+          {Math.round(stats.durationMs)} ms
+        </div>
+      )}
+
+      {computed && (
+        <>
+          {/* Range slider: half-width in mm. Range from 1 mm to 1 m
+              (logarithmic feel via the millimetre conversion). */}
+          <label className="flex items-center gap-2 mt-1">
+            <span className="text-[10px] text-muted-foreground w-12 shrink-0">
+              ±{(halfRange * 1000).toFixed(halfRange < 0.01 ? 1 : 0)}mm
+            </span>
+            <input
+              type="range"
+              min={1}
+              max={1000}
+              step={1}
+              value={Math.round(halfRange * 1000)}
+              onChange={(e) => setHalfRange(Number(e.target.value) / 1000)}
+              className="flex-1 h-1 accent-teal-600 cursor-pointer"
+              title="Deviation half-range in millimetres — values past ±this map to the ramp endpoints"
+              aria-label="Deviation range half-width"
+            />
+          </label>
+
+          {/* Legend: blue → white → red gradient with labelled endpoints. */}
+          <div
+            className="h-2 rounded-sm border border-foreground/10 mt-0.5"
+            style={{
+              background: 'linear-gradient(to right, rgb(26,77,217), rgb(242,242,242), rgb(217,51,26))',
+            }}
+            aria-label="Deviation ramp from negative (blue) to positive (red)"
+          />
+          <div className="flex justify-between text-[9px] text-muted-foreground">
+            <span>−{(halfRange * 1000).toFixed(0)}mm (inside)</span>
+            <span>0</span>
+            <span>+{(halfRange * 1000).toFixed(0)}mm (outside)</span>
+          </div>
+
+          {colorMode !== 'deviation' && (
+            <button
+              type="button"
+              onClick={() => setColorMode('deviation')}
+              className="text-[10px] text-teal-600 hover:text-teal-500 underline text-left mt-0.5"
+            >
+              Switch colour mode to Deviation
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/viewer/HierarchyPanel.tsx

@@ -126,13 +126,39 @@ export function HierarchyPanel() {
     groupingMode,
     setGroupingMode,
     unifiedStoreys,
-    filteredNodes,
-    storeysNodes,
-    modelsNodes,
+    filteredNodes: rawFilteredNodes,
+    storeysNodes: rawStoreysNodes,
+    modelsNodes: rawModelsNodes,
     toggleExpand,
     getNodeElements,
   } = useHierarchyTree({ models, ifcDataStore, isMultiModel, geometryResult });
 
+  // Issue #540: when the user has the merge-layers load setting on,
+  // hide `IfcBuildingElementPart` rows from the tree — the Rust layer
+  // suppresses their meshes, so leaving the rows visible would lead
+  // to dead-clicks. Filter at the consumer (this panel) rather than
+  // in `spatialHierarchy.ts` per the agent coordination plan.
+  const mergeLayersHidesParts = useViewerStore((s) => s.mergeLayers);
+  const PART_TYPE_KEY = 'ifcbuildingelementpart';
+  const stripPartNodes = useCallback(
+    (nodes: TreeNode[]): TreeNode[] => {
+      if (!mergeLayersHidesParts) return nodes;
+      return nodes.filter((node) => {
+        // Only element rows carry an `ifcType` we can compare. Class
+        // grouping ("IfcBuildingElementPart (N)") and ifc-type nodes
+        // also expose an `ifcType`; we strip those too because they
+        // would expand to empty groups after merge.
+        const t = node.ifcType?.toLowerCase();
+        if (!t) return true;
+        return t !== PART_TYPE_KEY;
+      });
+    },
+    [mergeLayersHidesParts],
+  );
+  const filteredNodes = useMemo(() => stripPartNodes(rawFilteredNodes), [stripPartNodes, rawFilteredNodes]);
+  const storeysNodes = useMemo(() => stripPartNodes(rawStoreysNodes), [stripPartNodes, rawStoreysNodes]);
+  const modelsNodes = useMemo(() => stripPartNodes(rawModelsNodes), [stripPartNodes, rawModelsNodes]);
+
   // Refs for both scroll areas
   const storeysRef = useRef<HTMLDivElement>(null);
   const modelsRef = useRef<HTMLDivElement>(null);

package/src/components/viewer/HoverTooltip.tsx

@@ -77,6 +77,11 @@ export function HoverTooltip() {
       <div className="text-xs text-muted-foreground">
         #{hoverState.entityId}
       </div>
+      {hoverState.worldXYZ && (
+        <div className="text-[10px] font-mono text-muted-foreground/80 mt-0.5">
+          {hoverState.worldXYZ.x.toFixed(2)}, {hoverState.worldXYZ.y.toFixed(2)}, {hoverState.worldXYZ.z.toFixed(2)}
+        </div>
+      )}
     </div>
   );
 }

package/src/components/viewer/IDSAuditSummary.tsx

@@ -0,0 +1,389 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * IDSAuditSummary — surfaces the auditor's verdict on a loaded IDS
+ * document.
+ *
+ * Visual language: refined-technical instrument. Restraint over
+ * decoration. The hierarchy is carried by:
+ *  - **Severity rails** — 2px tinted left border on each issue row.
+ *  - **Codes as machine output** — monospace uppercase chips with
+ *    severity-tinted backgrounds; treat them like log lines.
+ *  - **Counts strip** — compact `▪ 3 errors  ▪ 2 warnings  ▪ 0 info`
+ *    bar with colored dots, similar to a developer-tool status line.
+ *  - **Empty state** — single line with a check icon, no flair.
+ *
+ * Interactions:
+ *  - Click counts strip to toggle the issue list.
+ *  - Click an individual row to expose its `path` and `detail` payload.
+ *  - Filter tabs (All / Errors / Warnings) when any issues exist.
+ */
+
+import React, { useMemo, useState } from 'react';
+import {
+  AlertCircle,
+  AlertTriangle,
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
+  Info,
+  Loader2,
+} from 'lucide-react';
+import type { IDSAuditIssue, IDSAuditReport, IDSAuditSeverity } from '@ifc-lite/ids';
+import { cn } from '@/lib/utils';
+
+interface IDSAuditSummaryProps {
+  report: IDSAuditReport | null;
+  /** True while the auditor is running. */
+  auditing?: boolean;
+  /** Optional className passed to the outer container. */
+  className?: string;
+}
+
+type SeverityFilter = 'all' | IDSAuditSeverity;
+
+// ---------------------------------------------------------------------------
+// Severity tokens
+// ---------------------------------------------------------------------------
+
+const SEVERITY_ORDER: Record<IDSAuditSeverity, number> = {
+  error: 0,
+  warning: 1,
+  info: 2,
+};
+
+const SEVERITY_TOKENS: Record<
+  IDSAuditSeverity,
+  {
+    label: string;
+    pluralLabel: string;
+    dot: string;
+    rail: string;
+    chipBg: string;
+    chipFg: string;
+    chipBorder: string;
+    icon: React.ReactNode;
+    iconClass: string;
+  }
+> = {
+  error: {
+    label: 'error',
+    pluralLabel: 'errors',
+    dot: 'bg-red-500',
+    rail: 'border-l-red-500',
+    chipBg: 'bg-red-500/10',
+    chipFg: 'text-red-600 dark:text-red-400',
+    chipBorder: 'border-red-500/30',
+    icon: <AlertCircle className="h-4 w-4" aria-hidden="true" />,
+    iconClass: 'text-red-500',
+  },
+  warning: {
+    label: 'warning',
+    pluralLabel: 'warnings',
+    dot: 'bg-amber-500',
+    rail: 'border-l-amber-500',
+    chipBg: 'bg-amber-500/10',
+    chipFg: 'text-amber-700 dark:text-amber-400',
+    chipBorder: 'border-amber-500/30',
+    icon: <AlertTriangle className="h-4 w-4" aria-hidden="true" />,
+    iconClass: 'text-amber-500',
+  },
+  info: {
+    label: 'note',
+    pluralLabel: 'notes',
+    dot: 'bg-sky-400',
+    rail: 'border-l-sky-400',
+    chipBg: 'bg-sky-400/10',
+    chipFg: 'text-sky-600 dark:text-sky-400',
+    chipBorder: 'border-sky-400/30',
+    icon: <Info className="h-4 w-4" aria-hidden="true" />,
+    iconClass: 'text-sky-500',
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function IDSAuditSummary({
+  report,
+  auditing = false,
+  className,
+}: IDSAuditSummaryProps): JSX.Element | null {
+  const [expanded, setExpanded] = useState(false);
+  const [filter, setFilter] = useState<SeverityFilter>('all');
+
+  // Stable per-severity counts.
+  const counts = useMemo(() => {
+    const base: Record<IDSAuditSeverity, number> = {
+      error: 0,
+      warning: 0,
+      info: 0,
+    };
+    if (!report) return base;
+    for (const issue of report.issues) {
+      base[issue.severity] += 1;
+    }
+    return base;
+  }, [report]);
+
+  // Sort issues by severity (errors first), preserving document order
+  // within each bucket. Rendering errors-first gives the user the most
+  // important information at the top of the expanded list.
+  const sortedIssues = useMemo(() => {
+    if (!report) return [];
+    return [...report.issues].sort(
+      (a, b) =>
+        SEVERITY_ORDER[a.severity] - SEVERITY_ORDER[b.severity]
+    );
+  }, [report]);
+
+  const visibleIssues = useMemo(() => {
+    if (filter === 'all') return sortedIssues;
+    return sortedIssues.filter((i) => i.severity === filter);
+  }, [sortedIssues, filter]);
+
+  // Auditing in flight — quietly mark the spot.
+  if (auditing && !report) {
+    return (
+      <div
+        className={cn(
+          'flex items-center gap-2 rounded-md border border-border/60 bg-muted/30 px-3 py-2 text-xs text-muted-foreground',
+          'animate-fade-in-up',
+          className
+        )}
+        role="status"
+        aria-live="polite"
+      >
+        <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
+        <span>Auditing IDS document…</span>
+      </div>
+    );
+  }
+
+  if (!report) return null;
+
+  const totalIssues = report.issues.length;
+  const isClean = report.status === 'valid' || totalIssues === 0;
+
+  // Clean state — single line, no flair.
+  if (isClean) {
+    return (
+      <div
+        className={cn(
+          'flex items-center gap-2 rounded-md border border-emerald-500/30 bg-emerald-500/5 px-3 py-2 text-xs text-emerald-700 dark:text-emerald-400',
+          'animate-fade-in-up',
+          className
+        )}
+      >
+        <CheckCircle2 className="h-4 w-4" aria-hidden="true" />
+        <span>Document is valid — no audit issues</span>
+      </div>
+    );
+  }
+
+  // Has issues — counts strip + collapsible list.
+  return (
+    <section
+      className={cn(
+        'overflow-hidden rounded-md border border-border/70 bg-card animate-fade-in-up',
+        className
+      )}
+      aria-label="IDS document audit summary"
+    >
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className={cn(
+          'flex w-full items-center justify-between gap-3 px-3 py-2 text-left transition-colors',
+          'hover:bg-muted/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60'
+        )}
+        aria-expanded={expanded}
+      >
+        <span className="flex items-center gap-3 text-xs">
+          {(['error', 'warning', 'info'] as IDSAuditSeverity[]).map((sev) => {
+            const n = counts[sev];
+            if (n === 0) return null;
+            const t = SEVERITY_TOKENS[sev];
+            return (
+              <span key={sev} className="inline-flex items-center gap-1.5">
+                <span
+                  className={cn('h-1.5 w-1.5 rounded-full', t.dot)}
+                  aria-hidden="true"
+                />
+                <span className={cn('font-mono tabular-nums', t.chipFg)}>
+                  {n}
+                </span>
+                <span className="text-muted-foreground">
+                  {n === 1 ? t.label : t.pluralLabel}
+                </span>
+              </span>
+            );
+          })}
+        </span>
+        <span className="flex items-center gap-1 text-xs text-muted-foreground">
+          <span>{expanded ? 'Hide' : 'Details'}</span>
+          {expanded ? (
+            <ChevronDown className="h-3.5 w-3.5" aria-hidden="true" />
+          ) : (
+            <ChevronRight className="h-3.5 w-3.5" aria-hidden="true" />
+          )}
+        </span>
+      </button>
+
+      {expanded && (
+        <div className="border-t border-border/60">
+          {/* Filter tabs */}
+          <div className="flex items-center gap-1 border-b border-border/60 bg-muted/20 px-2 py-1.5">
+            {(
+              [
+                { key: 'all', label: `All (${totalIssues})` },
+                counts.error > 0 && {
+                  key: 'error',
+                  label: `Errors (${counts.error})`,
+                },
+                counts.warning > 0 && {
+                  key: 'warning',
+                  label: `Warnings (${counts.warning})`,
+                },
+                counts.info > 0 && {
+                  key: 'info',
+                  label: `Notes (${counts.info})`,
+                },
+              ].filter(Boolean) as Array<{
+                key: SeverityFilter;
+                label: string;
+              }>
+            ).map((tab) => (
+              <button
+                key={tab.key}
+                type="button"
+                onClick={() => setFilter(tab.key)}
+                className={cn(
+                  'rounded px-2 py-0.5 text-[11px] transition-colors',
+                  filter === tab.key
+                    ? 'bg-foreground text-background'
+                    : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+                )}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Issue list */}
+          <ul className="max-h-72 overflow-y-auto py-1">
+            {visibleIssues.map((issue, i) => (
+              <IssueRow key={`${issue.code}-${issue.path}-${i}`} issue={issue} index={i} />
+            ))}
+            {visibleIssues.length === 0 && (
+              <li className="px-3 py-3 text-xs text-muted-foreground">
+                No issues match the selected filter.
+              </li>
+            )}
+          </ul>
+        </div>
+      )}
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Issue row
+// ---------------------------------------------------------------------------
+
+interface IssueRowProps {
+  issue: IDSAuditIssue;
+  index: number;
+}
+
+function IssueRow({ issue, index }: IssueRowProps): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const t = SEVERITY_TOKENS[issue.severity];
+  const hasDetail =
+    !!issue.path ||
+    (issue.detail !== undefined && Object.keys(issue.detail).length > 0);
+
+  return (
+    <li
+      className={cn(
+        'group border-l-2 px-3 py-1.5 text-xs transition-colors hover:bg-muted/30',
+        t.rail,
+        // Stagger reveal — capped so long lists don't take seconds.
+        'animate-fade-in-up'
+      )}
+      style={{ animationDelay: `${Math.min(index, 12) * 24}ms` }}
+    >
+      <button
+        type="button"
+        onClick={() => hasDetail && setOpen((v) => !v)}
+        className={cn(
+          'flex w-full items-start gap-2 text-left',
+          hasDetail && 'cursor-pointer',
+          !hasDetail && 'cursor-default'
+        )}
+        aria-expanded={hasDetail ? open : undefined}
+      >
+        <span className={cn('mt-0.5 shrink-0', t.iconClass)}>{t.icon}</span>
+        <span className="min-w-0 flex-1 space-y-1">
+          <span className="flex flex-wrap items-baseline gap-2">
+            <code
+              className={cn(
+                'shrink-0 rounded border px-1.5 py-0 font-mono text-[10px] uppercase tracking-tight leading-relaxed',
+                t.chipBg,
+                t.chipFg,
+                t.chipBorder
+              )}
+            >
+              {issue.code}
+            </code>
+            <span className="text-foreground">{issue.message}</span>
+          </span>
+          {hasDetail && open && (
+            <div className="ml-1 mt-1.5 space-y-1 border-l border-border/60 pl-2">
+              {issue.path && (
+                <div className="flex gap-2 font-mono text-[11px]">
+                  <span className="text-muted-foreground/70">path</span>
+                  <span className="break-all text-muted-foreground">
+                    {issue.path}
+                  </span>
+                </div>
+              )}
+              {issue.facetType && (
+                <div className="flex gap-2 font-mono text-[11px]">
+                  <span className="text-muted-foreground/70">facet</span>
+                  <span className="text-muted-foreground">
+                    {issue.facetType}
+                  </span>
+                </div>
+              )}
+              {issue.detail && Object.keys(issue.detail).length > 0 && (
+                <div className="flex flex-col gap-0.5 font-mono text-[11px]">
+                  {Object.entries(issue.detail).map(([k, v]) => (
+                    <div key={k} className="flex gap-2">
+                      <span className="text-muted-foreground/70">{k}</span>
+                      <span className="break-all text-muted-foreground">
+                        {String(v)}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </span>
+        {hasDetail && (
+          <ChevronDown
+            className={cn(
+              'mt-1 h-3 w-3 shrink-0 text-muted-foreground/60 transition-transform',
+              open && 'rotate-180'
+            )}
+            aria-hidden="true"
+          />
+        )}
+      </button>
+    </li>
+  );
+}