perspectives WIP

packages/datalib/src/PerspectiveColumnDefinition.ts

@@ -0,0 +1,50 @@
+import { ColumnInfo, ForeignKeyInfo, TableInfo } from 'dbgate-types';
+import { clearConfigCache } from 'prettier';
+import { ChangePerspectiveConfigFunc, PerspectiveConfig } from './PerspectiveConfig';
+
+export abstract class PerspectiveColumnDefinition {
+  abstract get title();
+  abstract get props();
+  abstract get isExpanded();
+  abstract get isExpandable();
+  abstract get level();
+  abstract toggleExpanded();
+}
+
+export class PerspectiveTableColumnDefinition extends PerspectiveColumnDefinition {
+  foreignKey: ForeignKeyInfo;
+  constructor(
+    public column: ColumnInfo,
+    public table: TableInfo,
+    public config: PerspectiveConfig,
+    public setConfig: ChangePerspectiveConfigFunc
+  ) {
+    super();
+
+    this.foreignKey =
+      table.foreignKeys &&
+      table.foreignKeys.find(fk => fk.columns.length == 1 && fk.columns[0].columnName == column.columnName);
+  }
+
+  get title() {
+    return this.column.columnName;
+  }
+
+  get props() {
+    return this.column;
+  }
+
+  get isExpanded() {
+    return this.config.expandedColumns.includes(this.column.uniqueName);
+  }
+
+  get isExpandable() {
+    return !!this.foreignKey;
+  }
+
+  get level() {
+    return 0;
+  }
+
+  toggleExpanded() {}
+}

packages/datalib/src/PerspectiveConfig.ts

@@ -0,0 +1,17 @@
+export interface PerspectiveConfig {
+  hiddenColumns: string[];
+  shownColumns: string[];
+  expandedColumns: string[];
+  collapsedColumns: string[];
+}
+
+export function createPerspectiveConfig(): PerspectiveConfig {
+  return {
+    hiddenColumns: [],
+    shownColumns: [],
+    expandedColumns: [],
+    collapsedColumns: [],
+  };
+}
+
+export type ChangePerspectiveConfigFunc = (changeFunc: (config: PerspectiveConfig) => PerspectiveConfig) => void;

packages/datalib/src/index.ts

@@ -1,5 +1,7 @@
 export * from './GridDisplay';
 export * from './GridConfig';
+export * from './PerspectiveConfig';
+export * from './PerspectiveColumnDefinition';
 export * from './TableGridDisplay';
 export * from './ViewGridDisplay';
 export * from './JslGridDisplay';

packages/web/src/perspectives/PerspectiveColumnRow.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import ColumnLabel from '../elements/ColumnLabel.svelte';
+  import { plusExpandIcon } from '../icons/expandIcons';
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let column;
+</script>
+
+<div class="row">
+  <span class="expandColumnIcon" style={`margin-right: ${5 + column.level * 10}px`}>
+    <FontIcon
+      icon={column.isExpandable ? plusExpandIcon(column.isExpanded) : 'icon invisible-box'}
+      on:click={() => column.togglExpanded()}
+    />
+  </span>
+
+  <input
+    type="checkbox"
+    checked={column.isChecked}
+    on:click={e => {
+      e.stopPropagation();
+    }}
+    on:mousedown={e => {
+      e.stopPropagation();
+    }}
+    on:change={() => {
+      const newValue = !column.isChecked;
+      // display.setColumnVisibility(column.uniquePath, newValue);
+      // dispatch('setvisibility', newValue);
+    }}
+  />
+
+  <ColumnLabel {...column.props} showDataType />
+</div>
+
+<style>
+  .row {
+    margin-left: 5px;
+    margin-right: 5px;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+  .row:hover {
+    background: var(--theme-bg-hover);
+  }
+
+  .row.isSelected {
+    background: var(--theme-bg-selected);
+  }
+</style>

packages/web/src/perspectives/PerspectiveColumns.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { each } from 'svelte/internal';
+  import ColumnLabel from '../elements/ColumnLabel.svelte';
+  import PerspectiveColumnRow from './PerspectiveColumnRow.svelte';
+
+  export let columns = [];
+</script>
+
+{#each columns as column}
+  <PerspectiveColumnRow {column} />
+{/each}

packages/web/src/perspectives/PerspectiveView.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { PerspectiveTableColumnDefinition } from 'dbgate-datalib';
+
   import _ from 'lodash';
 
   import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
@@ -15,6 +17,9 @@
   export let schemaName;
   export let pureName;
 
+  export let config;
+  export let setConfig;
+
   let managerSize;
 
   $: if (managerSize) setLocalStorage('perspectiveManagerWidth', managerSize);
@@ -30,15 +35,31 @@
   const tableInfo = useTableInfo({ conid, database, schemaName, pureName });
   const viewInfo = useViewInfo({ conid, database, schemaName, pureName });
 
-  $: console.log('tableInfo', $tableInfo);
-  $: console.log('viewInfo', $viewInfo);
+  // $: console.log('tableInfo', $tableInfo);
+  // $: console.log('viewInfo', $viewInfo);
+
+  function getTableColumns(table, config, setConfig) {
+    return table.columns.map(col => new PerspectiveTableColumnDefinition(col, table, config, setConfig));
+  }
+
+  function getViewColumns(view, config, setConfig) {
+    return [];
+  }
+
+  $: columns = $tableInfo
+    ? getTableColumns($tableInfo, config, setConfig)
+    : $viewInfo
+    ? getViewColumns($viewInfo, config, setConfig)
+    : null;
 </script>
 
 <HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize}>
   <div class="left" slot="1">
     <WidgetColumnBar>
       <WidgetColumnBarItem title="Columns" name="columns" height="45%">
-        <PerspectiveColumns />
+        {#if columns}
+          <PerspectiveColumns {columns} />
+        {/if}
       </WidgetColumnBarItem>
     </WidgetColumnBar>
   </div>

packages/web/src/tabs/PerspectiveTab.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import PerspectiveView from '../perspectives/PerspectiveView.svelte';
+  import usePerspectiveConfig from '../utility/usePerspectiveConfig';
 
   export let tabid;
   export let conid;
   export let database;
   export let schemaName;
   export let pureName;
+
+  const config = usePerspectiveConfig(tabid);
 </script>
 
-<PerspectiveView {conid} {database} {schemaName} {pureName} />
+<PerspectiveView {conid} {database} {schemaName} {pureName} config={$config} setConfig={config.update} />

packages/web/src/utility/usePerspectiveConfig.ts

@@ -0,0 +1,25 @@
+import { createPerspectiveConfig } from 'dbgate-datalib';
+import { writable } from 'svelte/store';
+import { onDestroy } from 'svelte';
+
+function doLoadPerspectiveConfigFunc(tabid) {
+  try {
+    const existing = localStorage.getItem(`tabdata_perspective_${tabid}`);
+    if (existing) {
+      return {
+        ...createPerspectiveConfig(),
+        ...JSON.parse(existing),
+      };
+    }
+  } catch (err) {
+    console.warn('Error loading perspective config:', err.message);
+  }
+  return createPerspectiveConfig();
+}
+
+export default function usePerspectiveConfig(tabid) {
+  const config = writable(doLoadPerspectiveConfigFunc(tabid));
+  const unsubscribe = config.subscribe(value => localStorage.setItem(`tabdata_perspective_${tabid}`, JSON.stringify(value)));
+  onDestroy(unsubscribe);
+  return config;
+}