perspective filters supports lookup

packages/web/src/elements/ManagerInnerContainer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   export let width;
-  export let isFlex;
+  export let isFlex = false;
 </script>
 
 <div style={`max-width: ${width}px`} class:isFlex>

packages/web/src/perspectives/PerspectiveFilters.svelte

@@ -4,13 +4,17 @@
   import _ from 'lodash';
 
   import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
-import FontIcon from '../icons/FontIcon.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
   import PerspectiveFiltersColumn from './PerspectiveFiltersColumn.svelte';
 
   export let managerSize;
   export let config: PerspectiveConfig;
   export let setConfig: ChangePerspectiveConfigFunc;
 
+  export let conid;
+  export let database;
+  export let driver;
+
   $: allFilterNames = _.keys(config.filterInfos || {});
 </script>
 
@@ -25,6 +29,9 @@ import FontIcon from '../icons/FontIcon.svelte';
       <PerspectiveFiltersColumn
         filterInfo={config.filterInfos[uniqueName]}
         {uniqueName}
+        {conid}
+        {database}
+        {driver}
         filter={config.filters[uniqueName]}
         onSetFilter={value =>
           setConfig(cfg => ({

packages/web/src/perspectives/PerspectiveFiltersColumn.svelte

@@ -4,22 +4,39 @@
   import ColumnLabel from '../elements/ColumnLabel.svelte';
   import InlineButton from '../buttons/InlineButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
-  import { getFilterType } from 'dbgate-filterparser';
+  import { getFilterType, getFilterValueExpression } from 'dbgate-filterparser';
   import { PerspectiveFilterColumnInfo } from 'dbgate-datalib';
+  import { showModal } from '../modals/modalTools';
+  import DictionaryLookupModal from '../modals/DictionaryLookupModal.svelte';
+  import ValueLookupModal from '../modals/ValueLookupModal.svelte';
 
   export let filterInfo: PerspectiveFilterColumnInfo;
 
   export let filter;
   export let onSetFilter;
   export let onRemoveFilter;
+
+  export let conid;
+  export let database;
+  export let driver;
 </script>
 
 <div class="m-1">
   <div class="space-between">
-    {filterInfo.columnName} ({filterInfo.tableName})
+    {filterInfo.columnName} ({filterInfo.pureName})
     <InlineButton square narrow on:click={onRemoveFilter}>
       <FontIcon icon="icon close" />
     </InlineButton>
   </div>
-  <DataFilterControl filterType={filterInfo.filterType} {filter} setFilter={onSetFilter} />
+  <DataFilterControl
+    filterType={filterInfo.filterType}
+    {filter}
+    setFilter={onSetFilter}
+    {conid}
+    {database}
+    {driver}
+    columnName={filterInfo.columnName}
+    pureName={filterInfo.pureName}
+    foreignKey={filterInfo.foreignKey}
+  />
 </div>

packages/web/src/perspectives/PerspectiveView.svelte

@@ -58,6 +58,7 @@
   export let database;
   export let schemaName;
   export let pureName;
+  export let driver;
 
   export let config: PerspectiveConfig;
   export let setConfig: ChangePerspectiveConfigFunc;
@@ -118,7 +119,7 @@
       </WidgetColumnBarItem>
 
       <WidgetColumnBarItem title="Filters" name="tableFilters">
-        <PerspectiveFilters {managerSize} {config} {setConfig} />
+        <PerspectiveFilters {managerSize} {config} {setConfig} {conid} {database} {driver} />
       </WidgetColumnBarItem>
     </WidgetColumnBar>
   </div>

packages/web/src/tabs/PerspectiveTab.svelte

@@ -26,6 +26,9 @@
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+  import { findEngineDriver } from 'dbgate-tools';
+  import { useConnectionInfo } from '../utility/metadataLoaders';
+  import { extensions } from '../stores';
 
   export let tabid;
   export let conid;
@@ -35,6 +38,9 @@
 
   export const activator = createActivator('PerspectiveTab', true);
 
+  $: connection = useConnectionInfo({ conid });
+  $: driver = findEngineDriver($connection, $extensions);
+
   const config = usePerspectiveConfig(tabid);
   const cache = new PerspectiveCache();
   const loadedCounts = writable({});
@@ -51,6 +57,7 @@
     {database}
     {schemaName}
     {pureName}
+    {driver}
     config={$config}
     setConfig={(value, reload) => {
       if (reload) {