@ifc-lite/viewer 1.26.0 → 1.27.0

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

@@ -0,0 +1,72 @@
+/* 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/. */
+
+/**
+ * Status / control strip above the results table. Shows the active grouping
+ * and sum columns as removable chips, plus expand/collapse and live totals —
+ * the connective tissue between the table and the list definition.
+ */
+
+import { Group, Sigma, X, ChevronsDownUp, ChevronsUpDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface ListGroupingBarProps {
+  groupLabel: string | null;
+  sums: { id: string; label: string }[];
+  groupCount: number;
+  count: number;
+  allExpanded: boolean;
+  onClearGroup: () => void;
+  onRemoveSum: (id: string) => void;
+  onToggleExpandAll: () => void;
+}
+
+function Chip({ icon, children, onRemove }: { icon: React.ReactNode; children: React.ReactNode; onRemove: () => void }) {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full border border-primary/30 bg-primary/10 py-0.5 pl-2 pr-1 text-[11px] font-medium text-foreground">
+      {icon}
+      <span className="max-w-[12rem] truncate">{children}</span>
+      <button
+        onClick={onRemove}
+        className="ml-0.5 rounded-full p-0.5 text-muted-foreground hover:bg-primary/20 hover:text-foreground"
+        aria-label="Remove"
+      >
+        <X className="h-3 w-3" />
+      </button>
+    </span>
+  );
+}
+
+export function ListGroupingBar({
+  groupLabel, sums, groupCount, count, allExpanded,
+  onClearGroup, onRemoveSum, onToggleExpandAll,
+}: ListGroupingBarProps) {
+  const grouped = groupLabel !== null;
+  return (
+    <div className="flex flex-wrap items-center gap-1.5 border-b bg-muted/30 px-3 py-1.5 text-xs">
+      {grouped && (
+        <button
+          onClick={onToggleExpandAll}
+          className="mr-0.5 inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground"
+          title={allExpanded ? 'Collapse all groups' : 'Expand all groups'}
+        >
+          {allExpanded ? <ChevronsDownUp className="h-3.5 w-3.5" /> : <ChevronsUpDown className="h-3.5 w-3.5" />}
+        </button>
+      )}
+
+      {grouped
+        ? <Chip icon={<Group className="h-3 w-3 text-primary" />} onRemove={onClearGroup}>Grouped by {groupLabel}</Chip>
+        : <span className="text-muted-foreground">No grouping — use a column&apos;s <span className="font-medium text-foreground">⋮</span> menu to group or sum</span>}
+
+      {sums.map((s) => (
+        <Chip key={s.id} icon={<Sigma className="h-3 w-3 text-primary" />} onRemove={() => onRemoveSum(s.id)}>{s.label}</Chip>
+      ))}
+
+      <span className={cn('ml-auto whitespace-nowrap font-medium text-muted-foreground')}>
+        {grouped && <>{groupCount.toLocaleString()} group{groupCount === 1 ? '' : 's'} · </>}
+        {count.toLocaleString()} element{count === 1 ? '' : 's'}
+      </span>
+    </div>
+  );
+}

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

@@ -34,12 +34,14 @@ import { useViewerStore } from '@/store';
 import { useIfc } from '@/hooks/useIfc';
 import {
   executeList,
+  summariseListRows,
   LIST_PRESETS,
   importListDefinition,
   exportListDefinition,
   createListDataProvider,
 } from '@/lib/lists';
-import type { ListDefinition, ListResult, ListDataProvider } from '@/lib/lists';
+import type { ListDefinition, ListResult, ListDataProvider, ListGrouping } from '@/lib/lists';
+import type { IfcDataStore } from '@ifc-lite/parser';
 import { ListBuilder } from './ListBuilder';
 import { ListResultsTable } from './ListResultsTable';
 
@@ -64,6 +66,17 @@ export function ListPanel({ onClose }: ListPanelProps) {
   const setActiveListId = useViewerStore((s) => s.setActiveListId);
   const setListResult = useViewerStore((s) => s.setListResult);
   const setListExecuting = useViewerStore((s) => s.setListExecuting);
+  const pendingListDraft = useViewerStore((s) => s.pendingListDraft);
+  const setPendingListDraft = useViewerStore((s) => s.setPendingListDraft);
+
+  // A draft handed off from "Create list" (search filter) opens straight into
+  // the builder for column configuration, then is cleared so it fires once.
+  React.useEffect(() => {
+    if (!pendingListDraft) return;
+    setEditingList(pendingListDraft);
+    setView('builder');
+    setPendingListDraft(null);
+  }, [pendingListDraft, setPendingListDraft]);
 
   const importInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -71,21 +84,22 @@ export function ListPanel({ onClose }: ListPanelProps) {
   // arrays can never drift out of alignment (skipping a model without
   // an ifcDataStore must not shift every later model's provider index).
   const modelProviderPairs = useMemo(() => {
-    const pairs: Array<{ modelId: string; provider: ListDataProvider }> = [];
+    const pairs: Array<{ modelId: string; provider: ListDataProvider; store: IfcDataStore }> = [];
     if (models.size > 0) {
       for (const [modelId, model] of models) {
         // Skip native-metadata models — they don't have a parsed
         // IfcDataStore, so the list provider can't query them.
         if (!model.ifcDataStore) continue;
-        pairs.push({ modelId, provider: createListDataProvider(model.ifcDataStore) });
+        pairs.push({ modelId, provider: createListDataProvider(model.ifcDataStore), store: model.ifcDataStore });
       }
     } else if (ifcDataStore) {
-      pairs.push({ modelId: 'default', provider: createListDataProvider(ifcDataStore) });
+      pairs.push({ modelId: 'default', provider: createListDataProvider(ifcDataStore), store: ifcDataStore });
     }
     return pairs;
   }, [models, ifcDataStore]);
 
   const allProviders = useMemo(() => modelProviderPairs.map((p) => p.provider), [modelProviderPairs]);
+  const allStores = useMemo(() => modelProviderPairs.map((p) => p.store), [modelProviderPairs]);
 
   const hasData = allProviders.length > 0;
 
@@ -107,11 +121,17 @@ export function ListPanel({ onClose }: ListPanelProps) {
         const allRows = resultParts.flatMap(r => r.rows);
         const totalTime = resultParts.reduce((sum, r) => sum + r.executionTime, 0);
 
+        // Re-derive groups/summary over the merged rows so grouping works
+        // across federated models (and isn't dropped on the merge).
+        const { groups, summary } = summariseListRows(definition, allRows);
+
         setListResult({
           columns: definition.columns,
           rows: allRows,
           totalCount: allRows.length,
           executionTime: totalTime,
+          groups,
+          summary,
         });
         setView('results');
       } catch (err) {
@@ -164,6 +184,24 @@ export function ListPanel({ onClose }: ListPanelProps) {
     }
   }, [editingList]);
 
+  // Grouping/summing changed directly from the results table: update the
+  // executed definition (so Settings reflects it), persist if it's saved, and
+  // re-derive groups/summary over the current rows for a consistent result.
+  const handleGroupingFromTable = useCallback((grouping: ListGrouping | undefined) => {
+    const def = editingList;
+    if (!def) return;
+    const next: ListDefinition = { ...def, grouping };
+    setEditingList(next);
+    if (listDefinitions.some((d) => d.id === def.id)) {
+      updateListDefinition(def.id, { grouping });
+    }
+    const current = useViewerStore.getState().listResult;
+    if (current) {
+      const summ = summariseListRows(next, current.rows);
+      setListResult({ ...current, groups: summ.groups, summary: summ.summary });
+    }
+  }, [editingList, listDefinitions, updateListDefinition, setListResult]);
+
   const handleImport = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -251,6 +289,7 @@ export function ListPanel({ onClose }: ListPanelProps) {
       {view === 'builder' && hasData && (
         <ListBuilder
           providers={allProviders}
+          stores={allStores}
           initial={editingList}
           onSave={handleSaveList}
           onCancel={() => setView('library')}
@@ -259,7 +298,12 @@ export function ListPanel({ onClose }: ListPanelProps) {
       )}
 
       {view === 'results' && listResult && (
-        <ListResultsTable result={listResult} />
+        <ListResultsTable
+          result={listResult}
+          listName={editingList?.name}
+          grouping={editingList?.grouping}
+          onGroupingChange={handleGroupingFromTable}
+        />
       )}
 
       {/* Hidden import input */}