From 710cb3aa93ea30799479ca7c79444f05aeab2209 Mon Sep 17 00:00:00 2001 From: srichman333 Date: Mon, 31 Jul 2023 18:49:44 -0400 Subject: TableBox editable headers start --- .../nodes/DataVizBox/components/Histogram.tsx | 23 ++--- .../views/nodes/DataVizBox/components/PieChart.tsx | 24 ++--- .../views/nodes/DataVizBox/components/TableBox.tsx | 108 ++++++++++++++++++++- 3 files changed, 125 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index 6d0a8bf75..64e61fca8 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -443,21 +443,8 @@ export class Histogram extends React.Component { this.defaultBarColor = color; }; - @computed get editableTitle() { - const title = this.graphTitle; - return ( - this.graphTitle = val as string)} - color={"black"} - size={Size.LARGE} - fillWidth - /> - ); - } - render() { - + const title = this.graphTitle; var selected: string; if (this._currSelected){ selected = '{ '; @@ -472,7 +459,13 @@ export class Histogram extends React.Component { this.props.axes.length >= 1 ? (
- {this.editableTitle} + this.graphTitle = val as string)} + color={"black"} + size={Size.LARGE} + fillWidth + />     { this.sliceColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\ this.graphTitle = val as string)} - color={"black"} - size={Size.LARGE} - fillWidth - /> - ); - } - render() { + const title = this.graphTitle; var selected: string; if (this._currSelected){ selected = '{ '; @@ -409,7 +397,15 @@ export class PieChart extends React.Component { return ( this.props.axes.length >= 1 ? (
-
{this.editableTitle}
+
+ this.graphTitle = val as string)} + color={"black"} + size={Size.LARGE} + fillWidth + /> +
{selected != 'none' ?
Selected: {selected} diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index 500e7b639..aaedba202 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -1,4 +1,4 @@ -import { action, computed } from 'mobx'; +import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc } from '../../../../../fields/Doc'; @@ -10,6 +10,7 @@ import { DocumentView } from '../../DocumentView'; import { DataVizView } from '../DataVizBox'; import { LinkManager } from '../../../../util/LinkManager'; import { DocCast } from '../../../../../fields/Types'; +import { EditableText, Size, Type } from 'browndash-components'; interface TableBoxProps { rootDoc: Doc; @@ -21,6 +22,8 @@ interface TableBoxProps { @observer export class TableBox extends React.Component { + @observable editableHeaders = this.columns; + @observable editableCells = this._tableData; @computed get _tableData() { if (this.incomingLinks.length! <= 0) return this.props.pairs; @@ -39,6 +42,106 @@ export class TableBox extends React.Component { return this._tableData.length ? Array.from(Object.keys(this._tableData[0])) : []; } + // render() { + // return ( + //
+ // + // + // + // {this.editableHeaders + // .filter(col => !col.startsWith('select')) + // .map(col => { + // const header = React.createRef(); + // const displayColName = col; + // return ( + // + // ); + // })} + // + // + // + // {this._tableData?.map((p, i) => { + // return ( + // (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]]))}> + // {this.editableHeaders.map(col => ( + // + // ))} + // + // ); + // })} + // + //
{ + // const downX = e.clientX; + // const downY = e.clientY; + // setupMoveUpEvents( + // {}, + // e, + // e => { + // const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!; + // const targetCreator = (annotationOn: Doc | undefined) => { + // const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!); + // embedding._dataVizView = DataVizView.LINECHART; + // embedding._data_vizAxes = new List([col, col]); + // embedding._draggedFrom = this.props.docView?.()!.rootDoc!; + // embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!; + // return embedding; + // }; + // if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) { + // DragManager.StartAnchorAnnoDrag([header.current!], 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[0] = col; + // } + // this.props.selectAxes(newAxes); + // }) + // ); + // }}> + // { + // this.editableHeaders[this.editableHeaders.indexOf(col)] = val as string + // this.props.pairs.map(pair => { + // pair[val as string] = pair[col]; + // delete pair[col] + // }) + // })} + // color={"black"} + // size={Size.LARGE} + // /> + //
+ // {p[col]} + //
+ //
+ // ); + // } + + render() { return (
@@ -125,4 +228,7 @@ export class TableBox extends React.Component {
); } + + + } -- cgit v1.2.3-70-g09d2