cell data autodetect format, collapsed views in detail

packages/datalib/src/GridDisplay.ts

@@ -76,6 +76,10 @@ export abstract class GridDisplay {
     }));
   }
 
+  get hasReferences() {
+    return false;
+  }
+
   get focusedColumn() {
     return this.config.focusedColumn;
   }

packages/datalib/src/TableGridDisplay.ts

@@ -218,4 +218,11 @@ export class TableGridDisplay extends GridDisplay {
       }
     }
   }
+
+  get hasReferences() {
+    if (!this.table) return false;
+    if (this.table.foreignKeys && this.table.foreignKeys.length > 0) return true;
+    if (this.table.dependencies && this.table.dependencies.length > 0) return true;
+    return false;
+  }
 }

packages/web/src/celldata/CellDataView.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import _ from 'lodash';
 import { SelectField } from '../utility/inputs';
 import ErrorInfo from '../widgets/ErrorInfo';
 import styled from 'styled-components';
@@ -43,24 +44,36 @@ const formats = [
   },
 ];
 
+function autodetect(selection, grider, value) {
+  if (_.isString(value)) {
+    if (value.startsWith('[') || value.startsWith('{')) return 'json';
+  }
+  return 'textWrap';
+}
+
 export default function CellDataView({ selection, grider }) {
-  const [selectedFormat, setSelectedFormat] = React.useState(formats[0]);
+  const [selectedFormatType, setSelectedFormatType] = React.useState('autodetect');
   let value = null;
   if (grider && selection.length == 1) {
     const rowData = grider.getRowData(selection[0].row);
     const { column } = selection[0];
     if (rowData) value = rowData[column];
   }
-  const { Component } = selectedFormat || {};
+  const autodetectFormatType = React.useMemo(() => autodetect(selection, grider, value), [selection, grider, value]);
+  const autodetectFormat = formats.find((x) => x.type == autodetectFormatType);
+
+  const usedFormatType = selectedFormatType == 'autodetect' ? autodetectFormatType : selectedFormatType;
+  const usedFormat = formats.find((x) => x.type == usedFormatType);
+
+  const { Component } = usedFormat || {};
 
   return (
     <MainWrapper>
       <Toolbar>
         Format:
-        <SelectField
+        <SelectField value={selectedFormatType} onChange={(e) => setSelectedFormatType(e.target.value)}>
-          value={selectedFormat && selectedFormat.type}
+          <option value="autodetect">Autodetect - {autodetectFormat.title}</option>
-          onChange={(e) => setSelectedFormat(formats.find((x) => x.type == e.target.value))}
+
-        >
           {formats.map((fmt) => (
             <option value={fmt.type} key={fmt.type}>
               {fmt.title}
@@ -70,7 +83,7 @@ export default function CellDataView({ selection, grider }) {
       </Toolbar>
 
       <DataWrapper>
-        {selectedFormat == null || (selectedFormat.single && value == null) ? (
+        {usedFormat == null || (usedFormat.single && value == null) ? (
           <ErrorInfo message="Must be selected one cell" />
         ) : (
           <Component value={value} grider={grider} selection={selection} />

packages/web/src/datagrid/DataGrid.js

@@ -6,6 +6,7 @@ import ReferenceManager from './ReferenceManager';
 import { HorizontalSplitter } from '../widgets/Splitter';
 import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
 import CellDataView from '../celldata/CellDataView';
+import { FreeTableGridDisplay } from '@dbgate/datalib';
 
 const LeftContainer = styled.div`
   background-color: white;
@@ -30,12 +31,12 @@ export default function DataGrid(props) {
           <WidgetColumnBarItem title="Columns" name="columns" height="50%">
             <ColumnManager {...props} managerSize={managerSize} />
           </WidgetColumnBarItem>
-          {props.showReferences && (
+          {props.showReferences && props.display.hasReferences && (
-            <WidgetColumnBarItem title="References" name="references" height="30%">
+            <WidgetColumnBarItem title="References" name="references" height="30%" collapsed={props.isDetailView}>
               <ReferenceManager {...props} managerSize={managerSize} />
             </WidgetColumnBarItem>
           )}
-          <WidgetColumnBarItem title="Cell data" name="cellData">
+          <WidgetColumnBarItem title="Cell data" name="cellData" collapsed={props.isDetailView}>
             <CellDataView selection={selection} grider={grider} />
           </WidgetColumnBarItem>
         </WidgetColumnBar>

packages/web/src/datagrid/TableDataGrid.js

@@ -42,6 +42,7 @@ export default function TableDataGrid({
   cache = undefined,
   setCache = undefined,
   masterLoadedTime = undefined,
+  isDetailView = false,
 }) {
   // const [childConfig, setChildConfig] = React.useState(createGridConfig());
   const [myCache, setMyCache] = React.useState(createGridCache());
@@ -164,6 +165,7 @@ export default function TableDataGrid({
         refReloadToken={refReloadToken.toString()}
         masterLoadedTime={masterLoadedTime}
         GridCore={SqlDataGridCore}
+        isDetailView={isDetailView}
       />
       {reference && (
         <ReferenceContainer>
@@ -184,6 +186,7 @@ export default function TableDataGrid({
               cache={childCache}
               setCache={setChildCache}
               masterLoadedTime={myLoadedTime}
+              isDetailView
             />
           </ReferenceGridWrapper>
         </ReferenceContainer>