@ifc-lite/viewer 1.26.0 → 1.28.0

package/src/components/viewer/Viewport.tsx

@@ -46,6 +46,7 @@ import {
   type SectionClipForGrid,
 } from '../../hooks/useSymbolicAnnotations.js';
 import { useAlignmentLines3D } from '../../hooks/useAlignmentLines3D.js';
+import { useGridLines3D } from '../../hooks/useGridLines3D.js';
 
 interface ViewportProps {
   geometry: MeshData[] | null;
@@ -807,6 +808,9 @@ export function Viewport({
       }
       setIsInitialized(false);
       rendererRef.current = null;
+      // Free all WebGPU resources held by this renderer instance.
+      // destroy() is idempotent, so this is safe even if init() rejected.
+      renderer.destroy();
       // Clear BCF global refs to prevent memory leaks
       clearGlobalRefs();
     };
@@ -901,6 +905,20 @@ export function Viewport({
     }
   }, [alignmentVertices3D, isInitialized]);
 
+  // Structural-grid (IfcGridAxis) lines, gated by the `ifcGrid` type-visibility
+  // toggle (issue #967). Parsed once per source + cached; only the upload/clear
+  // is toggled so flipping visibility doesn't re-parse.
+  const gridVertices3D = useGridLines3D();
+  useEffect(() => {
+    const renderer = rendererRef.current;
+    if (!renderer || !isInitialized) return;
+    if (!ifcGridVisible || gridVertices3D.length === 0) {
+      renderer.clearGridLines3D();
+    } else {
+      renderer.uploadGridLines3D(gridVertices3D);
+    }
+  }, [gridVertices3D, ifcGridVisible, isInitialized]);
+
   // Upload IfcAnnotation text + fill data for the WebGPU symbolic overlay
   // pipelines. Map the hook's per-annotation records into the SymbolicFillInput
   // / SymbolicTextInput shape the renderer expects. Empty arrays clear cleanly.

package/src/components/viewer/hierarchy/HierarchyNode.tsx

@@ -275,7 +275,7 @@ export function HierarchyNode({
         {/* Name */}
         <span className={cn(
           'flex-1 text-sm truncate ml-1.5',
-          isSpatialContainer(node.type) || node.type === 'IfcBuildingStorey' || node.type === 'IfcSpace' || node.type === 'unified-storey' || node.type === 'type-group'
+          isSpatialContainer(node.type) || node.type === 'IfcBuildingStorey' || node.type === 'IfcSpace' || node.type === 'unified-storey' || node.type === 'type-group' || node.type === 'material-group'
             ? 'font-medium text-zinc-900 dark:text-zinc-100'
             : 'text-zinc-700 dark:text-zinc-300',
           nodeHidden && 'line-through decoration-zinc-400 dark:decoration-zinc-600'
@@ -306,11 +306,11 @@ export function HierarchyNode({
           <Tooltip>
             <TooltipTrigger asChild>
               <span className="text-[10px] font-mono bg-zinc-100 dark:bg-zinc-950 px-1.5 py-0.5 border border-zinc-200 dark:border-zinc-800 text-zinc-500 dark:text-zinc-400 rounded-none">
-                {node.elementCount}
+                {node.elementCount.toLocaleString()}
               </span>
             </TooltipTrigger>
             <TooltipContent>
-              <p className="text-xs">{node.elementCount} {node.elementCount === 1 ? 'element' : 'elements'}</p>
+              <p className="text-xs">{node.elementCount.toLocaleString()} {node.elementCount === 1 ? 'element' : 'elements'}</p>
             </TooltipContent>
           </Tooltip>
         )}

package/src/components/viewer/hierarchy/ifc-icons.ts

@@ -140,6 +140,15 @@ export const IFC_ICON_CODEPOINTS: Record<string, string> = {
   IfcTrackElement: '\ue260', // "linear_scale"
   IfcVehicle: '\ue531', // "directions_car"
 
+  // Materials (Materials hierarchy tab)
+  IfcMaterial: '\ue4f4', // "texture"
+  IfcMaterialLayerSet: '\ue8fe', // "layers"
+  IfcMaterialLayerSetUsage: '\ue8fe',
+  IfcMaterialProfileSet: '\ue8fe',
+  IfcMaterialProfileSetUsage: '\ue8fe',
+  IfcMaterialConstituentSet: '\ue4f4',
+  IfcMaterialList: '\ue4f4',
+
   // Proxy / generic fallback
   IfcProduct: '\ue047',
   IfcBuildingElementProxy: '\ue047',

package/src/components/viewer/hierarchy/treeDataBuilder.ts

@@ -12,6 +12,7 @@ import {
   type SpatialNode,
 } from '@ifc-lite/data';
 import type { IfcDataStore } from '@ifc-lite/parser';
+import { buildMaterialUsageIndex } from '@ifc-lite/parser';
 import { useViewerStore, type FederatedModel } from '@/store';
 import { toGlobalIdFromModels } from '@/store/globalId';
 import type { TreeNode, NodeType, StoreyData, UnifiedStorey } from './types';
@@ -712,6 +713,92 @@ export function buildIfcTypeTree(
   return nodes;
 }
 
+/**
+ * Build a flat "By Material" tree: one row per base material (IfcMaterial),
+ * grouped by name so the same-named material across federated models merges.
+ * Each row carries the using elements' global ids for click-to-isolate and the
+ * representative material express id for the properties panel. Mirrors
+ * {@link buildIfcTypeTree} but keyed on the parser's material usage index.
+ */
+export function buildMaterialTree(
+  models: Map<string, FederatedModel>,
+  ifcDataStore: IfcDataStore | null | undefined,
+  _expandedNodes: Set<string>,
+  _isMultiModel: boolean,
+  geometricIds?: Set<number>,
+): TreeNode[] {
+  interface MatEntry {
+    name: string;
+    ifcClass: string;
+    materialId: number;          // representative material express id
+    modelIds: Set<string>;       // contributing models (insertion order)
+    elements: Map<number, number>; // globalId -> expressId (deduped)
+  }
+
+  const byName = new Map<string, MatEntry>();
+  const applyGeomFilter = !!geometricIds && geometricIds.size > 0;
+
+  const processDataStore = (dataStore: IfcDataStore, modelId: string) => {
+    const usage = buildMaterialUsageIndex(dataStore);
+    for (const u of usage.values()) {
+      let entry = byName.get(u.name);
+      if (!entry) {
+        // Invariant: the representative `materialId` and the first entry in
+        // `modelIds` come from the SAME (first-contributing) model, so the click
+        // handler's `node.modelIds[0]` + `node.entityExpressId` always resolve a
+        // valid (model, material) pair. Sets preserve insertion order.
+        entry = {
+          name: u.name,
+          ifcClass: u.ifcClass,
+          materialId: u.id,
+          modelIds: new Set([modelId]),
+          elements: new Map(),
+        };
+        byName.set(u.name, entry);
+      } else {
+        entry.modelIds.add(modelId);
+      }
+      for (const { entityId } of u.entries) {
+        const globalId = resolveTreeGlobalId(modelId, entityId, models);
+        if (applyGeomFilter && !geometricIds!.has(globalId)) continue;
+        entry.elements.set(globalId, entityId);
+      }
+    }
+  };
+
+  if (models.size > 0) {
+    for (const [modelId, model] of models) {
+      if (model.ifcDataStore) processDataStore(model.ifcDataStore, modelId);
+    }
+  } else if (ifcDataStore) {
+    processDataStore(ifcDataStore, 'legacy');
+  }
+
+  const nodes: TreeNode[] = [];
+  const names = Array.from(byName.keys()).sort((a, b) => a.localeCompare(b));
+  for (const name of names) {
+    const entry = byName.get(name)!;
+    if (entry.elements.size === 0) continue; // skip materials with no visible elements (dead clicks)
+    nodes.push({
+      id: `material-${name}`,
+      expressIds: Array.from(entry.elements.values()),
+      globalIds: Array.from(entry.elements.keys()),
+      entityExpressId: entry.materialId,
+      modelIds: Array.from(entry.modelIds),
+      name,
+      type: 'material-group',
+      ifcType: entry.ifcClass,
+      depth: 0,
+      hasChildren: false,
+      isExpanded: false,
+      isVisible: true,
+      elementCount: entry.elements.size,
+    });
+  }
+
+  return nodes;
+}
+
 /** Filter nodes based on search query */
 export function filterNodes(nodes: TreeNode[], searchQuery: string): TreeNode[] {
   if (!searchQuery.trim()) return nodes;

package/src/components/viewer/hierarchy/types.ts

@@ -22,6 +22,7 @@ export type NodeType =
   | 'IfcSpace'            // Space node
   | 'type-group'          // IFC class grouping header (e.g., "IfcWall (47)")
   | 'ifc-type'            // IFC type entity node (e.g., "IfcWallType/W01")
+  | 'material-group'      // Material grouping (e.g., "Concrete (47)") from the Materials tab
   | 'element';            // Individual element
 
 export interface TreeNode {

package/src/components/viewer/hierarchy/useHierarchyTree.ts

@@ -13,11 +13,12 @@ import {
   buildTreeData,
   buildTypeTree,
   buildIfcTypeTree,
+  buildMaterialTree,
   filterNodes,
   splitNodes,
 } from './treeDataBuilder';
 
-export type GroupingMode = 'spatial' | 'type' | 'ifc-type';
+export type GroupingMode = 'spatial' | 'type' | 'ifc-type' | 'material';
 
 interface UseHierarchyTreeParams {
   models: Map<string, FederatedModel>;
@@ -192,6 +193,9 @@ export function useHierarchyTree({ models, ifcDataStore, isMultiModel, geometryR
       if (groupingMode === 'ifc-type') {
         return buildIfcTypeTree(models, ifcDataStore, expandedNodes, isMultiModel, geometricIds);
       }
+      if (groupingMode === 'material') {
+        return buildMaterialTree(models, ifcDataStore, expandedNodes, isMultiModel, geometricIds);
+      }
       return buildTreeData(models, ifcDataStore, expandedNodes, isMultiModel, unifiedStoreys);
     },
     [models, ifcDataStore, expandedNodes, isMultiModel, unifiedStoreys, groupingMode, geometricIds]
@@ -223,7 +227,7 @@ export function useHierarchyTree({ models, ifcDataStore, isMultiModel, geometryR
 
   // Get all elements for a node (handles type groups, ifc-type, unified storeys, single storeys, model contributions, and elements)
   const getNodeElements = useCallback((node: TreeNode): number[] => {
-    if (node.type === 'type-group' || node.type === 'ifc-type') {
+    if (node.type === 'type-group' || node.type === 'ifc-type' || node.type === 'material-group') {
       // GlobalIds are pre-stored on the node during tree construction — O(1)
       return node.globalIds;
     }

package/src/components/viewer/lists/ColumnHeaderMenu.tsx

@@ -0,0 +1,84 @@
+/* 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/. */
+
+/**
+ * Per-column actions menu for the Lists results table header. Brings
+ * grouping / aggregation / sorting onto the table itself so the user never
+ * has to round-trip through the list settings.
+ */
+
+import { ArrowUp, ArrowDown, Group, Ungroup, Sigma, Palette, MoreVertical } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+
+interface ColumnHeaderMenuProps {
+  isNumeric: boolean;
+  isGroupedBy: boolean;
+  isSummed: boolean;
+  active: boolean;
+  onSort: (dir: 'asc' | 'desc') => void;
+  onToggleGroup: () => void;
+  onToggleSum: () => void;
+  onColorBy: () => void;
+}
+
+export function ColumnHeaderMenu({
+  isNumeric, isGroupedBy, isSummed, active,
+  onSort, onToggleGroup, onToggleSum, onColorBy,
+}: ColumnHeaderMenuProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          aria-label="Column options"
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            'shrink-0 rounded-sm p-0.5 transition-opacity hover:text-foreground',
+            active
+              ? 'text-primary opacity-100'
+              : 'text-muted-foreground opacity-0 group-hover/col:opacity-100 data-[state=open]:opacity-100',
+          )}
+        >
+          <MoreVertical className="h-3 w-3" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-52">
+        <DropdownMenuItem className="gap-2 text-xs" onClick={() => onSort('asc')}>
+          <ArrowUp className="h-3.5 w-3.5" /> Sort ascending
+        </DropdownMenuItem>
+        <DropdownMenuItem className="gap-2 text-xs" onClick={() => onSort('desc')}>
+          <ArrowDown className="h-3.5 w-3.5" /> Sort descending
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="gap-2 text-xs" onClick={onToggleGroup}>
+          {isGroupedBy
+            ? (<><Ungroup className="h-3.5 w-3.5" /> Remove grouping</>)
+            : (<><Group className="h-3.5 w-3.5" /> Group by this column</>)}
+        </DropdownMenuItem>
+        <DropdownMenuCheckboxItem
+          className="text-xs"
+          checked={isSummed}
+          disabled={!isNumeric}
+          onCheckedChange={onToggleSum}
+        >
+          <span className="flex items-center gap-2">
+            <Sigma className="h-3.5 w-3.5" />
+            {isNumeric ? 'Sum / total this column' : 'Sum (numeric only)'}
+          </span>
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="gap-2 text-xs" onClick={onColorBy}>
+          <Palette className="h-3.5 w-3.5" /> Colour by this column
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}