parentFilter - declarative support

packages/web/src/icons/FontIcon.svelte

@@ -95,6 +95,8 @@
     'icon json': 'mdi mdi-code-json',
     'icon lock': 'mdi mdi-lock',
     'icon custom-join': 'mdi mdi-arrow-left-right-bold',
+    'icon parent-filter': 'mdi mdi-home-alert',
+    'icon parent-filter-outline': 'mdi mdi-home-alert-outline',
 
     'icon run': 'mdi mdi-play',
     'icon chevron-down': 'mdi mdi-chevron-down',
@@ -174,6 +176,7 @@
     'img filter': 'mdi mdi-filter',
     'img group': 'mdi mdi-group',
     'img perspective': 'mdi mdi-eye color-icon-yellow',
+    'img parent-filter': 'mdi mdi-home-alert color-icon-yellow',
 
     'img folder': 'mdi mdi-folder color-icon-yellow',
     'img type-string': 'mdi mdi-alphabetical color-icon-blue',

packages/web/src/perspectives/PerspectiveHeaderControl.svelte

@@ -49,8 +49,17 @@
   <th
     colspan={column.getColSpan(columnLevel)}
     class="tableHeader"
-    data-tableNodeUniqueName={column.getParentTableUniqueName(columnLevel)}>{column.getParentName(columnLevel)}</th
+    data-tableNodeUniqueName={column.getParentTableUniqueName(columnLevel)}
   >
+    <div class="wrap">
+      {column.getParentName(columnLevel)}
+      {#if column.getParentNode(columnLevel)?.isParentFilter}
+        <span class="icon">
+          <FontIcon icon="img parent-filter" />
+        </span>
+      {/if}
+    </div>
+  </th>
 {/if}
 
 <style>

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -212,6 +212,32 @@
         });
       }
 
+      console.log('tableNode?.supportsParentFilter', tableNode?.supportsParentFilter);
+      if (tableNode?.supportsParentFilter) {
+        const isParentFilter = (config.parentFilters || []).find(x => x.uniqueName == tableNode.uniqueName);
+        if (isParentFilter) {
+          res.push({
+            text: 'Cancel filter parent rows',
+            onClick: () => {
+              setConfig(cfg => ({
+                ...cfg,
+                parentFilters: cfg.parentFilters.filter(x => x.uniqueName != tableNode.uniqueName),
+              }));
+            },
+          });
+        } else {
+          res.push({
+            text: 'Filter parent rows',
+            onClick: () => {
+              setConfig(cfg => ({
+                ...cfg,
+                parentFilters: [...(cfg.parentFilters || []), { uniqueName: tableNode.uniqueName }],
+              }));
+            },
+          });
+        }
+      }
+
       const rowIndex = tr?.getAttribute('data-rowIndex');
       if (rowIndex != null) {
         const value = display.rows[rowIndex].rowData[columnIndex];