diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DataVizBox.tsx | 14 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/TableBox.tsx | 56 |
3 files changed, 36 insertions, 36 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 4d5f15a3e..df6e74d85 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -50,7 +50,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { sidebarAddDoc: ((doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean) | undefined; crop: ((region: Doc | undefined, addCrop?: boolean) => Doc | undefined) | undefined; @observable _marqueeing: number[] | undefined = undefined; - @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); + @observable _savedAnnotations = new ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>(); constructor(props: FieldViewProps) { super(props); @@ -150,7 +150,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const visibleAnchor = AnchorMenu.Instance.GetAnchor?.(undefined, addAsAnnotation); const anchor = !pinProps ? this.Document - : this._vizRenderer?.getAnchor(pinProps) ?? + : (this._vizRenderer?.getAnchor(pinProps) ?? visibleAnchor ?? Docs.Create.ConfigDocument({ title: 'ImgAnchor:' + this.Document.title, @@ -161,7 +161,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { // when we clear selection -> we should have it so chartBox getAnchor returns undefined // this is for when we want the whole doc (so when the chartBox getAnchor returns without a marker) /* put in some options */ - }); + })); anchor.config_dataViz = this.dataVizView; anchor.config_dataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined; anchor.dataViz_selectedRows = Field.Copy(this.layoutDoc.dataViz_selectedRows); @@ -376,8 +376,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this._props.select(false); MarqueeAnnotator.clearAnnotations(this._savedAnnotations); this._marqueeing = [e.clientX, e.clientY]; - const target = e.target as any; - if (e.target && (target.className.includes('endOfContent') || (target.parentElement.className !== 'textLayer' && target.parentElement.parentElement?.className !== 'textLayer'))) { + const target = e.target as HTMLElement; + if (e.target && (target.className.includes('endOfContent') || (target.parentElement?.className !== 'textLayer' && target.parentElement?.parentElement?.className !== 'textLayer'))) { /* empty */ } else { // if textLayer is hit, then we select text instead of using a marquee so clear out the marquee. @@ -429,7 +429,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { specificContextMenu = (): void => { const cm = ContextMenu.Instance; const options = cm.findByDescription('Options...'); - const optionItems = options && 'subitems' in options ? options.subitems : []; + const optionItems = options?.subitems ?? []; optionItems.push({ description: `Analyze with AI`, event: () => this.askGPT(), icon: 'lightbulb' }); !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' }); }; @@ -450,7 +450,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { * it appears to the right of this document, with the * parameters passed in being used to create an initial display */ - createFilteredDoc = (axes?: any) => { + createFilteredDoc = (axes?: string[]) => { const embedding = Doc.MakeEmbedding(this.Document!); embedding._layout_showSidebar = false; embedding._dataViz = DataVizView.LINECHART; diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx index 60bc8df18..a6a6a6b46 100644 --- a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx +++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/label-has-associated-control */ -/* eslint-disable jsx-a11y/alt-text */ import { IconButton } from 'browndash-components'; import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index d2e82284e..7179356b2 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-noninteractive-tabindex */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ import { Button, Type } from 'browndash-components'; import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -24,7 +22,7 @@ const { DATA_VIZ_TABLE_ROW_HEIGHT } = require('../../../global/globalCssVariable interface TableBoxProps { Document: Doc; layoutDoc: Doc; - records: { [key: string]: any }[]; + records: { [key: string]: unknown }[]; selectAxes: (axes: string[]) => void; selectTitleCol: (titleCol: string) => void; axes: string[]; @@ -48,14 +46,14 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { @observable settingTitle: boolean = false; // true when setting a title column @observable hasRowsToFilter: boolean = false; // true when any rows are selected @observable filtering: boolean = false; // true when the filtering menu is open - @observable filteringColumn: any = ''; // column to filter + @observable filteringColumn = ''; // column to filter @observable filteringType: string = 'Value'; // "Value" or "Range" - filteringVal: any[] = ['', '']; // value or range to filter the column with + filteringVal = ['', '']; // value or range to filter the column with @observable _scrollTop = -1; @observable _tableHeight = 0; @observable _tableContainerHeight = 0; - constructor(props: any) { + constructor(props: TableBoxProps) { super(props); makeObservable(this); } @@ -141,17 +139,21 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { e, moveEv => { // dragging off a column to create a brushed DataVizBox - const sourceAnchorCreator = () => this._props.docView?.()!.Document!; + const sourceAnchorCreator = () => this._props.docView?.()?.Document || this._props.Document; const targetCreator = (annotationOn: Doc | undefined) => { - const embedding = Doc.MakeEmbedding(this._props.docView?.()!.Document!); - embedding._dataViz = DataVizView.TABLE; - embedding._dataViz_axes = new List<string>([col]); - embedding._dataViz_parentViz = this._props.Document; - embedding.annotationOn = annotationOn; - embedding.histogramBarColors = Field.Copy(this._props.layoutDoc.histogramBarColors); - embedding.defaultHistogramColor = this._props.layoutDoc.defaultHistogramColor; - embedding.pieSliceColors = Field.Copy(this._props.layoutDoc.pieSliceColors); - return embedding; + const doc = this._props.docView?.()?.Document; + if (doc) { + const embedding = Doc.MakeEmbedding(doc); + embedding._dataViz = DataVizView.TABLE; + embedding._dataViz_axes = new List<string>([col]); + embedding._dataViz_parentViz = this._props.Document; + embedding.annotationOn = annotationOn; + embedding.histogramBarColors = Field.Copy(this._props.layoutDoc.histogramBarColors); + embedding.defaultHistogramColor = this._props.layoutDoc.defaultHistogramColor; + embedding.pieSliceColors = Field.Copy(this._props.layoutDoc.pieSliceColors); + return embedding; + } + return this._props.Document; }; if (this._props.docView?.() && !ClientUtils.isClick(moveEv.clientX, moveEv.clientY, downX, downY, Date.now())) { DragManager.StartAnchorAnnoDrag(moveEv.target instanceof HTMLElement ? [moveEv.target] : [], new DragManager.AnchorAnnoDragData(this._props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, { @@ -188,9 +190,9 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { /** * These functions handle the filtering popup for when the "filter" button is pressed to select rows */ - filter = undoable((e: any) => { - let start: any; - let end: any; + filter = undoable((e: React.MouseEvent) => { + let start: string | number; + let end: string | number; if (this.filteringType === 'Range') { start = Number.isNaN(Number(this.filteringVal[0])) ? this.filteringVal[0] : Number(this.filteringVal[0]); end = Number.isNaN(Number(this.filteringVal[1])) ? this.filteringVal[1] : Number(this.filteringVal[1]); @@ -204,8 +206,8 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { } } } else { - let compare = this._props.records[rowID][this.filteringColumn]; - if (compare as Number) compare = Number(compare); + let compare = this._props.records[rowID][this.filteringColumn] as string | number; + if (Number(compare) == compare) compare = Number(compare); if (start <= compare && compare <= end) { if (!NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowID)) { this.tableRowClick(e, rowID); @@ -218,11 +220,11 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { this.filteringVal = ['', '']; }, 'filter table'); @action - setFilterColumn = (e: any) => { + setFilterColumn = (e: React.ChangeEvent<HTMLSelectElement>) => { this.filteringColumn = e.currentTarget.value; }; @action - setFilterType = (e: any) => { + setFilterType = (e: React.ChangeEvent<HTMLSelectElement>) => { this.filteringType = e.currentTarget.value; }; changeFilterValue = action((e: React.ChangeEvent<HTMLInputElement>) => { @@ -240,7 +242,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { <div className="tableBox-filterPopup" style={{ right: this._props.width * 0.05 }}> <div className="tableBox-filterPopup-selectColumn"> Column: - <select className="tableBox-filterPopup-selectColumn-each" value={this.filteringColumn !== '' ? this.filteringColumn : this.columns[0]} onChange={e => this.setFilterColumn(e)}> + <select className="tableBox-filterPopup-selectColumn-each" value={this.filteringColumn !== '' ? this.filteringColumn : this.columns[0]} onChange={this.setFilterColumn}> {this.columns.map(column => ( <option className="" key={column} value={column}> {' '} @@ -250,7 +252,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { </select> </div> <div className="tableBox-filterPopup-setValue"> - <select className="tableBox-filterPopup-setValue-each" value={this.filteringType} onChange={e => this.setFilterType(e)}> + <select className="tableBox-filterPopup-setValue-each" value={this.filteringType} onChange={this.setFilterType}> <option className="" key="Value" value="Value"> {' '} {'Value'}{' '} @@ -307,7 +309,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { )} </div> <div className="tableBox-filterPopup-setFilter"> - <Button onClick={action(e => this.filter(e))} text="Set Filter" type={Type.SEC} color="black" /> + <Button onClick={this.filter} text="Set Filter" type={Type.SEC} color="black" /> </div> </div> ); @@ -451,7 +453,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> { if (this._props.titleCol === col) colSelected = true; return ( <td key={this.columns.indexOf(col)} style={{ border: colSelected ? '3px solid black' : '1px solid black', fontWeight: colSelected ? 'bolder' : 'normal' }}> - <div className="tableBox-cell">{this._props.records[rowId][col]}</div> + <div className="tableBox-cell">{this._props.records[rowId][col] as string | number}</div> </td> ); })} |