header fix + more consistent bar height

1 files changed, 72 insertions, 72 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 07d151702..556a8b281 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -71,8 +71,6 @@ export class TableBox extends React.Component<TableBoxProps> {
     };
 
     @action handleScroll = () => {
-        console.log("scroll")
-        // console.log("before", this.startID, this.endID)
         var container = document.getElementsByClassName("table-container"); 
         var eachCell = document.getElementsByClassName("table-row");
         if (eachCell.length==0 || container.length==0) return;
@@ -109,17 +107,16 @@ export class TableBox extends React.Component<TableBoxProps> {
             
             // bottom
             else if (useContainer.scrollHeight - 50  <= useContainer.scrollTop + useContainer.getBoundingClientRect().height && this.endID<=this._tableDataIds.length){
-                this.startID += .1;
-                this.endID += .1;
+                this.startID += .01;
+                this.endID += .01;
             }
 
             // regular scroll
             else {
-            let newStart = (useContainer.scrollTop / useCell.getBoundingClientRect().height ) - 1;
-            newStart = Math.floor(Number(newStart))
-            if (newStart<this.startID && this.startID>=-1){ this.startID -= .1; this.endID -= -.1; }
-            if (newStart>this.startID) { this.startID += .1; this.endID += .1; }
-            
+                let newStart = (useContainer.scrollTop / useCell.getBoundingClientRect().height ) - 1;
+                newStart = Math.floor(Number(newStart))
+                if (newStart<this.startID && this.startID>=-1){ this.startID -= .01; this.endID -= -.01; }
+                else if (newStart>this.startID) { this.startID += .01; this.endID += .01; }
             }
         }
         else {
@@ -161,69 +158,72 @@ export class TableBox extends React.Component<TableBoxProps> {
                         <table className="table">
                             <thead>
                                 <tr >
-                                    {this.columns.map(col => (
-                                        <th
-                                            key={this.columns.indexOf(col)}
-                                            style={{
-                                                color: this.props.axes.slice().reverse().lastElement() === col ? 'darkgreen' : this.props.axes.lastElement() === col ? 'darkred' : undefined,
-                                                background: this.props.axes.slice().reverse().lastElement() === col ? '#E3fbdb' : this.props.axes.lastElement() === col ? '#Fbdbdb' : undefined,
-                                                fontWeight: 'bolder',
-                                                border: '3px solid black',
-                                            }}
-                                            onPointerDown={e => {
-                                                const downX = e.clientX;
-                                                const downY = e.clientY;
-                                                setupMoveUpEvents(
-                                                    {},
-                                                    e,
-                                                    e => {
-                                                        // dragging off a column to create a brushed DataVizBox
-                                                        const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!;
-                                                        const targetCreator = (annotationOn: Doc | undefined) => {
-                                                            const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!);
-                                                            embedding._dataViz = DataVizView.TABLE;
-                                                            embedding._dataViz_axes = new List<string>([col, col]);
-                                                            embedding._dataViz_parentViz = this.props.rootDoc;
-                                                            embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!;
-                                                            embedding.histogramBarColors = Field.Copy(this.props.layoutDoc.histogramBarColors);
-                                                            embedding.defaultHistogramColor = this.props.layoutDoc.defaultHistogramColor;
-                                                            embedding.pieSliceColors = Field.Copy(this.props.layoutDoc.pieSliceColors);
-                                                            return embedding;
-                                                        };
-                                                        if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {
-                                                            DragManager.StartAnchorAnnoDrag(
-                                                                e.target instanceof HTMLElement ? [e.target] : [],
-                                                                new DragManager.AnchorAnnoDragData(this.props.docView()!, sourceAnchorCreator, targetCreator),
-                                                                downX,
-                                                                downY,
-                                                                {
-                                                                    dragComplete: e => {
-                                                                        if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) {
-                                                                            e.linkDocument.link_displayLine = true;
-                                                                            e.linkDocument.link_matchEmbeddings = true;
-                                                                            // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc;
-                                                                            // e.annoDragData.linkSourceDoc.followLinkZoom = false;
-                                                                        }
-                                                                    },
-                                                                }
-                                                            );
-                                                            return true;
-                                                        }
-                                                        return false;
-                                                    },
-                                                    emptyFunction,
-                                                    action(e => {
-                                                        const newAxes = this.props.axes;
-                                                        if (newAxes.includes(col)) newAxes.splice(newAxes.indexOf(col), 1);
-                                                        else if (newAxes.length > 1) newAxes[1] = col;
-                                                        else newAxes.push(col);
-                                                        this.props.selectAxes(newAxes);
-                                                    })
-                                                );
-                                            }}>
-                                            {col}
-                                        </th>
-                                    ))}
+                                    {this.columns.map(col => {
+                                        if (this.startID>0) return;
+                                        return (
+                                            <th
+                                                key={this.columns.indexOf(col)}
+                                                style={{
+                                                    color: this.props.axes.slice().reverse().lastElement() === col ? 'darkgreen' : this.props.axes.lastElement() === col ? 'darkred' : undefined,
+                                                    background: this.props.axes.slice().reverse().lastElement() === col ? '#E3fbdb' : this.props.axes.lastElement() === col ? '#Fbdbdb' : undefined,
+                                                    fontWeight: 'bolder',
+                                                    border: '3px solid black',
+                                                }}
+                                                onPointerDown={e => {
+                                                    const downX = e.clientX;
+                                                    const downY = e.clientY;
+                                                    setupMoveUpEvents(
+                                                        {},
+                                                        e,
+                                                        e => {
+                                                            // dragging off a column to create a brushed DataVizBox
+                                                            const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!;
+                                                            const targetCreator = (annotationOn: Doc | undefined) => {
+                                                                const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!);
+                                                                embedding._dataViz = DataVizView.TABLE;
+                                                                embedding._dataViz_axes = new List<string>([col, col]);
+                                                                embedding._dataViz_parentViz = this.props.rootDoc;
+                                                                embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!;
+                                                                embedding.histogramBarColors = Field.Copy(this.props.layoutDoc.histogramBarColors);
+                                                                embedding.defaultHistogramColor = this.props.layoutDoc.defaultHistogramColor;
+                                                                embedding.pieSliceColors = Field.Copy(this.props.layoutDoc.pieSliceColors);
+                                                                return embedding;
+                                                            };
+                                                            if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {
+                                                                DragManager.StartAnchorAnnoDrag(
+                                                                    e.target instanceof HTMLElement ? [e.target] : [],
+                                                                    new DragManager.AnchorAnnoDragData(this.props.docView()!, sourceAnchorCreator, targetCreator),
+                                                                    downX,
+                                                                    downY,
+                                                                    {
+                                                                        dragComplete: e => {
+                                                                            if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) {
+                                                                                e.linkDocument.link_displayLine = true;
+                                                                                e.linkDocument.link_matchEmbeddings = true;
+                                                                                // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc;
+                                                                                // e.annoDragData.linkSourceDoc.followLinkZoom = false;
+                                                                            }
+                                                                        },
+                                                                    }
+                                                                );
+                                                                return true;
+                                                            }
+                                                            return false;
+                                                        },
+                                                        emptyFunction,
+                                                        action(e => {
+                                                            const newAxes = this.props.axes;
+                                                            if (newAxes.includes(col)) newAxes.splice(newAxes.indexOf(col), 1);
+                                                            else if (newAxes.length > 1) newAxes[1] = col;
+                                                            else newAxes.push(col);
+                                                            this.props.selectAxes(newAxes);
+                                                        })
+                                                    );
+                                                }}>
+                                                {col}
+                                            </th>
+                                        )}
+                                    )}
                                 </tr>
                             </thead>
                             <tbody>