reference manager

packages/web/public/global.css

@@ -34,6 +34,12 @@ body {
 .flex {
   display: flex;
 }
+.nowrap {
+  white-space: nowrap;
+}
+.bold {
+  font-weight: bold;
+}
 
 .col-9 {
   flex-basis: 75%;

packages/web/src/datagrid/ColumnManager.svelte

@@ -11,18 +11,18 @@
   export let managerSize;
   export let display: GridDisplay;
 
-  let columnFilter;
+  let filter;
 </script>
 
 <SearchBoxWrapper>
-  <SearchInput placeholder="Search columns" bind:value={columnFilter} />
+  <SearchInput placeholder="Search columns" bind:value={filter} />
   <InlineButton on:click={() => display.hideAllColumns()}>Hide</InlineButton>
   <InlineButton on:click={() => display.showAllColumns()}>Show</InlineButton>
 </SearchBoxWrapper>
 <ManagerInnerContainer width={managerSize}>
   {#each display
-    .getColumns(columnFilter)
+    .getColumns(filter)
-    .filter(column => filterName(columnFilter, column.columnName)) as column (column.uniqueName)}
+    .filter(column => filterName(filter, column.columnName)) as column (column.uniqueName)}
     <ColumnManagerRow {display} {column} />
   {/each}
 </ManagerInnerContainer>

packages/web/src/datagrid/DataGrid.svelte

@@ -3,9 +3,12 @@
   import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
   import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
   import ColumnManager from './ColumnManager.svelte';
+  import ReferenceManager from './ReferenceManager.svelte';
 
   export let config;
   export let gridCoreComponent;
+
+  export let isDetailView = false;
   export let showReferences = true;
 
   let managerSize;
@@ -14,8 +17,13 @@
 <HorizontalSplitter initialValue="300px" bind:size={managerSize}>
   <div class="left" slot="1">
     <WidgetColumnBar>
-      <WidgetColumnBarItem title="Columns" name="columns" height={showReferences ? '40%' : '60%'} />
+      <WidgetColumnBarItem title="Columns" name="columns" height={showReferences ? '40%' : '60%'}>
-      <ColumnManager {...$$props} {managerSize} />
+        <ColumnManager {...$$props} {managerSize} />
+      </WidgetColumnBarItem>
+
+      <WidgetColumnBarItem title="References" name="references" height="30%" collapsed={isDetailView}>
+        <ReferenceManager {...$$props} {managerSize} />
+      </WidgetColumnBarItem>
     </WidgetColumnBar>
   </div>
   <div slot="2">

packages/web/src/datagrid/ReferenceManager.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { filterName, GridDisplay } from 'dbgate-datalib';
+  import { createEventDispatcher } from 'svelte';
+
+  import InlineButton from '../elements/InlineButton.svelte';
+  import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
+
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import ColumnManagerRow from './ColumnManagerRow.svelte';
+
+  export let managerSize;
+  export let display: GridDisplay;
+
+  const dispatch = createEventDispatcher();
+
+  let filter;
+
+  $: foreignKeys = display?.baseTable?.foreignKeys || [];
+  $: dependencies = display?.baseTable?.dependencies || [];
+</script>
+
+<SearchBoxWrapper>
+  <SearchInput placeholder="Search references" bind:value={filter} />
+</SearchBoxWrapper>
+<ManagerInnerContainer width={managerSize}>
+  {#if foreignKeys.length > 0}
+    <div class="bold nowrap ml-1">References tables ({foreignKeys.length})</div>
+    {#each foreignKeys.filter(fk => filterName(filter, fk.refTableName)) as fk}
+      <div
+        class="link"
+        on:click={() =>
+          dispatch('referenceclick', {
+            schemaName: fk.refSchemaName,
+            pureName: fk.refTableName,
+            columns: fk.columns.map(col => ({
+              baseName: col.columnName,
+              refName: col.refColumnName,
+            })),
+          })}
+      >
+        <FontIcon icon="img link" />
+        <div class="ml-1 nowrap">
+          {fk.refTableName}
+          ({fk.columns.map(x => x.columnName).join(', ')})
+        </div>
+      </div>
+    {/each}
+  {/if}
+
+  {#if dependencies.length > 0}
+    <div class="bold nowrap ml-1">References tables ({dependencies.length})</div>
+    {#each dependencies.filter(fk => filterName(filter, fk.pureName)) as fk}
+      <div
+        class="link"
+        on:click={() =>
+          dispatch('referenceclick', {
+            schemaName: fk.schemaName,
+            pureName: fk.pureName,
+            columns: fk.columns.map(col => ({
+              baseName: col.refColumnName,
+              refName: col.columnName,
+            })),
+          })}
+      >
+        <FontIcon icon="img reference" />
+        <div class="ml-1 nowrap">
+          {fk.pureName}
+          ({fk.columns.map(x => x.columnName).join(', ')})
+        </div>
+      </div>
+    {/each}
+  {/if}
+</ManagerInnerContainer>
+
+<style>
+  .link {
+    color: var(--theme-font-link);
+    margin: 5px;
+    cursor: pointer;
+    display: flex;
+    flex-wrap: nowrap;
+  }
+  .link:hover {
+    text-decoration: underline;
+  }
+</style>

packages/web/src/widgets/WidgetColumnBarItem.svelte

@@ -2,7 +2,9 @@
   export let title;
   export let name;
   export let height = null;
-  export let visible = true;
+  export let collapsed = null;
+
+  let visible = !collapsed;
 </script>
 
 <div class="title" on:click={() => (visible = !visible)}>{title}</div>