cleaned up css and cursor pointer for tableboxes. prevent links being drawn to keyvaluebox.

5 files changed, 37 insertions, 23 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
index 15b6e1d37..c1c01eacb 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -6,7 +6,6 @@ import { RefField } from '../../../../fields/RefField';
 import { listSpec } from '../../../../fields/Schema';
 import { Cast, NumCast, StrCast } from '../../../../fields/Types';
 import { aggregateBounds } from '../../../../Utils';
-import { ColorScheme } from '../../../util/SettingsManager';
 import React = require('react');
 
 export interface ViewDefBounds {
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index a6ce0b88c..c788a64c2 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -92,21 +92,33 @@
 .tableBox {
     display: flex;
     flex-direction: column;
+    cursor: default;
     height: calc(100% - 40px); // bcz: hack 40px is the size of the button rows
-    .table {
-        height: 100%;
-    }
-}
-.table-container {
-    overflow: scroll;
-    margin: 5px;
-    margin-left: 25px;
-    margin-right: 10px;
-    margin-bottom: 0;
-    tr td {
-        height: $DATA_VIZ_TABLE_ROW_HEIGHT !important; // bcz: hack.  you can't set a <tr> height directly, but you can set the height of all of it's <td>s.  So this is the height of a tableBox row.
-        padding: 0 !important;
-        vertical-align: middle !important;
+    .tableBox-container {
+        overflow: scroll;
+        margin: 5px;
+        margin-left: 25px;
+        margin-right: 10px;
+        margin-bottom: 0;
+        .tableBox-table {
+            height: 100%;
+            width: 100%;
+            .tableBox-row {
+                cursor: pointer;
+                .tableBox-cell {
+                    text-overflow: ellipsis;
+                    width: 100%;
+                    white-space: pre;
+                    max-width: 150;
+                    overflow: hidden;
+                }
+            }
+        }
+        tr td {
+            height: $DATA_VIZ_TABLE_ROW_HEIGHT !important; // bcz: hack.  you can't set a <tr> height directly, but you can set the height of all of it's <td>s.  So this is the height of a tableBox row.
+            padding: 0 !important;
+            vertical-align: middle !important;
+        }
     }
 }
 .selectAll-buttons {
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 1ece3f238..b88389de6 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -175,7 +175,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                         <Button onClick={action(() => (this.props.layoutDoc.dataViz_selectedRows = new List<number>()))} text="Deselect All" type={Type.SEC} color={'black'} />
                     </div>
                     <div
-                        className={`table-container ${this.columns[0]}`}
+                        className={`tableBox-container ${this.columns[0]}`}
                         style={{ height: '100%', overflow: 'auto' }}
                         onScroll={this.handleScroll}
                         ref={action((r: HTMLDivElement | null) => {
@@ -193,7 +193,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                             }
                         })}>
                         <table
-                            className="table"
+                            className="tableBox-table"
                             ref={action((r: HTMLTableElement | null) => {
                                 if (!this.props.docView?.()?.ContentDiv?.hidden && r) {
                                     this._tableHeight = r?.getBoundingClientRect().height ?? 0;
@@ -220,21 +220,19 @@ export class TableBox extends React.Component<TableBoxProps> {
                             <tbody>
                                 {this._tableDataIds
                                     .filter(rowId => this.startID <= rowId && rowId <= this.endID)
-                                    ?.map(rowId => ({ record: this.props.records[rowId], rowId }))
-                                    .map(({ record, rowId }) => (
+                                    ?.map(rowId => (
                                         <tr
                                             key={rowId}
-                                            className={`table-row ${this.columns[0]}`}
+                                            className={`tableBox-row ${this.columns[0]}`}
                                             onClick={e => this.tableRowClick(e, rowId)}
                                             style={{
                                                 background: NumListCast(this.props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this.props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '',
-                                                width: '110%',
                                             }}>
                                             {this.columns.map(col => {
                                                 const colSelected = this.props.axes.length > 1 ? this.props.axes[0] == col || this.props.axes[1] == col : this.props.axes.length > 0 ? this.props.axes[0] == col : false;
                                                 return (
                                                     <td key={this.columns.indexOf(col)} style={{ border: colSelected ? '3px solid black' : '1px solid black', fontWeight: colSelected ? 'bolder' : 'normal' }}>
-                                                        <div style={{ textOverflow: 'ellipsis', width: '100%', whiteSpace: 'pre', maxWidth: 150, overflow: 'hidden' }}>{record[col]}</div>
+                                                        <div className="tableBox-cell">{this.props.records[rowId][col]}</div>
                                                     </td>
                                                 );
                                             })}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 96d3adff5..da665a502 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -52,6 +52,7 @@ import { LinkAnchorBox } from './LinkAnchorBox';
 import { PresEffect, PresEffectDirection } from './trails';
 import { PinProps, PresBox } from './trails/PresBox';
 import React = require('react');
+import { KeyValueBox } from './KeyValueBox';
 const { Howl } = require('howler');
 
 interface Window {
@@ -963,7 +964,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     @computed get allLinkEndpoints() {
         // the small blue dots that mark the endpoints of links
         TraceMobx();
-        if (this.props.hideLinkAnchors || this.layoutDoc.layout_hideLinkAnchors || this.props.dontRegisterView || this.layoutDoc.layout_unrendered) return null;
+        if (this._componentView instanceof KeyValueBox || this.props.hideLinkAnchors || this.layoutDoc.layout_hideLinkAnchors || this.props.dontRegisterView || this.layoutDoc.layout_unrendered) return null;
         const filtered = DocUtils.FilterDocs(this.directLinks, this.props.childFilters?.() ?? [], []).filter(d => d.link_displayLine || Doc.UserDoc().showLinkLines);
         return filtered.map(link => (
             <div className="documentView-anchorCont" key={link[Id]}>
diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx
index 9bcd04cf5..fd7d13655 100644
--- a/src/client/views/nodes/LinkAnchorBox.tsx
+++ b/src/client/views/nodes/LinkAnchorBox.tsx
@@ -28,6 +28,10 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @observable _x = 0;
     @observable _y = 0;
 
+    componentDidMount() {
+        this.props.setContentView?.(this);
+    }
+
     @computed get linkSource() {
         return this.props.docViewPath()[this.props.docViewPath().length - 2].rootDoc; // this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.LinkSource);
     }