path: root/src/client/views/nodes/DataVizBox/components/LineChart.tsx

import { Button, EditableText, Size } from 'browndash-components';
import * as d3 from 'd3';
import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, DocListCast, NumListCast, StrListCast } from '../../../../../fields/Doc';
import { List } from '../../../../../fields/List';
import { listSpec } from '../../../../../fields/Schema';
import { Cast, DocCast, StrCast } from '../../../../../fields/Types';
import { Docs } from '../../../../documents/Documents';
import { DocumentManager } from '../../../../util/DocumentManager';
import { undoable } from '../../../../util/UndoManager';
import { ObservableReactComponent } from '../../../ObservableReactComponent';
import { PinProps, PresBox } from '../../trails';
import { DataVizBox } from '../DataVizBox';
import { createLineGenerator, drawLine, minMaxRange, scaleCreatorNumerical, xAxisCreator, xGrid, yAxisCreator, yGrid } from '../utils/D3Utils';
import './Chart.scss';

export interface DataPoint {
    x: number;
    y: number;
}
export interface SelectedDataPoint extends DataPoint {
    elem?: d3.Selection<d3.BaseType, unknown, SVGGElement, unknown>;
}
export interface LineChartProps {
    vizBox: DataVizBox;
    Document: Doc;
    layoutDoc: Doc;
    axes: string[];
    titleCol: string;
    records: { [key: string]: any }[];
    width: number;
    height: number;
    dataDoc: Doc;
    fieldKey: string;
    margin: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
}

@observer
export class LineChart extends ObservableReactComponent<LineChartProps> {
    private _disposers: { [key: string]: IReactionDisposer } = {};
    private _lineChartRef: React.RefObject<HTMLDivElement> = React.createRef();
    private _lineChartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
    @observable _currSelected: any | undefined = undefined;
    // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
    constructor(props: any) {
        super(props);
        makeObservable(this);
    }

    @computed get _tableDataIds() {
        return !this.parentViz ? this._props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows);
    }
    // returns all the data records that will be rendered by only returning those records that have been selected by the parent visualization (or all records if there is no parent)
    @computed get _tableData() {
        return !this.parentViz ? this._props.records : this._tableDataIds.map(rowId => this._props.records[rowId]);
    }
    @computed get _lineChartData() {
        var guids = StrListCast(this._props.layoutDoc.dataViz_rowIds);
        if (this._props.axes.length <= 1) return [];
        return this._tableData.map(record => ({ x: Number(record[this._props.axes[0]]), y: Number(record[this._props.axes[1]]) })).sort((a, b) => (a.x < b.x ? -1 : 1));
    }
    @computed get graphTitle() {
        return this._props.axes[1] + ' vs. ' + this._props.axes[0] + ' Line Chart';
    }
    @computed get parentViz() {
        return DocCast(this._props.Document.dataViz_parentViz);
        // return LinkManager.Instance.getAllRelatedLinks(this._props.Document) // out of all links
        //     .filter(link => {
        //         return link.link_anchor_1 == this._props.Document.dataViz_parentViz;
        //     }) // 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 incomingHighlited() {
        // return selected x and y axes
        // otherwise, use the selection of whatever is linked to us
        const incomingVizBox = DocumentManager.Instance.getFirstDocumentView(this.parentViz)?.ComponentView as DataVizBox;
        const highlitedRowIds = NumListCast(incomingVizBox?.layoutDoc?.dataViz_highlitedRows);
        return this._tableData.filter((record, i) => highlitedRowIds.includes(this._tableDataIds[i])); // get all the datapoints they have selected field set by incoming anchor
    }
    @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } {
        return minMaxRange([this._lineChartData]);
    }
    componentWillUnmount() {
        Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
    }
    componentDidMount() {
        this._disposers.chartData = reaction(
            () => ({ dataSet: this._lineChartData, w: this.width, h: this.height }),
            ({ dataSet, w, h }) => {
                if (dataSet) {
                    this.drawChart([dataSet], this.rangeVals, w, h);
                }
            },
            { fireImmediately: true }
        );
        this._disposers.annos = reaction(
            () => 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
                // this.drawAnnotations()
                // loop through annotations and draw them
                // annotations.forEach(a => this.drawAnnotations(Number(a.x), Number(a.y)));
                // this.drawAnnotations(annotations.x, annotations.y);
            },
            { fireImmediately: true }
        );
        this._disposers.highlights = reaction(
            () => ({
                selected: this._currSelected,
                incomingHighlited: this.incomingHighlited,
            }),
            ({ selected, incomingHighlited }) => {
                // redraw annotations when the chart data has changed, or the local or inherited selection has changed
                this.clearAnnotations();
                selected && this.drawAnnotations(Number(selected.x), Number(selected.y), true);
                incomingHighlited?.forEach((record: any) => this.drawAnnotations(Number(record[this._props.axes[0]]), Number(record[this._props.axes[1]])));
            },
            { fireImmediately: true }
        );
    }

    // anything that doesn't need to be recalculated should just be stored as drawCharts (i.e. computed values) and drawChart is gonna iterate over these observables and generate svgs based on that

    clearAnnotations = () => {
        const elements = document.querySelectorAll('.datapoint');
        for (let i = 0; i < elements.length; i++) {
            const element = elements[i];
            element.classList.remove('brushed');
            element.classList.remove('selected');
        }
    };
    // 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
        // if it exists, then highlight it
        // if it doesn't exist, then remove the highlight
        const elements = document.querySelectorAll('.datapoint');
        for (let i = 0; i < elements.length; i++) {
            const element = elements[i];
            const x = element.getAttribute('data-x');
            const y = element.getAttribute('data-y');
            if (x === dataX.toString() && y === dataY.toString()) {
                element.classList.add(selected ? 'selected' : 'brushed');
            }
            // TODO: nda - this remove highlight code should go where we remove the links
            // } else {
            // }
        }
    };

    @action
    restoreView = (data: Doc) => {
        const coords = Cast(data.config_dataVizSelection, listSpec('number'), null);
        if (coords?.length > 1 && (this._currSelected?.x !== coords[0] || this._currSelected?.y !== coords[1])) {
            this.setCurrSelected(coords[0], coords[1]);
            return true;
        }
        if (this._currSelected) {
            this.setCurrSelected();
            return true;
        }
        return false;
    };

    // create a document anchor that stores whatever is needed to reconstruct the viewing state (selection,zoom,etc)
    getAnchor = (pinProps?: PinProps) => {
        const anchor = Docs.Create.ConfigDocument({
            //
            title: 'line doc selection' + this._currSelected?.x,
        });
        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Document);
        anchor.config_dataVizSelection = this._currSelected ? new List<number>([this._currSelected.x, this._currSelected.y]) : undefined;
        return anchor;
    };

    @computed get height() {
        return this._props.height - this._props.margin.top - this._props.margin.bottom;
    }

    @computed get width() {
        return this._props.width - this._props.margin.left - this._props.margin.right;
    }

    @computed get defaultGraphTitle() {
        var ax0 = this._props.axes[0];
        var ax1 = this._props.axes.length > 1 ? this._props.axes[1] : undefined;
        if (this._props.axes.length < 2 || !/\d/.test(this._props.records[0][ax0]) || !ax1) {
            return ax0 + ' Line Chart';
        } else return ax1 + ' by ' + ax0 + ' Line Chart';
    }

    setupTooltip() {
        return d3
            .select(this._lineChartRef.current)
            .append('div')
            .attr('class', 'tooltip')
            .style('opacity', 0)
            .style('background', '#fff')
            .style('border', '1px solid #ccc')
            .style('padding', '5px')
            .style('position', 'absolute')
            .style('font-size', '12px');
    }

    // TODO: nda - use this everyewhere we update currSelected?
    @action
    setCurrSelected(x?: number, y?: number) {
        // TODO: nda - get rid of svg element in the list?
        if (this._currSelected && this._currSelected.x == x && this._currSelected.y == y) this._currSelected = undefined;
        else this._currSelected = x !== undefined && y !== undefined ? { x, y } : undefined;
        this._props.records.forEach(record => record[this._props.axes[0]] === x && record[this._props.axes[1]] === y && (record.selected = true));
    }

    drawDataPoints(data: DataPoint[], idx: number, xScale: d3.ScaleLinear<number, number, never>, yScale: d3.ScaleLinear<number, number, never>) {
        if (this._lineChartSvg) {
            const circleClass = '.circle-' + idx;
            this._lineChartSvg
                .selectAll(circleClass)
                .data(data)
                .join('circle') // enter append
                .attr('class', `${circleClass} datapoint`)
                .attr('r', '3') // radius
                .attr('cx', d => xScale(d.x))
                .attr('cy', d => yScale(d.y))
                .attr('data-x', d => d.x)
                .attr('data-y', d => d.y);
        }
    }

    drawChart = (dataSet: any[][], rangeVals: { xMin?: number; xMax?: number; yMin?: number; yMax?: number }, width: number, height: number) => {
        // clearing tooltip and the current chart
        d3.select(this._lineChartRef.current).select('svg').remove();
        d3.select(this._lineChartRef.current).select('.tooltip').remove();

        var { xMin, xMax, yMin, yMax } = rangeVals;
        if (xMin === undefined || xMax === undefined || yMin === undefined || yMax === undefined) {
            return;
        }

        // adding svg
        const margin = this._props.margin;
        const svg = (this._lineChartSvg = d3
            .select(this._lineChartRef.current)
            .append('svg')
            .attr('class', 'graph')
            .attr('width', `${width + margin.left + margin.right}`)
            .attr('height', `${height + margin.top + margin.bottom}`)
            .append('g')
            .attr('transform', `translate(${margin.left}, ${margin.top})`));

        var validSecondData;
        if (this._props.axes.length>2){ // for when there are 2 lines on the chart
            var next = this._tableData.map(record => ({ x: Number(record[this._props.axes[0]]), y: Number(record[this._props.axes[2]]) })).sort((a, b) => (a.x < b.x ? -1 : 1));
            validSecondData = next.filter(d => {
                if (!d.x || Number.isNaN(d.x) || !d.y || Number.isNaN(d.y)) return false;
                return true;
            });
            var secondDataRange = minMaxRange([validSecondData]);
            if (secondDataRange.xMax!>xMax) xMax = secondDataRange.xMax;
            if (secondDataRange.yMax!>yMax) yMax = secondDataRange.yMax;
            if (secondDataRange.xMin!<xMin) xMin = secondDataRange.xMin;
            if (secondDataRange.yMin!<yMin) yMin = secondDataRange.yMin;
        }

        // creating the x and y scales
        const xScale = scaleCreatorNumerical(xMin!, xMax!, 0, width);
        const yScale = scaleCreatorNumerical(0, yMax!, height, 0);
        const lineGen = createLineGenerator(xScale, yScale);

        // create x and y grids
        xGrid(svg.append('g'), height, xScale);
        yGrid(svg.append('g'), width, yScale);
        xAxisCreator(svg.append('g'), height, xScale);
        yAxisCreator(svg.append('g'), width, yScale);

        if (validSecondData) {
            drawLine(svg.append('path'), validSecondData, lineGen, true);
            this.drawDataPoints(validSecondData, 0, xScale, yScale);
            svg.append('path').attr("stroke", "red");

            // legend
            var color = d3.scaleOrdinal()
                .range(["black", "blue"])
                .domain([this._props.axes[1], this._props.axes[2]])
            svg.selectAll("mydots")
                .data([this._props.axes[1], this._props.axes[2]])
                .enter()
                .append("circle")
                    .attr("cx", 5)
                    .attr("cy", function(d,i){ return -30 + i*15})
                    .attr("r", 7)
                    .style("fill", function(d){ return color(d)})
            svg.selectAll("mylabels")
                .data([this._props.axes[1], this._props.axes[2]])
                .enter()
                .append("text")
                    .attr("x", 25)
                    .attr("y", function(d,i){ return -30 + i*15})
                    .style("fill", function(d){ return color(d)})
                    .text(function(d){ return d})
                    .attr("text-anchor", "left")
                    .style("alignment-baseline", "middle")
        }

        // get valid data points
        const data = dataSet[0];
        var validData = data.filter(d => {
            Object.keys(data[0]).map(key => {
                if (!d[key] || Number.isNaN(d[key])) return false;
            });
            return true;
        });

        // draw the plot line
        drawLine(svg.append('path'), validData, lineGen, false);
        // draw the datapoint circle
        this.drawDataPoints(validData, 0, xScale, yScale);

        const higlightFocusPt = svg.append('g').style('display', 'none');
        higlightFocusPt.append('circle').attr('r', 5).attr('class', 'circle');
        const tooltip = this.setupTooltip();
        // add all the tooltipContent to the tooltip
        const mousemove = action((e: any) => {
            const bisect = d3.bisector((d: DataPoint) => d.x).left;
            const xPos = d3.pointer(e)[0];
            const x0 = Math.min(data.length - 1, bisect(data, xScale.invert(xPos - 5))); // shift x by -5 so that you can reach points on the left-side axis
            const d0 = data[x0];
            if (d0) this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip);

            this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip);
        });

        const onPointClick = action((e: any) => {
            const bisect = d3.bisector((d: DataPoint) => d.x).left;
            const xPos = d3.pointer(e)[0];
            const x0 = bisect(data, xScale.invert(xPos - 5)); // shift x by -5 so that you can reach points on the left-side axis
            const d0 = data[x0];
            // find .circle-d1 with data-x = d0.x and data-y = d0.y
            const selected = svg.selectAll('.datapoint').filter((d: any) => d['data-x'] === d0.x && d['data-y'] === d0.y);
            this.setCurrSelected(d0.x, d0.y);
            this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip);
        });

        svg.append('rect')
            .attr('class', 'overlay')
            .attr('width', width)
            .attr('height', this.height + margin.top + margin.bottom)
            .attr('fill', 'none')
            .attr('translate', `translate(${margin.left}, ${-(margin.top + margin.bottom)})`)
            .style('opacity', 0)
            .on('mouseover', () => higlightFocusPt.style('display', null))
            .on('mouseout', () => tooltip.transition().duration(300).style('opacity', 0))
            .on('mousemove', mousemove)
            .on('click', onPointClick);

        // axis titles
        svg.append('text')
            .attr('transform', 'translate(' + width / 2 + ' ,' + (height + 40) + ')')
            .style('text-anchor', 'middle')
            .text(this._props.axes[0]);
        svg.append('text')
            .attr('transform', 'rotate(-90)' + ' ' + 'translate( 0, ' + -10 + ')')
            .attr('x', -(height / 2))
            .attr('y', -30)
            .attr('height', 20)
            .attr('width', 20)
            .style('text-anchor', 'middle')
            .text(this._props.axes[1]);
    };

    private updateTooltip(
        higlightFocusPt: d3.Selection<SVGGElement, unknown, null, undefined>,
        xScale: d3.ScaleLinear<number, number, never>,
        d0: DataPoint,
        yScale: d3.ScaleLinear<number, number, never>,
        tooltip: d3.Selection<HTMLDivElement, unknown, null, undefined>
    ) {
        higlightFocusPt.attr('transform', `translate(${xScale(d0.x)},${yScale(d0.y)})`).attr('class', this._currSelected?.x === d0.x && this._currSelected?.y === d0.y ? 'hoverHighlight-selected' : 'hoverHighlight');
        tooltip.transition().duration(300).style('opacity', 0.9);
        // TODO: nda - updating the inner html could be deadly cause injection attacks!
        tooltip
            .html(() => `<b>(${d0.x},${d0.y})</b>`) // text content for tooltip
            .style('pointer-events', 'none')
            .style('transform', `translate(${xScale(d0.x) - this.width}px,${yScale(d0.y)}px)`);
    }

    render() {
        var titleAccessor: any = 'dataViz_lineChart_title';
        if (this._props.axes.length == 2) titleAccessor = titleAccessor + this._props.axes[0] + '-' + this._props.axes[1];
        else if (this._props.axes.length > 0) titleAccessor = titleAccessor + this._props.axes[0];
        if (!this._props.layoutDoc[titleAccessor]) this._props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
        const selectedPt = this._currSelected ? `{ ${this._props.axes[0]}: ${this._currSelected.x} ${this._props.axes[1]}: ${this._currSelected.y} }` : 'none';
        var selectedTitle = "";
        if (this._currSelected && this._props.titleCol){
            selectedTitle+= "\n" + this._props.titleCol + ": "
            this._tableData.forEach(each => {
                 var mapThisEntry = false;
                if (this._currSelected.x==each[this._props.axes[0]] && this._currSelected.y==each[this._props.axes[1]]) mapThisEntry = true;
                else if (this._currSelected.y==each[this._props.axes[0]] && this._currSelected.x==each[this._props.axes[1]]) mapThisEntry = true;
                if (mapThisEntry) selectedTitle += each[this._props.titleCol] + ", ";
            })
            selectedTitle = selectedTitle.slice(0,-1).slice(0,-1);
        }
        if (this._lineChartData.length > 0 || !this.parentViz || this.parentViz.length == 0) {
            return this._props.axes.length >= 2 && /\d/.test(this._props.records[0][this._props.axes[0]]) && /\d/.test(this._props.records[0][this._props.axes[1]]) ? (
                <div className="chart-container" style={{ width: this._props.width + this._props.margin.right }}>
                    <div className="graph-title">
                        <EditableText
                            val={StrCast(this._props.layoutDoc[titleAccessor])}
                            setVal={undoable(
                                action(val => (this._props.layoutDoc[titleAccessor] = val as string)),
                                'Change Graph Title'
                            )}
                            color={'black'}
                            size={Size.LARGE}
                            fillWidth
                        />
                    </div>
                    <div ref={this._lineChartRef} />
                    {selectedPt != 'none' ? (
                        <div className={'selected-data'}>
                            {`Selected: ${selectedPt}`}
                            {`${selectedTitle}`}
                            <Button
                                onClick={e => {
                                    this._props.vizBox.sidebarBtnDown;
                                    this._props.vizBox.sidebarAddDocument;
                                }}></Button>
                        </div>
                    ) : null}
                </div>
            ) : (
                <span className="chart-container"> {'first use table view to select two numerical axes to plot'}</span>
            );
        } else
            return (
                // when it is a brushed table and the incoming table doesn't have any rows selected
                <div className="chart-container">Selected rows of data from the incoming DataVizBox to display.</div>
            );
    }
}