aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2023-05-14 12:06:31 -0400
committerbobzel <zzzman@gmail.com>2023-05-14 12:06:31 -0400
commitcfd353baf7356024dc88c61289755dd6699ae9fd (patch)
tree971b25f07ff19cde5b3f40dc440e6dfa02944e18 /src/client/views/nodes/DataVizBox
parent24f9e3ddefb1853cce3f3c51dfbe6183d88bce78 (diff)
parent42afc0250de658fc3e924864bfae5afb4edec335 (diff)
Merge branch 'master' into UI_Update_Eric_Ma
Diffstat (limited to 'src/client/views/nodes/DataVizBox')
-rw-r--r--src/client/views/nodes/DataVizBox/DataVizBox.tsx18
-rw-r--r--src/client/views/nodes/DataVizBox/components/LineChart.tsx14
-rw-r--r--src/client/views/nodes/DataVizBox/components/TableBox.tsx12
3 files changed, 22 insertions, 22 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index eb25d3264..5876efb01 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, StrListCast } from '../../../../fields/Doc';
import { List } from '../../../../fields/List';
-import { Cast, NumCast, StrCast } from '../../../../fields/Types';
+import { Cast, CsvCast, NumCast, StrCast } from '../../../../fields/Types';
import { CsvField } from '../../../../fields/URLField';
import { Docs } from '../../../documents/Documents';
import { ViewBoxAnnotatableComponent } from '../../DocComponent';
@@ -29,7 +29,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
// @observable private pairs: { [key: string]: FieldResult }[] = [];
static pairSet = new ObservableMap<string, { [key: string]: string }[]>();
@computed.struct get pairs() {
- return DataVizBox.pairSet.get(StrCast(this.rootDoc.fileUpload));
+ return DataVizBox.pairSet.get(CsvCast(this.rootDoc[this.fieldKey]).url.href);
}
private _chartRenderer: LineChart | undefined;
// // another way would be store a schema that defines the type of data we are expecting from an imported doc
@@ -61,7 +61,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@action
restoreView = (data: Doc) => {
const changedView = this.dataVizView !== data.presDataVizView && (this.layoutDoc._dataVizView = data.presDataVizView);
- const changedAxes = this.axes.join('') !== StrListCast(data.presDataVizAxes).join('') && (this.layoutDoc._dataVizAxes = new List<string>(StrListCast(data.presDataVizAxes)));
+ const changedAxes = this.axes.join('') !== StrListCast(data.presDataVizAxes).join('') && (this.layoutDoc._data_vizAxes = new List<string>(StrListCast(data.presDataVizAxes)));
const func = () => this._chartRenderer?.restoreView(data);
if (changedView || changedAxes) {
setTimeout(func, 100);
@@ -88,14 +88,14 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
};
@computed.struct get axes() {
- return StrListCast(this.layoutDoc.dataVizAxes);
+ return StrListCast(this.layoutDoc.data_vizAxes);
}
- selectAxes = (axes: string[]) => (this.layoutDoc.dataVizAxes = new List<string>(axes));
+ selectAxes = (axes: string[]) => (this.layoutDoc.data_vizAxes = new List<string>(axes));
@computed get selectView() {
const width = this.props.PanelWidth() * 0.9;
const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
- const margin = { top: 10, right: 25, bottom: 50, left:25};
+ const margin = { top: 10, right: 25, bottom: 50, left: 25 };
if (!this.pairs) return 'no data';
// prettier-ignore
switch (this.dataVizView) {
@@ -113,10 +113,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}
fetchData() {
- if (DataVizBox.pairSet.has(StrCast(this.rootDoc.fileUpload))) return;
- DataVizBox.pairSet.set(StrCast(this.rootDoc.fileUpload), []);
+ if (DataVizBox.pairSet.has(CsvCast(this.rootDoc[this.fieldKey]).url.href)) return;
+ DataVizBox.pairSet.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, []);
fetch('/csvData?uri=' + this.dataUrl?.url.href) //
- .then(res => res.json().then(action(res => !res.errno && DataVizBox.pairSet.set(StrCast(this.rootDoc.fileUpload), res))));
+ .then(res => res.json().then(action(res => !res.errno && DataVizBox.pairSet.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, res))));
}
// handle changing the view using a button
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 777bf2f66..11f62a61f 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -56,8 +56,8 @@ export class LineChart extends React.Component<LineChartProps> {
}
@computed get incomingLinks() {
return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
- .filter(link => link.anchor1 !== this.props.rootDoc) // get links where this chart doc is the target of the link
- .map(link => DocCast(link.anchor1)); // then return the source of the link
+ .filter(link => link.link_anchor_1 !== this.props.rootDoc) // get links where this chart doc is the target of the link
+ .map(link => DocCast(link.link_anchor_1)); // then return the source of the link
}
@computed get incomingSelected() {
return this.incomingLinks // all links that are pointing to this node
@@ -87,7 +87,7 @@ export class LineChart extends React.Component<LineChartProps> {
{ fireImmediately: true }
);
this._disposers.annos = reaction(
- () => DocListCast(this.props.dataDoc[this.props.fieldKey + '-annotations']),
+ () => DocListCast(this.props.dataDoc[this.props.fieldKey + '_annotations']),
annotations => {
// modify how d3 renders so that anything in this annotations list would be potentially highlighted in some way
// could be blue colored to make it look like anchor
@@ -123,7 +123,7 @@ export class LineChart extends React.Component<LineChartProps> {
element.classList.remove('selected');
}
};
- // gets called whenever the "data-annotations" fields gets updated
+ // gets called whenever the "data_annotations" fields gets updated
drawAnnotations = (dataX: number, dataY: number, selected?: boolean) => {
// TODO: nda - can optimize this by having some sort of mapping of the x and y values to the individual circle elements
// loop through all html elements with class .circle-d1 and find the one that has "data-x" and "data-y" attributes that match the dataX and dataY
@@ -228,15 +228,15 @@ export class LineChart extends React.Component<LineChartProps> {
// creating the x and y scales
const xScale = scaleCreatorNumerical(xMin, xMax, 0, width);
- const yScale = scaleCreatorNumerical(0, yMax,height, 0);
+ const yScale = scaleCreatorNumerical(0, yMax, height, 0);
// adding svg
const margin = this.props.margin;
const svg = (this._lineChartSvg = d3
.select(this._lineChartRef.current)
.append('svg')
- .attr('width', `${width +margin.left + margin.right}`)
- .attr('height', `${height + margin.top + margin.bottom }`)
+ .attr('width', `${width + margin.left + margin.right}`)
+ .attr('height', `${height + margin.top + margin.bottom}`)
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`));
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 0d69ac890..3816bddfa 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -47,17 +47,17 @@ export class TableBox extends React.Component<TableBoxProps> {
e => {
const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!;
const targetCreator = (annotationOn: Doc | undefined) => {
- const alias = Doc.MakeAlias(this.props.docView?.()!.rootDoc!);
- alias._dataVizView = DataVizView.LINECHART;
- alias._dataVizAxes = new List<string>([col, col]);
- alias.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!;
- return alias;
+ const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!);
+ embedding._dataVizView = DataVizView.LINECHART;
+ embedding._data_vizAxes = new List<string>([col, col]);
+ 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.linkDisplay = true;
+ e.linkDocument.layout_linkDisplay = true;
// e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc;
// e.annoDragData.linkSourceDoc.followLinkZoom = false;
}