Improved perfs

web/src/SignalTree.tsx

@@ -1,8 +1,11 @@
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 import type { SignalRef } from './lib/types';
 import SyntheticWizard from './SyntheticWizard';
 import SyntheticEditor from './SyntheticEditor';
+import GroupsTree from './GroupsTree';
+
+type TreeTab = 'sources' | 'groups';
 
 interface SignalInfo {
   name: string;
@@ -41,6 +44,7 @@ interface Props {
 }
 
 export default function SignalTree({ onDragStart, width }: Props) {
+  const [treeTab, setTreeTab] = useState<TreeTab>('sources');
   const [collapsed, setCollapsed] = useState(false);
   const [groups, setGroups] = useState<DsGroup[]>([]);
   const [customSignals, setCustomSignals] = useState<Array<{ ds: string; name: string }>>(loadCustom);
@@ -222,6 +226,26 @@ export default function SignalTree({ onDragStart, width }: Props) {
 
       {!collapsed && (
         <div class="signal-tree-body">
+          {/* Tab bar: Sources | Groups */}
+          <div class="signal-tree-tabs">
+            <button
+              class={`stab${treeTab === 'sources' ? ' stab-active' : ''}`}
+              onClick={() => setTreeTab('sources')}
+            >Sources</button>
+            <button
+              class={`stab${treeTab === 'groups' ? ' stab-active' : ''}`}
+              onClick={() => setTreeTab('groups')}
+            >Groups</button>
+          </div>
+
+          {/* Groups tab */}
+          {treeTab === 'groups' && (
+            <GroupsTree onDragStart={onDragStart} />
+          )}
+
+          {/* Sources tab contents */}
+          {treeTab === 'sources' && <>
+
           {/* Search / filter bar */}
           <div class="signal-tree-search">
             <div class="signal-search-row">
@@ -332,6 +356,7 @@ export default function SignalTree({ onDragStart, width }: Props) {
               })
             )}
           </div>
+          </>}
         </div>
       )}