@ifc-lite/viewer 1.27.0 → 1.28.1

package/src/components/viewer/HierarchyPanel.tsx

@@ -2,7 +2,7 @@
  * 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/. */
 
-import { useState, useCallback, useRef, useEffect, useMemo, type ReactElement } from 'react';
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import {
   Search,
@@ -11,6 +11,7 @@ import {
   LayoutTemplate,
   FileBox,
   GripHorizontal,
+  Palette,
 } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
@@ -18,7 +19,6 @@ import { cn } from '@/lib/utils';
 import { useViewerStore, resolveEntityRef } from '@/store';
 import { toGlobalIdFromModels } from '@/store/globalId';
 import { useIfc } from '@/hooks/useIfc';
-import { getNativeMetadataChildren, searchNativeMetadataEntities } from '@/services/desktop-native-metadata';
 
 import type { TreeNode } from './hierarchy/types';
 import { isSpatialContainer } from './hierarchy/types';
@@ -37,7 +37,6 @@ export function HierarchyPanel() {
     removeModel,
   } = useIfc();
   const selectedEntityId = useViewerStore((s) => s.selectedEntityId);
-  const selectedEntity = useViewerStore((s) => s.selectedEntity);
   const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
   const setSelectedEntityIds = useViewerStore((s) => s.setSelectedEntityIds);
   const setSelectedEntity = useViewerStore((s) => s.setSelectedEntity);
@@ -91,33 +90,6 @@ export function HierarchyPanel() {
 
   // Check if we have multiple models loaded
   const isMultiModel = models.size > 1;
-  const nativeLazyModel = useMemo(() => {
-    if (models.size !== 1) return null;
-    const [, model] = Array.from(models.entries())[0];
-    if (!model.nativeMetadata) return null;
-    return model.ifcDataStore?.spatialHierarchy ? null : model;
-  }, [models]);
-  const [nativeChildren, setNativeChildren] = useState<Record<number, Array<{
-    expressId: number;
-    type: string;
-    name: string;
-    globalId?: string | null;
-    kind: 'spatial' | 'element';
-    hasChildren: boolean;
-    elementCount?: number;
-    elevation?: number | null;
-  }>>>({});
-  const [nativeExpanded, setNativeExpanded] = useState<Set<number>>(new Set());
-  const [nativeSearchResults, setNativeSearchResults] = useState<Array<{
-    expressId: number;
-    type: string;
-    name: string;
-    globalId?: string | null;
-    kind: 'spatial' | 'element';
-    hasChildren: boolean;
-    elementCount?: number;
-    elevation?: number | null;
-  }>>([]);
 
   // Use extracted hook for tree data management
   const {
@@ -221,29 +193,6 @@ export function HierarchyPanel() {
     };
   }, [isDragging]);
 
-  useEffect(() => {
-    if (!nativeLazyModel?.nativeMetadata) {
-      setNativeSearchResults([]);
-      return;
-    }
-    const query = searchQuery.trim();
-    if (!query) {
-      setNativeSearchResults([]);
-      return;
-    }
-    let cancelled = false;
-    void searchNativeMetadataEntities(nativeLazyModel.nativeMetadata.cacheKey, query, 200)
-      .then((results) => {
-        if (!cancelled) setNativeSearchResults(results);
-      })
-      .catch(() => {
-        if (!cancelled) setNativeSearchResults([]);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [nativeLazyModel, searchQuery]);
-
   // Toggle visibility for a node
   const handleVisibilityToggle = useCallback((node: TreeNode) => {
     const elements = getNodeElements(node);
@@ -322,6 +271,34 @@ export function HierarchyPanel() {
       return;
     }
 
+    // Material group nodes (Materials tab) - select the material entity for the
+    // totals panel + isolate the elements that use it.
+    if (node.type === 'material-group') {
+      const modelId = node.modelIds[0];
+      const materialExpressId = node.entityExpressId;
+
+      // Clear multi-selection first (setSelectedEntityIds([]) resets selectedEntityId)
+      setSelectedEntityIds([]);
+
+      if (materialExpressId !== undefined) {
+        if (modelId && modelId !== 'legacy') {
+          setSelectedEntityId(toGlobalId(modelId, materialExpressId));
+          setSelectedEntity({ modelId, expressId: materialExpressId });
+          setActiveModel(modelId);
+        } else {
+          setSelectedEntityId(materialExpressId);
+          setSelectedEntity({ modelId: 'legacy', expressId: materialExpressId });
+        }
+      }
+
+      // Isolate the elements using this material
+      const elements = getNodeElements(node);
+      if (elements.length > 0) {
+        isolateEntities(elements);
+      }
+      return;
+    }
+
     // IFC type entity nodes (e.g. IfcWallType/W01) - select type entity for property panel + isolate instances
     if (node.type === 'ifc-type') {
       const modelId = node.modelIds[0];
@@ -478,14 +455,14 @@ export function HierarchyPanel() {
         ? selectedStoreys.has(node.expressIds[0])
         : node.type === 'IfcSpace' || node.type === 'element'
           ? selectedEntityId === (node.globalIds[0] ?? node.expressIds[0])
-          : node.type === 'ifc-type'
+          : node.type === 'ifc-type' || node.type === 'material-group'
             ? (() => {
-                const typeExpressId = node.entityExpressId;
-                if (!typeExpressId) return false;
+                const entityExpressId = node.entityExpressId;
+                if (!entityExpressId) return false;
                 const mId = node.modelIds[0];
                 const gId = mId && mId !== 'legacy'
-                  ? toGlobalId(mId, typeExpressId)
-                  : typeExpressId;
+                  ? toGlobalId(mId, entityExpressId)
+                  : entityExpressId;
                 return selectedEntityId === gId;
               })()
             : false;
@@ -495,7 +472,7 @@ export function HierarchyPanel() {
     if (node.type === 'element') {
       nodeHidden = hiddenEntities.has(node.globalIds[0] ?? node.expressIds[0]);
     } else if (node.type === 'IfcBuildingStorey' || node.type === 'IfcSpace' || node.type === 'unified-storey' ||
-               node.type === 'type-group' || node.type === 'ifc-type' ||
+               node.type === 'type-group' || node.type === 'ifc-type' || node.type === 'material-group' ||
                (node.type === 'model-header' && node.id.startsWith('contrib-'))) {
       const elements = getNodeElements(node);
       nodeHidden = elements.length > 0 && elements.every(id => hiddenEntities.has(id));
@@ -531,7 +508,7 @@ export function HierarchyPanel() {
   }
 
   const singleModel = models.size === 1 ? Array.from(models.values())[0] : null;
-  if (!ifcDataStore && singleModel && !nativeLazyModel) {
+  if (!ifcDataStore && singleModel) {
     const metadataState = singleModel.metadataLoadState;
     const message = metadataState === 'error'
       ? (singleModel.loadError || 'Native metadata failed to load.')
@@ -552,128 +529,6 @@ export function HierarchyPanel() {
     );
   }
 
-  if (nativeLazyModel?.nativeMetadata) {
-    const nativeMetadata = nativeLazyModel.nativeMetadata;
-    const nativeSelectedGlobalId =
-      selectedEntity?.modelId === nativeLazyModel.id
-        ? toGlobalId(nativeLazyModel.id, selectedEntity.expressId)
-        : null;
-
-    const selectNativeEntity = (expressId: number) => {
-      const globalId = toGlobalId(nativeLazyModel.id, expressId);
-      setSelectedEntityIds([]);
-      setSelectedEntityId(globalId);
-      setSelectedEntity({
-        modelId: nativeLazyModel.id,
-        expressId,
-      });
-      setActiveModel(nativeLazyModel.id);
-    };
-
-    const toggleNativeNode = async (expressId: number) => {
-      setNativeExpanded((prev) => {
-        const next = new Set(prev);
-        if (next.has(expressId)) {
-          next.delete(expressId);
-        } else {
-          next.add(expressId);
-        }
-        return next;
-      });
-      if (nativeChildren[expressId]) return;
-      try {
-        const children = await getNativeMetadataChildren(nativeMetadata.cacheKey, expressId);
-        setNativeChildren((prev) => ({ ...prev, [expressId]: children }));
-      } catch {
-        setNativeChildren((prev) => ({ ...prev, [expressId]: [] }));
-      }
-    };
-
-    const renderNativeSummary = (
-      summary: {
-        expressId: number;
-        type: string;
-        name: string;
-        kind: 'spatial' | 'element';
-        hasChildren: boolean;
-        elementCount?: number;
-      },
-      depth: number,
-    ): ReactElement => {
-      const expanded = nativeExpanded.has(summary.expressId);
-      return (
-        <div key={`${summary.kind}-${summary.expressId}`}>
-          <button
-            type="button"
-            className={cn(
-              'w-full flex items-center gap-2 px-3 py-2 text-left border-b border-zinc-100 dark:border-zinc-900 hover:bg-zinc-50 dark:hover:bg-zinc-950',
-              nativeSelectedGlobalId === toGlobalId(nativeLazyModel.id, summary.expressId) && 'bg-primary/10 text-primary'
-            )}
-            style={{ paddingLeft: `${12 + depth * 16}px` }}
-            onClick={() => selectNativeEntity(summary.expressId)}
-          >
-            {summary.hasChildren ? (
-              <span
-                className="w-4 text-center text-xs text-zinc-500"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  void toggleNativeNode(summary.expressId);
-                }}
-              >
-                {expanded ? 'v' : '>'}
-              </span>
-            ) : (
-              <span className="w-4" />
-            )}
-            <span className="truncate flex-1 text-sm">{summary.name || `${summary.type} #${summary.expressId}`}</span>
-            <span className="text-[10px] uppercase tracking-wide text-zinc-500">{summary.type}</span>
-            {typeof summary.elementCount === 'number' && summary.elementCount > 0 && (
-              <span className="text-[10px] text-zinc-400">{summary.elementCount}</span>
-            )}
-          </button>
-          {expanded && (nativeChildren[summary.expressId] ?? []).map((child) => renderNativeSummary(child, depth + 1))}
-        </div>
-      );
-    };
-
-    return (
-      <div className="h-full flex flex-col border-r-2 border-zinc-200 dark:border-zinc-800 bg-white dark:bg-black">
-        <div className="p-3 border-b-2 border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-black">
-          <Input
-            placeholder="Search..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            leftIcon={<Search className="h-4 w-4" />}
-            className="h-9 text-sm rounded-none border-2 border-zinc-200 dark:border-zinc-800 focus:border-primary focus:ring-0 bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-600"
-          />
-        </div>
-        <SectionHeader
-          icon={Building2}
-          title={searchQuery.trim() ? 'Search Results' : 'Hierarchy'}
-          count={searchQuery.trim() ? nativeSearchResults.length : 1}
-        />
-        <div className="flex-1 overflow-auto scrollbar-thin bg-white dark:bg-black">
-          {searchQuery.trim()
-            ? nativeSearchResults.map((result) => renderNativeSummary(result, 0))
-            : nativeMetadata.spatialTree
-              ? renderNativeSummary(nativeMetadata.spatialTree, 0)
-              : (
-                <div className="p-4 text-xs text-zinc-500">
-                  {nativeLazyModel.metadataLoadState === 'error'
-                    ? (nativeLazyModel.loadError || 'Native spatial metadata is unavailable for this model.')
-                    : nativeLazyModel.metadataLoadState === 'bootstrapping'
-                      ? 'Native spatial metadata is still loading.'
-                      : 'Native spatial metadata tree is unavailable for this model.'}
-                </div>
-              )}
-        </div>
-        <div className="p-2 border-t-2 border-zinc-200 dark:border-zinc-800 text-[10px] uppercase tracking-wide text-zinc-500 dark:text-zinc-500 text-center bg-zinc-50 dark:bg-black font-mono">
-          On-demand desktop metadata
-        </div>
-      </div>
-    );
-  }
-
   // Helper to render a node via the extracted HierarchyNode component
   const renderNode = (node: TreeNode, virtualRow: { index: number; size: number; start: number }) => {
     const { isSelected, nodeHidden, modelVisible } = computeNodeState(node);
@@ -732,6 +587,16 @@ export function HierarchyPanel() {
         <FileBox className="h-3 w-3 shrink-0 panel-compact-icon" />
         <span className="panel-compact-text">Type</span>
       </Button>
+      <Button
+        variant={groupingMode === 'material' ? 'default' : 'outline'}
+        size="sm"
+        className="h-6 text-[10px] flex-1 min-w-0 rounded-none uppercase tracking-wider"
+        onClick={() => setGroupingMode('material')}
+        title="Materials"
+      >
+        <Palette className="h-3 w-3 shrink-0 panel-compact-icon" />
+        <span className="panel-compact-text">Material</span>
+      </Button>
     </div>
   );
 
@@ -871,7 +736,7 @@ export function HierarchyPanel() {
       </div>
 
       {/* Section Header */}
-      <SectionHeader icon={groupingMode === 'spatial' ? Building2 : groupingMode === 'type' ? Layers : FileBox} title={groupingMode === 'spatial' ? 'Hierarchy' : groupingMode === 'type' ? 'By Class' : 'By Type'} count={filteredNodes.length} />
+      <SectionHeader icon={groupingMode === 'spatial' ? Building2 : groupingMode === 'type' ? Layers : groupingMode === 'material' ? Palette : FileBox} title={groupingMode === 'spatial' ? 'Hierarchy' : groupingMode === 'type' ? 'By Class' : groupingMode === 'material' ? 'By Material' : 'By Type'} count={filteredNodes.length} />
 
       {/* Tree */}
       <div ref={parentRef} className="flex-1 overflow-auto scrollbar-thin bg-white dark:bg-black">

package/src/components/viewer/IDSPanel.tsx

@@ -15,7 +15,7 @@
  * - Multi-language support (EN/DE/FR)
  */
 
-import React, { useCallback, useEffect, useState, useMemo, useRef } from 'react';
+import React, { useCallback, useState, useMemo, useRef } from 'react';
 import {
   X,
   Upload,
@@ -75,7 +75,6 @@ import { cn } from '@/lib/utils';
 import { IDSAuditSummary } from './IDSAuditSummary';
 import { IDSExportDialog } from './IDSExportDialog';
 import type { IDSBCFExportSettings, IDSExportProgress } from './IDSExportDialog';
-import { claimNextDesktopPanelAction, subscribeDesktopPanelActions } from '@/services/desktop-panel-actions';
 
 // ============================================================================
 // Types
@@ -513,30 +512,6 @@ export function IDSPanel({ onClose }: IDSPanelProps) {
     fileInputRef.current?.click();
   }, [loadIdsFromDialog]);
 
-  const handleDesktopRunValidation = useCallback(async () => {
-    if (!document) {
-      const loaded = await loadIdsFromDialog();
-      if (!loaded) {
-        return;
-      }
-    }
-    await runValidation();
-  }, [document, loadIdsFromDialog, runValidation]);
-
-  useEffect(() => {
-    const drainDesktopActions = () => {
-      if (claimNextDesktopPanelAction('ids-open')) {
-        void loadIdsFromDialog();
-      }
-      if (claimNextDesktopPanelAction('ids-run-validation')) {
-        void handleDesktopRunValidation();
-      }
-    };
-
-    drainDesktopActions();
-    return subscribeDesktopPanelActions(drainDesktopActions);
-  }, [handleDesktopRunValidation, loadIdsFromDialog]);
-
   // Handle entity click
   const handleEntityClick = useCallback((modelId: string, expressId: number) => {
     selectEntity(modelId, expressId);