perspective ctx menu

packages/web/src/perspectives/PerspectiveCell.svelte

@@ -4,9 +4,10 @@
   export let value;
   export let rowSpan;
   export let rowData;
+  export let columnIndex;
 </script>
 
-<td rowspan={rowSpan}>
+<td rowspan={rowSpan} data-column={columnIndex}>
   {#if value !== undefined}
     <CellValue {rowData} {value} />
   {/if}

packages/web/src/perspectives/PerspectiveHeaderControl.svelte

@@ -74,6 +74,7 @@
   <th
     rowspan={column.rowSpan}
     class="columnHeader"
+    data-column={column.columnIndex}
     on:mouseenter={() => (mouseIn = true)}
     on:mouseleave={() => (mouseIn = false)}
   >

packages/web/src/perspectives/PerspectiveNodeRow.svelte

@@ -7,6 +7,7 @@
   import { showModal } from '../modals/modalTools';
   import contextMenu from '../utility/contextMenu';
   import CustomJoinModal from './CustomJoinModal.svelte';
+  import { getPerspectiveNodeMenu } from './perspectiveMenu';
 
   export let conid;
   export let database;
@@ -16,41 +17,14 @@
   export let setConfig: ChangePerspectiveConfigFunc;
 
   function createMenu() {
-    const customJoin = node.customJoinConfig;
+    return getPerspectiveNodeMenu({
-    const filterInfo = node.filterInfo;
+      conid,
-    return [
+      database,
-      filterInfo && {
+      node,
-        text: 'Add to filter',
+      root,
-        onClick: () =>
+      config,
-          setConfig(cfg => ({
+      setConfig,
-            ...cfg,
+    });
-            filterInfos: {
-              ...cfg.filterInfos,
-              [node.uniqueName]: filterInfo,
-            },
-          })),
-      },
-      customJoin && {
-        text: 'Remove custom join',
-        onClick: () =>
-          setConfig(cfg => ({
-            ...cfg,
-            customJoins: (cfg.customJoins || []).filter(x => x.joinid != customJoin.joinid),
-          })),
-      },
-      customJoin && {
-        text: 'Edit custom join',
-        onClick: () =>
-          showModal(CustomJoinModal, {
-            config,
-            setConfig,
-            conid,
-            database,
-            root,
-            editValue: customJoin,
-          }),
-      },
-    ];
   }
 </script>
 

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -29,6 +29,7 @@
   import PerspectiveLoadingIndicator from './PerspectiveLoadingIndicator.svelte';
   import PerspectiveHeaderControl from './PerspectiveHeaderControl.svelte';
   import createRef from '../utility/createRef';
+  import { getPerspectiveNodeMenu } from './perspectiveMenu';
 
   const dbg = debug('dbgate:PerspectivaTable');
   export const activator = createActivator('PerspectiveTable', true);
@@ -37,6 +38,8 @@
   export let loadedCounts;
   export let config;
   export let setConfig;
+  export let conid;
+  export let database;
 
   let dataRows;
   let domWrapper;
@@ -151,18 +154,34 @@
     checkLoadAdditionalData();
   }
 
-  function buildMenu() {
+  function buildMenu({ targetElement }) {
-    return [
+    const res = [];
-      {
+    const td = targetElement.closest('td') || targetElement.closest('th');
-        command: 'perspective.refresh',
+
-      },
+    if (td) {
-      {
+      const columnIndex = td.getAttribute('data-column');
-        command: 'perspective.openJson',
+      const column = display?.columns?.[columnIndex];
-      },
+      if (column)
-      {
+        res.push(
-        command: 'perspective.customJoin',
+          getPerspectiveNodeMenu({
-      },
+            config,
-    ];
+            conid,
+            database,
+            node: column.dataNode,
+            root,
+            setConfig,
+          })
+        );
+    }
+
+    res.push([
+      { divider: true },
+      { command: 'perspective.refresh' },
+      { command: 'perspective.openJson' },
+      { command: 'perspective.customJoin' },
+    ]);
+
+    return res;
   }
 
   function getLastVisibleRowIndex() {
@@ -301,6 +320,7 @@
             {#each display.columns as column}
               {#if !row.rowCellSkips[column.columnIndex]}
                 <PerspectiveCell
+                  columnIndex={column.columnIndex}
                   value={row.rowData[column.columnIndex]}
                   rowSpan={row.rowSpans[column.columnIndex]}
                   rowData={row.rowData}

packages/web/src/perspectives/PerspectiveView.svelte

@@ -124,7 +124,7 @@
   </div>
 
   <svelte:fragment slot="2">
-    <PerspectiveTable {root} {loadedCounts} {config} {setConfig} />
+    <PerspectiveTable {root} {loadedCounts} {config} {setConfig} {conid} {database} />
   </svelte:fragment>
 </HorizontalSplitter>
 

packages/web/src/perspectives/perspectiveMenu.ts

@@ -0,0 +1,51 @@
+import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveTreeNode } from 'dbgate-datalib';
+import { showModal } from '../modals/modalTools';
+import CustomJoinModal from './CustomJoinModal.svelte';
+
+interface PerspectiveNodeMenuProps {
+  node: PerspectiveTreeNode;
+  conid: string;
+  database: string;
+  root: PerspectiveTreeNode;
+  config: PerspectiveConfig;
+  setConfig: ChangePerspectiveConfigFunc;
+}
+
+export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
+  const { node, conid, database, root, config, setConfig } = props;
+  const customJoin = node.customJoinConfig;
+  const filterInfo = node.filterInfo;
+  return [
+    filterInfo && {
+      text: 'Add to filter',
+      onClick: () =>
+        setConfig(cfg => ({
+          ...cfg,
+          filterInfos: {
+            ...cfg.filterInfos,
+            [node.uniqueName]: filterInfo,
+          },
+        })),
+    },
+    customJoin && {
+      text: 'Remove custom join',
+      onClick: () =>
+        setConfig(cfg => ({
+          ...cfg,
+          customJoins: (cfg.customJoins || []).filter(x => x.joinid != customJoin.joinid),
+        })),
+    },
+    customJoin && {
+      text: 'Edit custom join',
+      onClick: () =>
+        showModal(CustomJoinModal, {
+          config,
+          setConfig,
+          conid,
+          database,
+          root,
+          editValue: customJoin,
+        }),
+    },
+  ];
+}