@ifc-lite/viewer 1.1.7 → 1.6.0

package/src/components/viewer/MainToolbar.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 { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useMemo } from 'react';
 import {
   FolderOpen,
   Download,
@@ -29,6 +29,12 @@ import {
   Loader2,
   Camera,
   Info,
+  Layers,
+  SquareX,
+  Building2,
+  Plus,
+  MessageSquare,
+  ClipboardCheck,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
@@ -37,17 +43,94 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuCheckboxItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
 } from '@/components/ui/dropdown-menu';
 import { Progress } from '@/components/ui/progress';
-import { useViewerStore } from '@/store';
+import { useViewerStore, isIfcxDataStore } from '@/store';
 import { useIfc } from '@/hooks/useIfc';
 import { cn } from '@/lib/utils';
 import { GLTFExporter, CSVExporter } from '@ifc-lite/export';
-import { FileSpreadsheet, FileJson, SquareDashedMousePointer } from 'lucide-react';
+import { FileSpreadsheet, FileJson, FileText, Filter, Upload, Pencil } from 'lucide-react';
+import { ExportDialog } from './ExportDialog';
+import { BulkPropertyEditor } from './BulkPropertyEditor';
+import { DataConnector } from './DataConnector';
+import { ExportChangesButton } from './ExportChangesButton';
+
+type Tool = 'select' | 'pan' | 'orbit' | 'walk' | 'measure' | 'section';
+
+// #region FIX: Move ToolButton OUTSIDE MainToolbar to prevent recreation on every render
+// This fixes Radix UI Tooltip's asChild prop becoming stale during re-renders
+interface ToolButtonProps {
+  tool: Tool;
+  icon: React.ElementType;
+  label: string;
+  shortcut?: string;
+  activeTool: string;
+  onToolChange: (tool: Tool) => void;
+}
+
+function ToolButton({ tool, icon: Icon, label, shortcut, activeTool, onToolChange }: ToolButtonProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant={activeTool === tool ? 'default' : 'ghost'}
+          size="icon-sm"
+          onClick={(e) => {
+            // Blur button to close tooltip after click
+            (e.currentTarget as HTMLButtonElement).blur();
+            onToolChange(tool);
+          }}
+          className={cn(activeTool === tool && 'bg-primary text-primary-foreground')}
+        >
+          <Icon className="h-4 w-4" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        {label} {shortcut && <span className="ml-2 text-xs opacity-60">({shortcut})</span>}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
 
-type Tool = 'select' | 'pan' | 'orbit' | 'walk' | 'measure' | 'section' | 'boxselect';
+// #region FIX: Move ActionButton OUTSIDE MainToolbar to prevent recreation on every render
+interface ActionButtonProps {
+  icon: React.ElementType;
+  label: string;
+  onClick: () => void;
+  shortcut?: string;
+  disabled?: boolean;
+}
+
+function ActionButton({ icon: Icon, label, onClick, shortcut, disabled }: ActionButtonProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={(e) => {
+            // Blur button to close tooltip after click
+            (e.currentTarget as HTMLButtonElement).blur();
+            onClick();
+          }}
+          disabled={disabled}
+        >
+          <Icon className="h-4 w-4" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        {label} {shortcut && <span className="ml-2 text-xs opacity-60">({shortcut})</span>}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+// #endregion
 
 interface MainToolbarProps {
   onShowShortcuts?: () => void;
@@ -55,7 +138,11 @@ interface MainToolbarProps {
 
 export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainToolbarProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const { loadFile, loading, progress, geometryResult, ifcDataStore } = useIfc();
+  const addModelInputRef = useRef<HTMLInputElement>(null);
+  const { loadFile, loading, progress, geometryResult, ifcDataStore, models, clearAllModels, loadFilesSequentially, loadFederatedIfcx, addIfcxOverlays, addModel } = useIfc();
+
+  // Check if we have models loaded (for showing add model button)
+  const hasModelsLoaded = models.size > 0 || (geometryResult?.meshes && geometryResult.meshes.length > 0);
   const activeTool = useViewerStore((state) => state.activeTool);
   const setActiveTool = useViewerStore((state) => state.setActiveTool);
   const theme = useViewerStore((state) => state.theme);
@@ -64,17 +151,119 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const isolateEntity = useViewerStore((state) => state.isolateEntity);
   const hideEntity = useViewerStore((state) => state.hideEntity);
   const showAll = useViewerStore((state) => state.showAll);
+  const clearStoreySelection = useViewerStore((state) => state.clearStoreySelection);
   const error = useViewerStore((state) => state.error);
   const cameraCallbacks = useViewerStore((state) => state.cameraCallbacks);
   const hoverTooltipsEnabled = useViewerStore((state) => state.hoverTooltipsEnabled);
   const toggleHoverTooltips = useViewerStore((state) => state.toggleHoverTooltips);
+  const typeVisibility = useViewerStore((state) => state.typeVisibility);
+  const toggleTypeVisibility = useViewerStore((state) => state.toggleTypeVisibility);
+  const resetViewerState = useViewerStore((state) => state.resetViewerState);
+  const bcfPanelVisible = useViewerStore((state) => state.bcfPanelVisible);
+  const toggleBcfPanel = useViewerStore((state) => state.toggleBcfPanel);
+  const idsPanelVisible = useViewerStore((state) => state.idsPanelVisible);
+  const toggleIdsPanel = useViewerStore((state) => state.toggleIdsPanel);
+  const setRightPanelCollapsed = useViewerStore((state) => state.setRightPanelCollapsed);
+
+  // Check which type geometries exist across ALL loaded models (federation-aware)
+  const typeGeometryExists = useMemo(() => {
+    const result = { spaces: false, openings: false, site: false };
+
+    // Check all federated models
+    if (models.size > 0) {
+      for (const [, model] of models) {
+        const meshes = model.geometryResult?.meshes;
+        if (!meshes) continue;
+        for (const m of meshes) {
+          if (m.ifcType === 'IfcSpace') result.spaces = true;
+          else if (m.ifcType === 'IfcOpeningElement') result.openings = true;
+          else if (m.ifcType === 'IfcSite') result.site = true;
+          // Early exit if all found
+          if (result.spaces && result.openings && result.site) return result;
+        }
+      }
+    }
+
+    // Fallback: also check legacy single-model geometryResult
+    if (geometryResult?.meshes) {
+      for (const m of geometryResult.meshes) {
+        if (m.ifcType === 'IfcSpace') result.spaces = true;
+        else if (m.ifcType === 'IfcOpeningElement') result.openings = true;
+        else if (m.ifcType === 'IfcSite') result.site = true;
+        if (result.spaces && result.openings && result.site) return result;
+      }
+    }
+
+    return result;
+  }, [models, geometryResult]);
 
   const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      loadFile(file);
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    // Filter to supported files (IFC, IFCX, GLB)
+    const supportedFiles = Array.from(files).filter(
+      f => f.name.endsWith('.ifc') || f.name.endsWith('.ifcx') || f.name.endsWith('.glb')
+    );
+
+    if (supportedFiles.length === 0) return;
+
+    if (supportedFiles.length === 1) {
+      // Single file - use loadFile (simpler single-model path)
+      loadFile(supportedFiles[0]);
+    } else {
+      // Multiple files - check if ALL are IFCX (use federated loading for layer composition)
+      const allIfcx = supportedFiles.every(f => f.name.endsWith('.ifcx'));
+
+      resetViewerState();
+      clearAllModels();
+
+      if (allIfcx) {
+        // IFCX files use federated loading (layer composition - later files override earlier ones)
+        // This handles overlay files that add properties without geometry
+        console.log(`[MainToolbar] Loading ${supportedFiles.length} IFCX files with federated composition`);
+        loadFederatedIfcx(supportedFiles);
+      } else {
+        // Mixed or all IFC4/GLB files - load sequentially as independent models
+        loadFilesSequentially(supportedFiles);
+      }
+    }
+
+    // Reset input so same files can be selected again
+    e.target.value = '';
+  }, [loadFile, loadFilesSequentially, loadFederatedIfcx, resetViewerState, clearAllModels]);
+
+  const handleAddModelSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    // Filter to supported files (IFC, IFCX, GLB)
+    const supportedFiles = Array.from(files).filter(
+      f => f.name.endsWith('.ifc') || f.name.endsWith('.ifcx') || f.name.endsWith('.glb')
+    );
+
+    if (supportedFiles.length === 0) return;
+
+    // Check if adding IFCX files
+    const newFilesAreIfcx = supportedFiles.every(f => f.name.endsWith('.ifcx'));
+    const existingIsIfcx = isIfcxDataStore(ifcDataStore);
+
+    if (newFilesAreIfcx && existingIsIfcx) {
+      // Adding IFCX overlay(s) to existing IFCX model - re-compose with new layers
+      console.log(`[MainToolbar] Adding ${supportedFiles.length} IFCX overlay(s) to existing IFCX model - re-composing`);
+      addIfcxOverlays(supportedFiles);
+    } else if (newFilesAreIfcx && !existingIsIfcx && ifcDataStore) {
+      // User trying to add IFCX to IFC4 model - won't work
+      console.warn('[MainToolbar] Cannot add IFCX files to non-IFCX model');
+      alert(`IFCX overlay files cannot be added to IFC4 models.\n\nPlease load IFCX files separately.`);
+    } else {
+      // Standard case - add as independent models (IFC4, GLB, or mixed)
+      loadFilesSequentially(supportedFiles);
     }
-  }, [loadFile]);
+
+    // Reset input so same files can be selected again
+    e.target.value = '';
+  }, [loadFilesSequentially, addIfcxOverlays, ifcDataStore]);
 
   const handleIsolate = useCallback(() => {
     if (selectedEntityId) {
@@ -82,11 +271,20 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     }
   }, [selectedEntityId, isolateEntity]);
 
+  const clearSelection = useViewerStore((state) => state.clearSelection);
+
   const handleHide = useCallback(() => {
     if (selectedEntityId) {
       hideEntity(selectedEntityId);
+      // Clear selection after hiding - element is no longer visible
+      clearSelection();
     }
-  }, [selectedEntityId, hideEntity]);
+  }, [selectedEntityId, hideEntity, clearSelection]);
+
+  const handleShowAll = useCallback(() => {
+    showAll();
+    clearStoreySelection(); // Also clear storey filtering (matches 'A' keyboard shortcut)
+  }, [showAll, clearStoreySelection]);
 
   const handleExportGLB = useCallback(() => {
     if (!geometryResult) return;
@@ -120,7 +318,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     }
   }, []);
 
-  const handleExportCSV = useCallback((type: 'entities' | 'properties' | 'quantities') => {
+  const handleExportCSV = useCallback((type: 'entities' | 'properties' | 'quantities' | 'spatial') => {
     if (!ifcDataStore) return;
     try {
       const exporter = new CSVExporter(ifcDataStore);
@@ -140,6 +338,10 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
           csv = exporter.exportQuantities();
           filename = 'quantities.csv';
           break;
+        case 'spatial':
+          csv = exporter.exportSpatialHierarchy();
+          filename = 'spatial-hierarchy.csv';
+          break;
       }
 
       const blob = new Blob([csv], { type: 'text/csv' });
@@ -183,81 +385,36 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     }
   }, [ifcDataStore]);
 
-  const ToolButton = ({
-    tool,
-    icon: Icon,
-    label,
-    shortcut
-  }: {
-    tool: Tool;
-    icon: React.ElementType;
-    label: string;
-    shortcut?: string;
-  }) => (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant={activeTool === tool ? 'default' : 'ghost'}
-          size="icon-sm"
-          onClick={() => setActiveTool(tool)}
-          className={cn(activeTool === tool && 'bg-primary text-primary-foreground')}
-        >
-          <Icon className="h-4 w-4" />
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        {label} {shortcut && <span className="ml-2 text-xs opacity-60">({shortcut})</span>}
-      </TooltipContent>
-    </Tooltip>
-  );
-
-  const ActionButton = ({
-    icon: Icon,
-    label,
-    onClick,
-    shortcut,
-    disabled
-  }: {
-    icon: React.ElementType;
-    label: string;
-    onClick: () => void;
-    shortcut?: string;
-    disabled?: boolean;
-  }) => (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          onClick={onClick}
-          disabled={disabled}
-        >
-          <Icon className="h-4 w-4" />
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        {label} {shortcut && <span className="ml-2 text-xs opacity-60">({shortcut})</span>}
-      </TooltipContent>
-    </Tooltip>
-  );
-
   return (
-    <div className="flex items-center gap-1 px-2 h-12 border-b bg-card">
+    <div className="flex items-center gap-1 px-2 h-12 border-b bg-white dark:bg-black border-zinc-200 dark:border-zinc-800 relative z-50">
       {/* File Operations */}
       <input
         ref={fileInputRef}
         type="file"
-        accept=".ifc"
+        accept=".ifc,.ifcx,.glb"
+        multiple
         onChange={handleFileSelect}
         className="hidden"
       />
+      <input
+        ref={addModelInputRef}
+        type="file"
+        accept=".ifc,.ifcx,.glb"
+        multiple
+        onChange={handleAddModelSelect}
+        className="hidden"
+      />
 
       <Tooltip>
         <TooltipTrigger asChild>
           <Button
             variant="ghost"
             size="icon-sm"
-            onClick={() => fileInputRef.current?.click()}
+            onClick={(e) => {
+              // Blur button to close tooltip before opening file dialog
+              (e.currentTarget as HTMLButtonElement).blur();
+              fileInputRef.current?.click();
+            }}
             disabled={loading}
           >
             {loading ? (
@@ -270,6 +427,27 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         <TooltipContent>Open IFC File</TooltipContent>
       </Tooltip>
 
+      {/* Add Model button - only shown when models are loaded */}
+      {hasModelsLoaded && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={(e) => {
+                (e.currentTarget as HTMLButtonElement).blur();
+                addModelInputRef.current?.click();
+              }}
+              disabled={loading}
+              className="text-[#9ece6a] hover:text-[#9ece6a] hover:bg-[#9ece6a]/10"
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Add Model to Scene (Multi-select supported)</TooltipContent>
+        </Tooltip>
+      )}
+
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant="ghost" size="icon-sm" disabled={!geometryResult}>
@@ -277,23 +455,45 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent>
+          <ExportDialog
+            trigger={
+              <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                <FileText className="h-4 w-4 mr-2" />
+                Export IFC (with changes)
+              </DropdownMenuItem>
+            }
+          />
+          <DropdownMenuSeparator />
           <DropdownMenuItem onClick={handleExportGLB}>
             <Download className="h-4 w-4 mr-2" />
             Export GLB (3D Model)
           </DropdownMenuItem>
           <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => handleExportCSV('entities')} disabled={!ifcDataStore}>
-            <FileSpreadsheet className="h-4 w-4 mr-2" />
-            Export Entities (CSV)
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => handleExportCSV('properties')} disabled={!ifcDataStore}>
-            <FileSpreadsheet className="h-4 w-4 mr-2" />
-            Export Properties (CSV)
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => handleExportCSV('quantities')} disabled={!ifcDataStore}>
-            <FileSpreadsheet className="h-4 w-4 mr-2" />
-            Export Quantities (CSV)
-          </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger disabled={!ifcDataStore}>
+              <FileSpreadsheet className="h-4 w-4 mr-2" />
+              Export CSV
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem onClick={() => handleExportCSV('entities')}>
+                <FileSpreadsheet className="h-4 w-4 mr-2" />
+                Entities
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => handleExportCSV('properties')}>
+                <FileSpreadsheet className="h-4 w-4 mr-2" />
+                Properties
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => handleExportCSV('quantities')}>
+                <FileSpreadsheet className="h-4 w-4 mr-2" />
+                Quantities
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => handleExportCSV('spatial')}>
+                <FileSpreadsheet className="h-4 w-4 mr-2" />
+                Spatial Hierarchy
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
           <DropdownMenuItem onClick={handleExportJSON} disabled={!ifcDataStore}>
             <FileJson className="h-4 w-4 mr-2" />
             Export JSON (All Data)
@@ -306,27 +506,147 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         </DropdownMenuContent>
       </DropdownMenu>
 
+      {/* Edit Menu - Bulk editing and data import */}
+      <DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon-sm" disabled={!ifcDataStore}>
+                <Pencil className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>Edit Properties</TooltipContent>
+        </Tooltip>
+        <DropdownMenuContent>
+          <BulkPropertyEditor
+            trigger={
+              <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                <Filter className="h-4 w-4 mr-2" />
+                Bulk Property Editor
+              </DropdownMenuItem>
+            }
+          />
+          <DataConnector
+            trigger={
+              <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                <Upload className="h-4 w-4 mr-2" />
+                Import Data (CSV)
+              </DropdownMenuItem>
+            }
+          />
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* Export Changes Button - shows when there are pending mutations */}
+      <ExportChangesButton />
+
+      {/* BCF Issues Button */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant={bcfPanelVisible ? 'default' : 'ghost'}
+            size="icon-sm"
+            onClick={(e) => {
+              (e.currentTarget as HTMLButtonElement).blur();
+              // If BCF is being shown, also expand the right panel
+              if (!bcfPanelVisible) {
+                setRightPanelCollapsed(false);
+              }
+              toggleBcfPanel();
+            }}
+            className={cn(bcfPanelVisible && 'bg-primary text-primary-foreground')}
+          >
+            <MessageSquare className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>BCF Issues</TooltipContent>
+      </Tooltip>
+
+      {/* IDS Validation Button */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant={idsPanelVisible ? 'default' : 'ghost'}
+            size="icon-sm"
+            onClick={(e) => {
+              (e.currentTarget as HTMLButtonElement).blur();
+              // If IDS is being shown, also expand the right panel
+              if (!idsPanelVisible) {
+                setRightPanelCollapsed(false);
+              }
+              toggleIdsPanel();
+            }}
+            className={cn(idsPanelVisible && 'bg-primary text-primary-foreground')}
+          >
+            <ClipboardCheck className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>IDS Validation</TooltipContent>
+      </Tooltip>
+
       <Separator orientation="vertical" className="h-6 mx-1" />
 
       {/* Navigation Tools */}
-      <ToolButton tool="select" icon={MousePointer2} label="Select" shortcut="V" />
-      <ToolButton tool="boxselect" icon={SquareDashedMousePointer} label="Box Select" shortcut="B" />
-      <ToolButton tool="pan" icon={Hand} label="Pan" shortcut="P" />
-      <ToolButton tool="orbit" icon={Rotate3d} label="Orbit" shortcut="O" />
-      <ToolButton tool="walk" icon={PersonStanding} label="Walk Mode" shortcut="C" />
+      <ToolButton tool="select" icon={MousePointer2} label="Select" shortcut="V" activeTool={activeTool} onToolChange={setActiveTool} />
+      <ToolButton tool="pan" icon={Hand} label="Pan" shortcut="P" activeTool={activeTool} onToolChange={setActiveTool} />
+      <ToolButton tool="orbit" icon={Rotate3d} label="Orbit" shortcut="O" activeTool={activeTool} onToolChange={setActiveTool} />
+      <ToolButton tool="walk" icon={PersonStanding} label="Walk Mode" shortcut="C" activeTool={activeTool} onToolChange={setActiveTool} />
 
       <Separator orientation="vertical" className="h-6 mx-1" />
 
       {/* Measurement & Section */}
-      <ToolButton tool="measure" icon={Ruler} label="Measure" shortcut="M" />
-      <ToolButton tool="section" icon={Scissors} label="Section" shortcut="X" />
+      <ToolButton tool="measure" icon={Ruler} label="Measure" shortcut="M" activeTool={activeTool} onToolChange={setActiveTool} />
+      <ToolButton tool="section" icon={Scissors} label="Section" shortcut="X" activeTool={activeTool} onToolChange={setActiveTool} />
 
       <Separator orientation="vertical" className="h-6 mx-1" />
 
       {/* Visibility */}
       <ActionButton icon={Focus} label="Isolate Selection" onClick={handleIsolate} shortcut="I" disabled={!selectedEntityId} />
       <ActionButton icon={EyeOff} label="Hide Selection" onClick={handleHide} shortcut="Del" disabled={!selectedEntityId} />
-      <ActionButton icon={Eye} label="Show All" onClick={showAll} shortcut="A" />
+      <ActionButton icon={Eye} label="Show All (Reset Filters)" onClick={handleShowAll} shortcut="A" />
+
+      <DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon-sm" disabled={!geometryResult && models.size === 0}>
+                <Layers className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>Type Visibility</TooltipContent>
+        </Tooltip>
+        <DropdownMenuContent>
+          {typeGeometryExists.spaces && (
+            <DropdownMenuCheckboxItem
+              checked={typeVisibility.spaces}
+              onCheckedChange={() => toggleTypeVisibility('spaces')}
+            >
+              <Box className="h-4 w-4 mr-2" style={{ color: '#33d9ff' }} />
+              Show Spaces
+            </DropdownMenuCheckboxItem>
+          )}
+          {typeGeometryExists.openings && (
+            <DropdownMenuCheckboxItem
+              checked={typeVisibility.openings}
+              onCheckedChange={() => toggleTypeVisibility('openings')}
+            >
+              <SquareX className="h-4 w-4 mr-2" style={{ color: '#ff6b4a' }} />
+              Show Openings
+            </DropdownMenuCheckboxItem>
+          )}
+          {typeGeometryExists.site && (
+            <DropdownMenuCheckboxItem
+              checked={typeVisibility.site}
+              onCheckedChange={() => toggleTypeVisibility('site')}
+            >
+              <Building2 className="h-4 w-4 mr-2" style={{ color: '#66cc4d' }} />
+              Show Site
+            </DropdownMenuCheckboxItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
 
       <Separator orientation="vertical" className="h-6 mx-1" />
 
@@ -336,7 +656,11 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
           <Button
             variant={hoverTooltipsEnabled ? 'default' : 'ghost'}
             size="icon-sm"
-            onClick={toggleHoverTooltips}
+            onClick={(e) => {
+              // Blur button to close tooltip after click
+              (e.currentTarget as HTMLButtonElement).blur();
+              toggleHoverTooltips();
+            }}
             className={cn(hoverTooltipsEnabled && 'bg-primary text-primary-foreground')}
           >
             <Info className="h-4 w-4" />
@@ -434,7 +758,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
             <HelpCircle className="h-4 w-4" />
           </Button>
         </TooltipTrigger>
-        <TooltipContent>Keyboard Shortcuts (?)</TooltipContent>
+        <TooltipContent>Info (?)</TooltipContent>
       </Tooltip>
     </div>
   );