@ifc-lite/viewer 1.15.0 → 1.17.0

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

@@ -34,7 +34,6 @@ import { useViewerStore } from '@/store';
 import { useIfc } from '@/hooks/useIfc';
 import {
   executeList,
-  listResultToCSV,
   LIST_PRESETS,
   importListDefinition,
   exportListDefinition,
@@ -172,18 +171,6 @@ export function ListPanel({ onClose }: ListPanelProps) {
     }
   }, [editingList]);
 
-  const handleExportCSV = useCallback(() => {
-    if (!listResult) return;
-    const csv = listResultToCSV(listResult);
-    const blob = new Blob([csv], { type: 'text/csv' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'list-export.csv';
-    a.click();
-    setTimeout(() => URL.revokeObjectURL(url), 1000);
-  }, [listResult]);
-
   const handleImport = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -228,14 +215,6 @@ export function ListPanel({ onClose }: ListPanelProps) {
                 </TooltipTrigger>
                 <TooltipContent>Edit Configuration</TooltipContent>
               </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon-sm" onClick={handleExportCSV}>
-                    <Download className="h-3.5 w-3.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>Export CSV</TooltipContent>
-              </Tooltip>
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button variant="ghost" size="icon-sm" onClick={() => setView('library')}>

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

@@ -12,10 +12,14 @@
 
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { ArrowUp, ArrowDown, Search, Palette } from 'lucide-react';
+import { ArrowUp, ArrowDown, Search, Palette, Eye, EyeOff, Download } from 'lucide-react';
 import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useViewerStore } from '@/store';
+import { getVisibleBasketEntityRefsFromStore } from '@/store/basketVisibleSet';
 import type { ListResult, ListRow, CellValue, ColumnDefinition } from '@ifc-lite/lists';
+import { listResultToCSV } from '@ifc-lite/lists';
 import { cn } from '@/lib/utils';
 import { columnToAutoColor } from '@/lib/lists/columnToAutoColor';
 import { AUTO_COLOR_FROM_LIST_ID } from '@/store/slices/lensSlice';
@@ -29,6 +33,7 @@ export function ListResultsTable({ result }: ListResultsTableProps) {
   const [searchQuery, setSearchQuery] = useState('');
   const [sortCol, setSortCol] = useState<number | null>(null);
   const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
+  const [filterByVisibility, setFilterByVisibility] = useState(true);
 
   const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
   const setSelectedEntity = useViewerStore((s) => s.setSelectedEntity);
@@ -37,14 +42,49 @@ export function ListResultsTable({ result }: ListResultsTableProps) {
   const activeLensId = useViewerStore((s) => s.activeLensId);
   const [colorByColIdx, setColorByColIdx] = useState<number | null>(null);
 
+  // Subscribe to visibility state so we re-filter when 3D visibility changes
+  const hiddenEntities = useViewerStore((s) => s.hiddenEntities);
+  const isolatedEntities = useViewerStore((s) => s.isolatedEntities);
+  const classFilter = useViewerStore((s) => s.classFilter);
+  const lensHiddenIds = useViewerStore((s) => s.lensHiddenIds);
+  const selectedStoreys = useViewerStore((s) => s.selectedStoreys);
+  const typeVisibility = useViewerStore((s) => s.typeVisibility);
+  const hiddenEntitiesByModel = useViewerStore((s) => s.hiddenEntitiesByModel);
+  const isolatedEntitiesByModel = useViewerStore((s) => s.isolatedEntitiesByModel);
+  const models = useViewerStore((s) => s.models);
+  const activeBasketViewId = useViewerStore((s) => s.activeBasketViewId);
+  const geometryResult = useViewerStore((s) => s.geometryResult);
+
+  // Filter rows by 3D visibility
+  const visibilityFilteredRows = useMemo(() => {
+    if (!filterByVisibility) return result.rows;
+
+    const visibleRefs = getVisibleBasketEntityRefsFromStore();
+    const visibleSet = new Set<string>();
+    for (const ref of visibleRefs) {
+      visibleSet.add(`${ref.modelId}:${ref.expressId}`);
+    }
+
+    return result.rows.filter(row => {
+      // List uses 'default' for single-model, visibility uses 'legacy'
+      const modelId = row.modelId === 'default' ? 'legacy' : row.modelId;
+      return visibleSet.has(`${modelId}:${row.entityId}`);
+    });
+  }, [
+    result.rows, filterByVisibility,
+    hiddenEntities, isolatedEntities, classFilter, lensHiddenIds,
+    selectedStoreys, typeVisibility, hiddenEntitiesByModel,
+    isolatedEntitiesByModel, models, activeBasketViewId, geometryResult,
+  ]);
+
   // Filter rows by search query
   const filteredRows = useMemo(() => {
-    if (!searchQuery) return result.rows;
+    if (!searchQuery) return visibilityFilteredRows;
     const q = searchQuery.toLowerCase();
-    return result.rows.filter(row =>
+    return visibilityFilteredRows.filter(row =>
       row.values.some(v => v !== null && String(v).toLowerCase().includes(q))
     );
-  }, [result.rows, searchQuery]);
+  }, [visibilityFilteredRows, searchQuery]);
 
   // Sort rows
   const sortedRows = useMemo(() => {
@@ -74,6 +114,23 @@ export function ListResultsTable({ result }: ListResultsTableProps) {
     setColorByColIdx(colIdx);
   }, [activateAutoColorFromColumn]);
 
+  const handleExportCSV = useCallback(() => {
+    const exportResult: ListResult = {
+      columns: result.columns,
+      rows: sortedRows,
+      totalCount: sortedRows.length,
+      executionTime: result.executionTime,
+    };
+    const csv = listResultToCSV(exportResult);
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'list-export.csv';
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  }, [result.columns, result.executionTime, sortedRows]);
+
   const handleRowClick = useCallback((row: ListRow) => {
     setSelectedEntity({ modelId: row.modelId, expressId: row.entityId });
     // For single-model, selectedEntityId is the expressId
@@ -111,8 +168,39 @@ export function ListResultsTable({ result }: ListResultsTableProps) {
           className="h-7 text-xs border-0 shadow-none focus-visible:ring-0 px-0"
         />
         <span className="text-xs text-muted-foreground whitespace-nowrap">
-          {sortedRows.length}{searchQuery ? ` / ${result.rows.length}` : ''} rows
+          {sortedRows.length}{(searchQuery || filterByVisibility) ? ` / ${result.rows.length}` : ''} rows
         </span>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className={cn(
+                'h-6 w-6 shrink-0',
+                filterByVisibility && 'text-primary',
+              )}
+              onClick={() => setFilterByVisibility(prev => !prev)}
+            >
+              {filterByVisibility ? <Eye className="h-3.5 w-3.5" /> : <EyeOff className="h-3.5 w-3.5" />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            {filterByVisibility ? 'Showing visible objects only' : 'Showing all objects'}
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="h-6 w-6 shrink-0"
+              onClick={handleExportCSV}
+            >
+              <Download className="h-3.5 w-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Export CSV</TooltipContent>
+        </Tooltip>
       </div>
 
       {/* Table */}