perspective context menu

packages/web/src/elements/ManagerInnerContainer.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   export let width;
+  export let isFlex;
 </script>
 
-<div style={`max-width: ${width}px`}>
+<div style={`max-width: ${width}px`} class:isFlex>
   <slot />
 </div>
 
@@ -12,4 +13,8 @@
     overflow-y: auto;
     overflow-x: auto;
   }
+
+  div.isFlex {
+    display: flex;
+  }
 </style>

packages/web/src/perspectives/PerspectiveFilters.svelte

@@ -4,6 +4,7 @@
   import _ from 'lodash';
 
   import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
+import FontIcon from '../icons/FontIcon.svelte';
   import PerspectiveFiltersColumn from './PerspectiveFiltersColumn.svelte';
 
   export let managerSize;
@@ -13,26 +14,41 @@
   $: allFilterNames = _.keys(config.filterInfos || {});
 </script>
 
-<ManagerInnerContainer width={managerSize}>
-  {#each allFilterNames as uniqueName}
-    <PerspectiveFiltersColumn
-      filterInfo={config.filterInfos[uniqueName]}
-      {uniqueName}
-      filter={config.filters[uniqueName]}
-      onSetFilter={value =>
-        setConfig(cfg => ({
-          ...cfg,
-          filters: {
-            ...cfg.filters,
-            [uniqueName]: value,
-          },
-        }))}
-      onRemoveFilter={value =>
-        setConfig(cfg => ({
-          ...cfg,
-          filters: _.omit(cfg.filters, [uniqueName]),
-          filterInfos: _.omit(cfg.filterInfos, [uniqueName]),
-        }))}
-    />
-  {/each}
+<ManagerInnerContainer width={managerSize} isFlex={allFilterNames.length == 0}>
+  {#if allFilterNames.length == 0}
+    <div class="msg">
+      <div class="mb-3 bold">No Filters defined</div>
+      <div><FontIcon icon="img info" /> Use context menu, command "Add to filter" in table or in tree</div>
+    </div>
+  {:else}
+    {#each allFilterNames as uniqueName}
+      <PerspectiveFiltersColumn
+        filterInfo={config.filterInfos[uniqueName]}
+        {uniqueName}
+        filter={config.filters[uniqueName]}
+        onSetFilter={value =>
+          setConfig(cfg => ({
+            ...cfg,
+            filters: {
+              ...cfg.filters,
+              [uniqueName]: value,
+            },
+          }))}
+        onRemoveFilter={value =>
+          setConfig(cfg => ({
+            ...cfg,
+            filters: _.omit(cfg.filters, [uniqueName]),
+            filterInfos: _.omit(cfg.filterInfos, [uniqueName]),
+          }))}
+      />
+    {/each}
+  {/if}
 </ManagerInnerContainer>
+
+<style>
+  .msg {
+    background: var(--theme-bg-1);
+    flex: 1;
+    padding: 10px;
+  }
+</style>

packages/web/src/perspectives/PerspectiveHeaderControl.svelte

@@ -9,8 +9,6 @@
   export let config: PerspectiveConfig;
   export let setConfig: ChangePerspectiveConfigFunc;
 
-  let mouseIn;
-
   $: parentUniqueName = column.dataNode?.parentNode?.uniqueName || '';
   $: uniqueName = column.dataNode.uniqueName;
   $: order = config.sort?.[parentUniqueName]?.find(x => x.uniqueName == uniqueName)?.order;
@@ -20,54 +18,6 @@
       : -1;
   $: isSortDefined = config.sort?.[parentUniqueName]?.length > 0;
 
-  const setSort = order => {
-    setConfig(
-      cfg => ({
-        ...cfg,
-        sort: {
-          ...cfg.sort,
-          [parentUniqueName]: [{ uniqueName, order }],
-        },
-      }),
-      true
-    );
-  };
-
-  const addToSort = order => {
-    setConfig(
-      cfg => ({
-        ...cfg,
-        sort: {
-          ...cfg.sort,
-          [parentUniqueName]: [...(cfg.sort?.[parentUniqueName] || []), { uniqueName, order }],
-        },
-      }),
-      true
-    );
-  };
-
-  const clearSort = () => {
-    setConfig(
-      cfg => ({
-        ...cfg,
-        sort: {
-          ...cfg.sort,
-          [parentUniqueName]: [],
-        },
-      }),
-      true
-    );
-  };
-
-  function getMenu() {
-    return [
-      { onClick: () => setSort('ASC'), text: 'Sort ascending' },
-      { onClick: () => setSort('DESC'), text: 'Sort descending' },
-      isSortDefined && !order && { onClick: () => addToSort('ASC'), text: 'Add to sort - ascending' },
-      isSortDefined && !order && { onClick: () => addToSort('DESC'), text: 'Add to sort - descending' },
-      order && { onClick: () => clearSort(), text: 'Clear sort criteria' },
-    ];
-  }
 </script>
 
 {#if column.isVisible(columnLevel)}
@@ -75,8 +25,6 @@
     rowspan={column.rowSpan}
     class="columnHeader"
     data-column={column.columnIndex}
-    on:mouseenter={() => (mouseIn = true)}
-    on:mouseleave={() => (mouseIn = false)}
   >
     <div class="wrap">
       <div class="label">
@@ -100,12 +48,6 @@
         </span>
       {/if}
     </div>
-
-    {#if mouseIn}
-      <div class="menuButton">
-        <DropDownButton menu={getMenu} narrow />
-      </div>
-    {/if}
   </th>
 {/if}
 {#if column.showParent(columnLevel)}
@@ -116,11 +58,6 @@
   .wrap {
     display: flex;
   }
-  .menuButton {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-  }
   .label {
     flex-wrap: nowrap;
   }
@@ -143,12 +80,6 @@
     align-self: center;
     font-size: 18px;
   }
-  /* .resizer {
-      background-color: var(--theme-border);
-      width: 2px;
-      cursor: col-resize;
-      z-index: 1;
-    } */
   .grouping {
     color: var(--theme-font-alt);
     white-space: nowrap;

packages/web/src/perspectives/perspectiveMenu.ts

@@ -1,4 +1,5 @@
 import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveTreeNode } from 'dbgate-datalib';
+import _ from 'lodash';
 import { showModal } from '../modals/modalTools';
 import CustomJoinModal from './CustomJoinModal.svelte';
 
@@ -15,7 +16,63 @@ export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
   const { node, conid, database, root, config, setConfig } = props;
   const customJoin = node.customJoinConfig;
   const filterInfo = node.filterInfo;
+
+  const parentUniqueName = node?.parentNode?.uniqueName || '';
+  const uniqueName = node.uniqueName;
+  const order = config.sort?.[parentUniqueName]?.find(x => x.uniqueName == uniqueName)?.order;
+  const orderIndex =
+    config.sort?.[parentUniqueName]?.length > 1
+      ? _.findIndex(config.sort?.[parentUniqueName], x => x.uniqueName == uniqueName)
+      : -1;
+  const isSortDefined = config.sort?.[parentUniqueName]?.length > 0;
+
+  const setSort = order => {
+    setConfig(
+      cfg => ({
+        ...cfg,
+        sort: {
+          ...cfg.sort,
+          [parentUniqueName]: [{ uniqueName, order }],
+        },
+      }),
+      true
+    );
+  };
+
+  const addToSort = order => {
+    setConfig(
+      cfg => ({
+        ...cfg,
+        sort: {
+          ...cfg.sort,
+          [parentUniqueName]: [...(cfg.sort?.[parentUniqueName] || []), { uniqueName, order }],
+        },
+      }),
+      true
+    );
+  };
+
+  const clearSort = () => {
+    setConfig(
+      cfg => ({
+        ...cfg,
+        sort: {
+          ...cfg.sort,
+          [parentUniqueName]: [],
+        },
+      }),
+      true
+    );
+  };
+
   return [
+    { onClick: () => setSort('ASC'), text: 'Sort ascending' },
+    { onClick: () => setSort('DESC'), text: 'Sort descending' },
+    isSortDefined && !order && { onClick: () => addToSort('ASC'), text: 'Add to sort - ascending' },
+    isSortDefined && !order && { onClick: () => addToSort('DESC'), text: 'Add to sort - descending' },
+    order && { onClick: () => clearSort(), text: 'Clear sort criteria' },
+    { divider: true },
+
     filterInfo && {
       text: 'Add to filter',
       onClick: () =>