From 0dc8ff88be17bf1bab942cf72e22bac76ec8cf4e Mon Sep 17 00:00:00 2001
From: Aleksei Potsetsuev <wrouds@gmail.com>
Date: Thu, 4 Jan 2024 15:18:25 +0800
Subject: [PATCH 1/2] CB-4401 feat: save value panel state per column

---
 .../src/ExceptionsCatcherService.ts           |  2 +
 .../Actions/DatabaseDataResultAction.ts       | 28 +++++++
 .../Actions/DatabaseMetadataAction.ts         | 47 ++++++++++++
 .../Actions/Document/DocumentDataAction.ts    | 14 +++-
 .../Actions/IDatabaseDataMetadataAction.ts    | 17 +++++
 .../Actions/IDatabaseDataResultAction.ts      |  5 +-
 .../Actions/ResultSet/ResultSetDataAction.ts  | 14 +++-
 .../Actions/ResultSet/ResultSetViewAction.ts  |  4 +-
 .../src/TableViewer/ValuePanel/ValuePanel.tsx | 43 ++++++++---
 .../BooleanValue/BooleanValuePresentation.tsx |  6 +-
 .../BooleanValuePresentationBootstrap.ts      |  6 +-
 .../ImageValue/ImageValuePresentation.tsx     | 74 +++++++++++++------
 .../ImageValuePresentationBootstrap.ts        |  6 +-
 .../TextValue/TextValuePresentation.tsx       | 44 ++++++-----
 .../isTextValuePresentationAvailable.ts       |  6 +-
 .../TextValue/useTextValue.ts                 |  4 +-
 .../packages/plugin-data-viewer/src/index.ts  |  4 +
 .../src/GISValuePresentation.tsx              | 39 ++++------
 .../src/GISViewerBootstrap.ts                 | 11 +--
 19 files changed, 269 insertions(+), 105 deletions(-)
 create mode 100644 webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/DatabaseDataResultAction.ts
 create mode 100644 webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/DatabaseMetadataAction.ts
 create mode 100644 webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataMetadataAction.ts

diff --git a/webapp/packages/core-events/src/ExceptionsCatcherService.ts b/webapp/packages/core-events/src/ExceptionsCatcherService.ts
index d7ec27ae3d..822fce5453 100644
--- a/webapp/packages/core-events/src/ExceptionsCatcherService.ts
+++ b/webapp/packages/core-events/src/ExceptionsCatcherService.ts
@@ -47,6 +47,8 @@ export class ExceptionsCatcherService extends Bootstrap {
       });
     }
 
+    console.error(_error);
+
     if (this.baseCatcher) {
       return this.baseCatcher(event, source, lineno, colno, _error);
     }
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/DatabaseDataResultAction.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/DatabaseDataResultAction.ts
new file mode 100644
index 0000000000..eb95b012d4
--- /dev/null
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/DatabaseDataResultAction.ts
@@ -0,0 +1,28 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import type { ResultDataFormat } from '@cloudbeaver/core-sdk';
+
+import { DatabaseDataAction } from '../DatabaseDataAction';
+import type { IDatabaseDataResult } from '../IDatabaseDataResult';
+import type { IDatabaseDataSource } from '../IDatabaseDataSource';
+import { databaseDataAction } from './DatabaseDataActionDecorator';
+import type { IDatabaseDataResultAction } from './IDatabaseDataResultAction';
+
+@databaseDataAction()
+export abstract class DatabaseDataResultAction<TKey, TResult extends IDatabaseDataResult>
+  extends DatabaseDataAction<any, TResult>
+  implements IDatabaseDataResultAction<TKey, TResult>
+{
+  static dataFormat: ResultDataFormat[] | null = null;
+
+  constructor(source: IDatabaseDataSource<any, TResult>) {
+    super(source);
+  }
+  abstract getIdentifier(key: TKey): string;
+  abstract serialize(key: TKey): string;
+}
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/DatabaseMetadataAction.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/DatabaseMetadataAction.ts
new file mode 100644
index 0000000000..1e48d4be3f
--- /dev/null
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/DatabaseMetadataAction.ts
@@ -0,0 +1,47 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import type { ResultDataFormat } from '@cloudbeaver/core-sdk';
+import { MetadataMap } from '@cloudbeaver/core-utils';
+
+import { DatabaseDataAction } from '../DatabaseDataAction';
+import type { IDatabaseDataResult } from '../IDatabaseDataResult';
+import type { IDatabaseDataSource } from '../IDatabaseDataSource';
+import { databaseDataAction } from './DatabaseDataActionDecorator';
+import type { IDatabaseDataMetadataAction } from './IDatabaseDataMetadataAction';
+
+@databaseDataAction()
+export class DatabaseMetadataAction<TKey, TResult extends IDatabaseDataResult>
+  extends DatabaseDataAction<any, TResult>
+  implements IDatabaseDataMetadataAction<TKey, TResult>
+{
+  static dataFormat: ResultDataFormat[] | null = null;
+  readonly metadata: MetadataMap<string, any>;
+
+  constructor(source: IDatabaseDataSource<any, TResult>) {
+    super(source);
+    this.metadata = new MetadataMap();
+  }
+
+  has(key: string): boolean {
+    return this.metadata.has(key);
+  }
+
+  get<T>(key: string): T | undefined;
+  get<T>(key: string, getDefaultValue: (() => T) | undefined): T;
+  get<T>(key: string, getDefaultValue?: (() => T) | undefined): T | undefined {
+    return this.metadata.get(key, getDefaultValue);
+  }
+
+  set(key: string, value: any): void {
+    this.metadata.set(key, value);
+  }
+
+  delete(key: string): void {
+    this.metadata.delete(key);
+  }
+}
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/Document/DocumentDataAction.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/Document/DocumentDataAction.ts
index 8d5773077e..e32d081193 100644
--- a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/Document/DocumentDataAction.ts
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/Document/DocumentDataAction.ts
@@ -9,15 +9,15 @@ import { computed, makeObservable } from 'mobx';
 
 import { ResultDataFormat } from '@cloudbeaver/core-sdk';
 
-import { DatabaseDataAction } from '../../DatabaseDataAction';
 import type { IDatabaseDataSource } from '../../IDatabaseDataSource';
 import type { IDatabaseResultSet } from '../../IDatabaseResultSet';
 import { databaseDataAction } from '../DatabaseDataActionDecorator';
-import type { IDatabaseDataResultAction } from '../IDatabaseDataResultAction';
+import { DatabaseDataResultAction } from '../DatabaseDataResultAction';
 import type { IDatabaseDataDocument } from './IDatabaseDataDocument';
+import type { IDocumentElementKey } from './IDocumentElementKey';
 
 @databaseDataAction()
-export class DocumentDataAction extends DatabaseDataAction<any, IDatabaseResultSet> implements IDatabaseDataResultAction<IDatabaseResultSet> {
+export class DocumentDataAction extends DatabaseDataResultAction<IDocumentElementKey, IDatabaseResultSet> {
   static dataFormat = [ResultDataFormat.Document];
 
   get documents(): IDatabaseDataDocument[] {
@@ -37,6 +37,14 @@ export class DocumentDataAction extends DatabaseDataAction<any, IDatabaseResultS
     });
   }
 
+  getIdentifier(key: IDocumentElementKey): string {
+    return key.index.toString();
+  }
+
+  serialize(key: IDocumentElementKey): string {
+    return key.index.toString();
+  }
+
   get(index: number): IDatabaseDataDocument | undefined {
     if (this.documents.length <= index) {
       return undefined;
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataMetadataAction.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataMetadataAction.ts
new file mode 100644
index 0000000000..d924a3eba8
--- /dev/null
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataMetadataAction.ts
@@ -0,0 +1,17 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import type { IDatabaseDataAction } from '../IDatabaseDataAction';
+import type { IDatabaseDataResult } from '../IDatabaseDataResult';
+
+export interface IDatabaseDataMetadataAction<TKey, TResult extends IDatabaseDataResult> extends IDatabaseDataAction<any, TResult> {
+  get<T>(key: string): T | undefined;
+  get<T>(key: string, getDefaultValue: () => T): T;
+  set(key: string, value: any): void;
+  delete(key: string): void;
+  has(key: string): boolean;
+}
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataResultAction.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataResultAction.ts
index c74490c590..ac3baae398 100644
--- a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataResultAction.ts
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataResultAction.ts
@@ -8,4 +8,7 @@
 import type { IDatabaseDataAction } from '../IDatabaseDataAction';
 import type { IDatabaseDataResult } from '../IDatabaseDataResult';
 
-export type IDatabaseDataResultAction<TResult extends IDatabaseDataResult> = IDatabaseDataAction<any, TResult>;
+export interface IDatabaseDataResultAction<TKey, TResult extends IDatabaseDataResult> extends IDatabaseDataAction<any, TResult> {
+  getIdentifier(key: TKey): string;
+  serialize(key: TKey): string;
+}
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSet/ResultSetDataAction.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSet/ResultSetDataAction.ts
index 328ca9d696..183539c22e 100644
--- a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSet/ResultSetDataAction.ts
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSet/ResultSetDataAction.ts
@@ -9,18 +9,18 @@ import { computed, makeObservable } from 'mobx';
 
 import { DataTypeLogicalOperation, ResultDataFormat, SqlResultColumn } from '@cloudbeaver/core-sdk';
 
-import { DatabaseDataAction } from '../../DatabaseDataAction';
 import type { IDatabaseDataSource } from '../../IDatabaseDataSource';
 import type { IDatabaseResultSet } from '../../IDatabaseResultSet';
 import { databaseDataAction } from '../DatabaseDataActionDecorator';
-import type { IDatabaseDataResultAction } from '../IDatabaseDataResultAction';
+import { DatabaseDataResultAction } from '../DatabaseDataResultAction';
 import type { IResultSetContentValue } from './IResultSetContentValue';
 import type { IResultSetColumnKey, IResultSetElementKey, IResultSetRowKey } from './IResultSetDataKey';
 import { isResultSetContentValue } from './isResultSetContentValue';
+import { ResultSetDataKeysUtils } from './ResultSetDataKeysUtils';
 import type { IResultSetValue } from './ResultSetFormatAction';
 
 @databaseDataAction()
-export class ResultSetDataAction extends DatabaseDataAction<any, IDatabaseResultSet> implements IDatabaseDataResultAction<IDatabaseResultSet> {
+export class ResultSetDataAction extends DatabaseDataResultAction<IResultSetElementKey, IDatabaseResultSet> {
   static dataFormat = [ResultDataFormat.Resultset];
 
   get rows(): IResultSetValue[][] {
@@ -39,6 +39,14 @@ export class ResultSetDataAction extends DatabaseDataAction<any, IDatabaseResult
     });
   }
 
+  getIdentifier(key: IResultSetElementKey): string {
+    return ResultSetDataKeysUtils.serialize(key.column);
+  }
+
+  serialize(key: IResultSetElementKey): string {
+    return ResultSetDataKeysUtils.serializeElementKey(key);
+  }
+
   getDefaultKey(): IResultSetElementKey {
     return {
       row: {
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSet/ResultSetViewAction.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSet/ResultSetViewAction.ts
index 3835cc88b6..cd3948c173 100644
--- a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSet/ResultSetViewAction.ts
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSet/ResultSetViewAction.ts
@@ -10,10 +10,10 @@ import { action, makeObservable, observable } from 'mobx';
 import { DataTypeLogicalOperation, ResultDataFormat, SqlResultColumn } from '@cloudbeaver/core-sdk';
 
 import { DatabaseDataAction } from '../../DatabaseDataAction';
+import type { IDatabaseDataAction } from '../../IDatabaseDataAction';
 import type { IDatabaseDataSource } from '../../IDatabaseDataSource';
 import type { IDatabaseResultSet } from '../../IDatabaseResultSet';
 import { databaseDataAction } from '../DatabaseDataActionDecorator';
-import type { IDatabaseDataResultAction } from '../IDatabaseDataResultAction';
 import { compareResultSetRowKeys } from './compareResultSetRowKeys';
 import type { IResultSetComplexValue } from './IResultSetComplexValue';
 import type { IResultSetColumnKey, IResultSetElementKey, IResultSetRowKey } from './IResultSetDataKey';
@@ -24,7 +24,7 @@ import { ResultSetEditAction } from './ResultSetEditAction';
 import type { IResultSetValue } from './ResultSetFormatAction';
 
 @databaseDataAction()
-export class ResultSetViewAction extends DatabaseDataAction<any, IDatabaseResultSet> implements IDatabaseDataResultAction<IDatabaseResultSet> {
+export class ResultSetViewAction extends DatabaseDataAction<any, IDatabaseResultSet> implements IDatabaseDataAction<any, IDatabaseResultSet> {
   static dataFormat = [ResultDataFormat.Resultset];
 
   get rowKeys(): IResultSetRowKey[] {
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel/ValuePanel.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel/ValuePanel.tsx
index 239b24f84e..8c2444b443 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel/ValuePanel.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel/ValuePanel.tsx
@@ -5,13 +5,17 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import { useRef, useState } from 'react';
 import styled, { css } from 'reshadow';
 
 import { useService } from '@cloudbeaver/core-di';
 import { BASE_TAB_STYLES, TabList, TabPanelList, TabsState, UNDERLINE_TAB_STYLES } from '@cloudbeaver/core-ui';
+import { MetadataMap } from '@cloudbeaver/core-utils';
 
+import { DatabaseDataResultAction } from '../../DatabaseDataModel/Actions/DatabaseDataResultAction';
+import { DatabaseMetadataAction } from '../../DatabaseDataModel/Actions/DatabaseMetadataAction';
+import { DatabaseSelectAction } from '../../DatabaseDataModel/Actions/DatabaseSelectAction';
 import type { IDatabaseResultSet } from '../../DatabaseDataModel/IDatabaseResultSet';
 import type { DataPresentationComponent } from '../../DataPresentationService';
 import { DataValuePanelService } from './DataValuePanelService';
@@ -47,17 +51,35 @@ const styles = css`
 
 export const ValuePanel: DataPresentationComponent<any, IDatabaseResultSet> = observer(function ValuePanel({ dataFormat, model, resultIndex }) {
   const service = useService(DataValuePanelService);
-  const [currentTabId, setCurrentTabId] = useState('');
-  const lastTabId = useRef('');
+  const selectAction = model.source.getActionImplementation(resultIndex, DatabaseSelectAction);
+  const dataResultAction = model.source.getActionImplementation(resultIndex, DatabaseDataResultAction);
+  const metadataAction = model.source.getAction(resultIndex, DatabaseMetadataAction);
+  const activeElements = selectAction?.getActiveElements();
+  let elementKey: string | null = null;
+
+  if (dataResultAction && activeElements && activeElements.length > 0) {
+    elementKey = dataResultAction.getIdentifier(activeElements[0]);
+  }
+
+  const state = metadataAction.get(`value-panel-${elementKey}`, () =>
+    observable(
+      {
+        currentTabId: '',
+        tabsState: new MetadataMap<string, any>(),
+        setCurrentTabId(tabId: string) {
+          this.currentTabId = tabId;
+        },
+      },
+      { tabsState: false },
+      {},
+    ),
+  );
 
   const displayed = service.getDisplayed({ dataFormat, model, resultIndex });
+  let currentTabId = state.currentTabId;
 
-  if (displayed.length > 0) {
-    const firstTabId = displayed[0].key;
-    if (firstTabId !== lastTabId.current) {
-      setCurrentTabId(firstTabId);
-      lastTabId.current = firstTabId;
-    }
+  if (displayed.length > 0 && (!currentTabId || !displayed.some(tab => tab.key === currentTabId))) {
+    currentTabId = displayed[0].key;
   }
 
   return styled(
@@ -71,8 +93,9 @@ export const ValuePanel: DataPresentationComponent<any, IDatabaseResultSet> = ob
       dataFormat={dataFormat}
       model={model}
       resultIndex={resultIndex}
+      localState={state.tabsState}
       lazy
-      onChange={tab => setCurrentTabId(tab.tabId)}
+      onChange={tab => state.setCurrentTabId(tab.tabId)}
     >
       <TabList style={[BASE_TAB_STYLES, styles, UNDERLINE_TAB_STYLES]} />
       <TabPanelList style={[BASE_TAB_STYLES, styles, UNDERLINE_TAB_STYLES]} />
diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentation.tsx b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentation.tsx
index 6a4d9cdf8c..c7923db010 100644
--- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentation.tsx
+++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentation.tsx
@@ -33,9 +33,9 @@ export const BooleanValuePresentation: TabContainerPanelComponent<IDataValuePane
   function BooleanValuePresentation({ model, resultIndex }) {
     const translate = useTranslate();
     const selection = model.source.getAction(resultIndex, ResultSetSelectAction);
-    const focusCell = selection.getFocusedElement();
+    const activeElements = selection.getActiveElements();
 
-    if (!selection.elements.length && !focusCell) {
+    if (activeElements.length === 0) {
       return null;
     }
 
@@ -44,7 +44,7 @@ export const BooleanValuePresentation: TabContainerPanelComponent<IDataValuePane
     const view = model.source.getAction(resultIndex, ResultSetViewAction);
     const editor = model.source.getAction(resultIndex, ResultSetEditAction);
 
-    const firstSelectedCell = selection.elements[0] || focusCell;
+    const firstSelectedCell = activeElements[0];
     const cellValue = view.getCellValue(firstSelectedCell);
 
     if (typeof cellValue === 'string' && isStringifiedBoolean(cellValue)) {
diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentationBootstrap.ts b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentationBootstrap.ts
index 5901e98157..4e158d0b2c 100644
--- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentationBootstrap.ts
+++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentationBootstrap.ts
@@ -34,12 +34,12 @@ export class BooleanValuePresentationBootstrap extends Bootstrap {
 
         const selection = context.model.source.getAction(context.resultIndex, ResultSetSelectAction);
 
-        const focusedElement = selection.getFocusedElement();
+        const activeElements = selection.getActiveElements();
 
-        if (selection.elements.length > 0 || focusedElement) {
+        if (activeElements.length > 0) {
           const view = context.model.source.getAction(context.resultIndex, ResultSetViewAction);
 
-          const firstSelectedCell = selection.elements[0] || focusedElement;
+          const firstSelectedCell = activeElements[0];
           const cellValue = view.getCellValue(firstSelectedCell);
 
           if (cellValue === undefined) {
diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
index fc1cee6b42..b811489679 100644
--- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
+++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
@@ -13,10 +13,11 @@ import { selectFiles } from '@cloudbeaver/core-browser';
 import { useService } from '@cloudbeaver/core-di';
 import { NotificationService } from '@cloudbeaver/core-events';
 import { QuotasService } from '@cloudbeaver/core-root';
-import type { TabContainerPanelComponent } from '@cloudbeaver/core-ui';
+import { type TabContainerPanelComponent, useTabLocalState } from '@cloudbeaver/core-ui';
 import { bytesToSize, download, getMIME, isImageFormat, isValidUrl } from '@cloudbeaver/core-utils';
 
 import { createResultSetBlobValue } from '../../DatabaseDataModel/Actions/ResultSet/createResultSetBlobValue';
+import type { IResultSetElementKey } from '../../DatabaseDataModel/Actions/ResultSet/IResultSetDataKey';
 import { isResultSetBlobValue } from '../../DatabaseDataModel/Actions/ResultSet/isResultSetBlobValue';
 import { isResultSetContentValue } from '../../DatabaseDataModel/Actions/ResultSet/isResultSetContentValue';
 import { isResultSetFileValue } from '../../DatabaseDataModel/Actions/ResultSet/isResultSetFileValue';
@@ -68,7 +69,22 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
     const quotasService = useService(QuotasService);
     const style = useS(styles);
 
-    const state = useObservableRef(
+    const state = useTabLocalState(() =>
+      observable(
+        {
+          stretch: false,
+          toggleStretch() {
+            this.stretch = !this.stretch;
+          },
+        },
+        {
+          stretch: observable.ref,
+          toggleStretch: action.bound,
+        },
+      ),
+    );
+
+    const data = useObservableRef(
       () => ({
         get editAction(): ResultSetEditAction {
           return this.model.source.getAction(this.resultIndex, ResultSetEditAction);
@@ -82,12 +98,20 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
         get formatAction(): ResultSetFormatAction {
           return this.model.source.getAction(this.resultIndex, ResultSetFormatAction);
         },
-        get selectedCell() {
-          const focusCell = this.selectAction.getFocusedElement();
+        get selectedCell(): IResultSetElementKey | undefined {
+          const activeElements = this.selectAction.getActiveElements();
 
-          return this.selectAction.elements[0] || focusCell;
+          if (activeElements.length === 0) {
+            return undefined;
+          }
+
+          return activeElements[0];
         },
         get cellValue() {
+          if (this.selectedCell === undefined) {
+            return null;
+          }
+
           return this.formatAction.get(this.selectedCell);
         },
         get src() {
@@ -108,16 +132,22 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
           return '';
         },
         get savedSrc() {
+          if (!this.selectedCell) {
+            return undefined;
+          }
           return this.contentAction.retrieveFileDataUrlFromCache(this.selectedCell);
         },
         get canSave() {
-          if (this.truncated) {
+          if (this.truncated && this.selectedCell) {
             return this.contentAction.isDownloadable(this.selectedCell);
           }
 
           return !!this.src;
         },
         get canUpload() {
+          if (!this.selectedCell) {
+            return false;
+          }
           return this.formatAction.isBinary(this.selectedCell);
         },
         get truncated() {
@@ -131,13 +161,9 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
           }
           return false;
         },
-        stretch: false,
-        toggleStretch() {
-          this.stretch = !this.stretch;
-        },
         async save() {
           try {
-            if (this.truncated) {
+            if (this.truncated && this.selectedCell) {
               await this.contentAction.downloadFileData(this.selectedCell);
             } else {
               download(this.src, '', true);
@@ -149,7 +175,7 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
         async upload() {
           selectFiles(files => {
             const file = files?.item(0) ?? undefined;
-            if (file) {
+            if (file && this.selectedCell) {
               this.editAction.set(this.selectedCell, createResultSetBlobValue(file));
             }
           });
@@ -167,28 +193,30 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
         savedSrc: computed,
         canSave: computed,
         truncated: computed,
-        stretch: observable.ref,
         model: observable.ref,
         resultIndex: observable.ref,
-        toggleStretch: action.bound,
         save: action.bound,
         upload: action.bound,
       },
       { model, resultIndex, notificationService },
     );
 
-    const save = state.canSave ? state.save : undefined;
-    const upload = state.canUpload ? state.upload : undefined;
+    const save = data.canSave ? data.save : undefined;
+    const upload = data.canUpload ? data.upload : undefined;
     const loading = model.isLoading();
-    const value = state.cellValue;
+    const value = data.cellValue;
 
-    if (state.truncated && !state.savedSrc && isResultSetContentValue(value)) {
+    if (data.truncated && !data.savedSrc && isResultSetContentValue(value)) {
       const limit = bytesToSize(quotasService.getQuota('sqlBinaryPreviewMaxLength'));
       const valueSize = bytesToSize(value.contentLength ?? 0);
 
       const load = async () => {
+        if (!data.selectedCell) {
+          return;
+        }
+
         try {
-          await state.contentAction.resolveFileDataUrl(state.selectedCell);
+          await data.contentAction.resolveFileDataUrl(data.selectedCell);
         } catch (exception: any) {
           notificationService.logException(exception, 'data_viewer_presentation_value_content_download_error');
         }
@@ -198,12 +226,12 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
         <Container vertical>
           <Container fill overflow center>
             <QuotaPlaceholder limit={limit} size={valueSize}>
-              {state.contentAction.isDownloadable(state.selectedCell) && (
+              {data.selectedCell && data.contentAction.isDownloadable(data.selectedCell) && (
                 <Button
                   disabled={loading}
                   loading={
-                    !!state.contentAction.activeElement &&
-                    ResultSetDataKeysUtils.isElementsKeyEqual(state.contentAction.activeElement, state.selectedCell)
+                    !!data.contentAction.activeElement &&
+                    ResultSetDataKeysUtils.isElementsKeyEqual(data.contentAction.activeElement, data.selectedCell)
                   }
                   onClick={load}
                 >
@@ -220,7 +248,7 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
     return (
       <Container vertical>
         <Container fill overflow center>
-          <img src={state.src} className={s(style, { img: true, stretch: state.stretch })} />
+          <img src={data.src} className={s(style, { img: true, stretch: state.stretch })} />
         </Container>
         <Tools loading={loading} stretch={state.stretch} onToggleStretch={state.toggleStretch} onSave={save} onUpload={upload} />
       </Container>
diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentationBootstrap.ts b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentationBootstrap.ts
index 08ea8f8a45..a7f8487b55 100644
--- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentationBootstrap.ts
+++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentationBootstrap.ts
@@ -34,12 +34,12 @@ export class ImageValuePresentationBootstrap extends Bootstrap {
 
         const selection = context.model.source.getAction(context.resultIndex, ResultSetSelectAction);
 
-        const focusedElement = selection.getFocusedElement();
+        const activeElements = selection.getActiveElements();
 
-        if (selection.elements.length > 0 || focusedElement) {
+        if (activeElements.length > 0) {
           const view = context.model.source.getAction(context.resultIndex, ResultSetViewAction);
 
-          const firstSelectedCell = selection.elements[0] || focusedElement;
+          const firstSelectedCell = activeElements[0];
 
           const cellValue = view.getCellValue(firstSelectedCell);
 
diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/TextValuePresentation.tsx b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/TextValuePresentation.tsx
index 32a96da23b..b776d55be9 100644
--- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/TextValuePresentation.tsx
+++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/TextValuePresentation.tsx
@@ -10,11 +10,11 @@ import { observer } from 'mobx-react-lite';
 import { useMemo } from 'react';
 import styled, { css } from 'reshadow';
 
-import { Button, useObservableRef, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { NotificationService } from '@cloudbeaver/core-events';
 import { QuotasService } from '@cloudbeaver/core-root';
-import { BASE_TAB_STYLES, TabContainerPanelComponent, TabList, TabsState, UNDERLINE_TAB_STYLES } from '@cloudbeaver/core-ui';
+import { BASE_TAB_STYLES, TabContainerPanelComponent, TabList, TabsState, UNDERLINE_TAB_STYLES, useTabLocalState } from '@cloudbeaver/core-ui';
 import { bytesToSize } from '@cloudbeaver/core-utils';
 import { EditorLoader, useCodemirrorExtensions } from '@cloudbeaver/plugin-codemirror6';
 
@@ -78,8 +78,8 @@ export const TextValuePresentation: TabContainerPanelComponent<IDataValuePanelPr
     const textValuePresentationService = useService(TextValuePresentationService);
     const style = useStyles(styles, UNDERLINE_TAB_STYLES, VALUE_PANEL_TOOLS_STYLES);
 
-    const state = useObservableRef(
-      () => ({
+    const state = useTabLocalState(() =>
+      observable({
         currentContentType: 'text/plain',
         lastContentType: 'text/plain',
 
@@ -91,19 +91,14 @@ export const TextValuePresentation: TabContainerPanelComponent<IDataValuePanelPr
           this.lastContentType = type;
         },
       }),
-      {
-        currentContentType: observable.ref,
-        lastContentType: observable.ref,
-      },
-      false,
-      ['setContentType', 'setDefaultContentType'],
     );
 
     const selection = model.source.getAction(resultIndex, ResultSetSelectAction);
     const editor = model.source.getAction(resultIndex, ResultSetEditAction);
     const content = model.source.getAction(resultIndex, ResultSetDataContentAction);
 
-    const focusCell = selection.getFocusedElement();
+    const activeElements = selection.getActiveElements();
+    const activeTabs = textValuePresentationService.tabs.getDisplayed({ dataFormat, model, resultIndex });
 
     let contentType = 'text/plain';
     let firstSelectedCell: IResultSetElementKey | undefined;
@@ -112,10 +107,10 @@ export const TextValuePresentation: TabContainerPanelComponent<IDataValuePanelPr
     let limit: string | undefined;
     let valueSize: string | undefined;
 
-    if (selection.elements.length > 0 || focusCell) {
+    if (activeElements.length > 0) {
       const format = model.source.getAction(resultIndex, ResultSetFormatAction);
 
-      firstSelectedCell = selection.elements[0] || focusCell;
+      firstSelectedCell = activeElements[0];
 
       const value = format.get(firstSelectedCell);
       readonly = format.isReadOnly(firstSelectedCell) || format.isBinary(firstSelectedCell);
@@ -135,7 +130,7 @@ export const TextValuePresentation: TabContainerPanelComponent<IDataValuePanelPr
             contentType = 'application/json';
           }
 
-          if (!textValuePresentationService.tabs.has(contentType)) {
+          if (!activeTabs.some(tab => tab.key === contentType)) {
             contentType = 'text/plain';
           }
         }
@@ -166,16 +161,29 @@ export const TextValuePresentation: TabContainerPanelComponent<IDataValuePanelPr
       }
     }
 
+    let currentContentType = state.currentContentType;
+
+    if (activeTabs.length > 0 && !activeTabs.some(tab => tab.key === currentContentType)) {
+      currentContentType = activeTabs[0].key;
+    }
+
     const canSave = !!firstSelectedCell && content.isDownloadable(firstSelectedCell);
-    const typeExtension = useMemo(() => getTypeExtension(state.currentContentType) ?? [], [state.currentContentType]);
+    const typeExtension = useMemo(() => getTypeExtension(currentContentType) ?? [], [currentContentType]);
     const extensions = useCodemirrorExtensions(undefined, typeExtension);
 
     const value = useTextValue({
       model,
       resultIndex,
-      currentContentType: state.currentContentType,
+      currentContentType,
     });
 
+    function handleTabOpen(tabId: string) {
+      // currentContentType may be selected automatically we don't want to change state in this case
+      if (tabId !== currentContentType) {
+        state.setContentType(tabId);
+      }
+    }
+
     return styled(style)(
       <container>
         <actions>
@@ -183,10 +191,10 @@ export const TextValuePresentation: TabContainerPanelComponent<IDataValuePanelPr
             dataFormat={dataFormat}
             resultIndex={resultIndex}
             container={textValuePresentationService.tabs}
-            currentTabId={state.currentContentType}
+            currentTabId={currentContentType}
             model={model}
             lazy
-            onChange={tab => state.setContentType(tab.tabId)}
+            onChange={tab => handleTabOpen(tab.tabId)}
           >
             <TabList style={[BASE_TAB_STYLES, styles, UNDERLINE_TAB_STYLES]} />
           </TabsState>
diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/isTextValuePresentationAvailable.ts b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/isTextValuePresentationAvailable.ts
index be74cb8bbf..54ab3048d1 100644
--- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/isTextValuePresentationAvailable.ts
+++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/isTextValuePresentationAvailable.ts
@@ -19,12 +19,12 @@ export function isBlobPresentationAvailable(context: IDataValuePanelProps<any, I
 
   const selection = context.model.source.getAction(context.resultIndex, ResultSetSelectAction);
 
-  const focusedElement = selection.getFocusedElement();
+  const activeElements = selection.getActiveElements();
 
-  if (selection.elements.length > 0 || focusedElement) {
+  if (activeElements.length > 0) {
     const view = context.model.source.getAction(context.resultIndex, ResultSetViewAction);
 
-    const firstSelectedCell = selection.elements[0] || focusedElement;
+    const firstSelectedCell = activeElements[0];
 
     const cellValue = view.getCellValue(firstSelectedCell);
 
diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/useTextValue.ts b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/useTextValue.ts
index a2d81fdea6..5b6a665494 100644
--- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/useTextValue.ts
+++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/TextValue/useTextValue.ts
@@ -25,8 +25,8 @@ export function useTextValue({ model, resultIndex, currentContentType }: IUseTex
   const format = model.source.getAction(resultIndex, ResultSetFormatAction);
   const editor = model.source.getAction(resultIndex, ResultSetEditAction);
   const selection = model.source.getAction(resultIndex, ResultSetSelectAction);
-  const focusCell = selection.getFocusedElement();
-  const firstSelectedCell = selection.elements?.[0] ?? focusCell;
+  const activeElements = selection.getActiveElements();
+  const firstSelectedCell = activeElements?.[0];
   const formatter = useAutoFormat();
 
   if (!isNotNullDefined(firstSelectedCell)) {
diff --git a/webapp/packages/plugin-data-viewer/src/index.ts b/webapp/packages/plugin-data-viewer/src/index.ts
index adb058ca96..cd93e62665 100644
--- a/webapp/packages/plugin-data-viewer/src/index.ts
+++ b/webapp/packages/plugin-data-viewer/src/index.ts
@@ -33,11 +33,15 @@ export * from './DatabaseDataModel/Actions/ResultSet/ResultSetSelectAction';
 export * from './DatabaseDataModel/Actions/ResultSet/ResultSetViewAction';
 export * from './DatabaseDataModel/Actions/ResultSet/ResultSetDataContentAction';
 export * from './DatabaseDataModel/Actions/DatabaseDataActionDecorator';
+export * from './DatabaseDataModel/Actions/DatabaseDataResultAction';
 export * from './DatabaseDataModel/Actions/DatabaseEditAction';
+export * from './DatabaseDataModel/Actions/DatabaseMetadataAction';
 export * from './DatabaseDataModel/Actions/DatabaseSelectAction';
 export * from './DatabaseDataModel/Actions/IDatabaseDataConstraintAction';
 export * from './DatabaseDataModel/Actions/IDatabaseDataEditAction';
 export * from './DatabaseDataModel/Actions/IDatabaseDataFormatAction';
+export * from './DatabaseDataModel/Actions/IDatabaseDataMetadataAction';
+export * from './DatabaseDataModel/Actions/IDatabaseDataResultAction';
 export * from './DatabaseDataModel/Actions/IDatabaseDataSelectAction';
 export * from './DatabaseDataModel/DatabaseDataAction';
 export * from './DatabaseDataModel/DatabaseDataActions';
diff --git a/webapp/packages/plugin-gis-viewer/src/GISValuePresentation.tsx b/webapp/packages/plugin-gis-viewer/src/GISValuePresentation.tsx
index fb9528ff4b..f2c9a2fd64 100644
--- a/webapp/packages/plugin-gis-viewer/src/GISValuePresentation.tsx
+++ b/webapp/packages/plugin-gis-viewer/src/GISValuePresentation.tsx
@@ -70,38 +70,29 @@ export const GISValuePresentation = observer<Props>(function GISValuePresentatio
   const gis = model.source.getAction(resultIndex, ResultSetGISAction);
   const view = model.source.getAction(resultIndex, ResultSetViewAction);
 
-  const focusedCell = selection.getFocusedElement();
-  const selectedCells = selection.elements.slice();
+  const activeElements = selection.getActiveElements();
 
-  if (selectedCells.length === 0 && focusedCell) {
-    selectedCells.push(focusedCell);
-  }
+  const parsedGISData: IGeoJSONFeature[] = [];
 
-  const parsedGISData = useMemo(() => {
-    const result: IGeoJSONFeature[] = [];
+  for (const cell of activeElements) {
+    const cellValue = gis.getCellValue(cell);
 
-    for (const cell of selectedCells) {
-      const cellValue = gis.getCellValue(cell);
+    if (!cellValue) {
+      continue;
+    }
 
-      if (!cellValue) {
+    try {
+      const parsedCellValue = wellknown.parse(cellValue.mapText || cellValue.text);
+      if (!parsedCellValue) {
         continue;
       }
 
-      try {
-        const parsedCellValue = wellknown.parse(cellValue.mapText || cellValue.text);
-        if (!parsedCellValue) {
-          continue;
-        }
-
-        result.push({ type: 'Feature', geometry: parsedCellValue, properties: { associatedCell: cell, srid: cellValue.srid } });
-      } catch (exception: any) {
-        console.error(`Failed to parse "${cellValue.mapText || cellValue.text}" value.`);
-        console.error(exception);
-      }
+      parsedGISData.push({ type: 'Feature', geometry: parsedCellValue, properties: { associatedCell: cell, srid: cellValue.srid } });
+    } catch (exception: any) {
+      console.error(`Failed to parse "${cellValue.mapText || cellValue.text}" value.`);
+      console.error(exception);
     }
-
-    return result;
-  }, [selectedCells, gis]);
+  }
 
   const getAssociatedValues = useCallback(
     (cell: IResultSetElementKey): IAssociatedValue[] => {
diff --git a/webapp/packages/plugin-gis-viewer/src/GISViewerBootstrap.ts b/webapp/packages/plugin-gis-viewer/src/GISViewerBootstrap.ts
index f67bdf60d2..2913742e48 100644
--- a/webapp/packages/plugin-gis-viewer/src/GISViewerBootstrap.ts
+++ b/webapp/packages/plugin-gis-viewer/src/GISViewerBootstrap.ts
@@ -40,15 +40,12 @@ export class GISViewerBootstrap extends Bootstrap {
         const selection = context.model.source.getAction(context.resultIndex, ResultSetSelectAction);
         const gis = context.model.source.getAction(context.resultIndex, ResultSetGISAction);
 
-        const focusedElement = selection.getFocusedElement();
+        const activeElements = selection.getActiveElements();
 
-        if (selection.elements.length === 0) {
-          if (!focusedElement) {
-            return true;
-          }
-          return !gis.isGISFormat(focusedElement);
+        if (activeElements.length === 0) {
+          return true;
         } else {
-          return !gis.isGISFormat(selection.elements[0]);
+          return !gis.isGISFormat(activeElements[0]);
         }
       },
     });

From 55cc82c004645a957783e2ab11b41a79537b4374 Mon Sep 17 00:00:00 2001
From: Aleksei Potsetsuev <wrouds@gmail.com>
Date: Thu, 4 Jan 2024 20:28:18 +0800
Subject: [PATCH 2/2] CB-4401 fix: pr review

---
 .../src/TableViewer/ValuePanel/ValuePanel.tsx                 | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel/ValuePanel.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel/ValuePanel.tsx
index 8c2444b443..3704b7b555 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel/ValuePanel.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/ValuePanel/ValuePanel.tsx
@@ -78,7 +78,9 @@ export const ValuePanel: DataPresentationComponent<any, IDatabaseResultSet> = ob
   const displayed = service.getDisplayed({ dataFormat, model, resultIndex });
   let currentTabId = state.currentTabId;
 
-  if (displayed.length > 0 && (!currentTabId || !displayed.some(tab => tab.key === currentTabId))) {
+  const hasCurrentTabCells = currentTabId && displayed.some(tab => tab.key === currentTabId);
+
+  if (displayed.length > 0 && !hasCurrentTabCells) {
     currentTabId = displayed[0].key;
   }