src/client/views/nodes/DataVizBox/components/TableBox.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

import { action, computed, } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, StrListCast } from '../../../../../fields/Doc';
import { List } from '../../../../../fields/List';
import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../../Utils';
import { DragManager } from '../../../../util/DragManager';
import { DocumentView } from '../../DocumentView';
import { DataVizView } from '../DataVizBox';
import { LinkManager } from '../../../../util/LinkManager';
import { Cast, DocCast } from '../../../../../fields/Types';
import './Chart.scss';
import { listSpec } from '../../../../../fields/Schema';

interface TableBoxProps {
    rootDoc: Doc;
    layoutDoc: Doc;
    pairs: { [key: string]: any }[];
    selectAxes: (axes: string[]) => void;
    axes: string[];
    width: number;
    height: number;
    margin: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    docView?: () => DocumentView | undefined;
}

@observer
export class TableBox extends React.Component<TableBoxProps> {

    @computed get _tableData() {
        if (this.incomingLinks.length! <= 0) return this.props.pairs;
        return this.props.pairs?.filter(pair => this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid))
    }

    @computed get incomingLinks() {
        return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
            .filter(link => {
                return link.link_anchor_1 == this.props.rootDoc.draggedFrom}) // 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 columns() {
        return this._tableData.length ? Array.from(Object.keys(this._tableData[0])).filter(header => header!='guid' && header!='') : [];
    }

    render() {
        if (this._tableData.length>0){
            return (
                <div className="table-container" style={{height: this.props.height+this.props.margin.top+this.props.margin.bottom}}>
                    <table className="table">
                        <thead>
                            <tr className="table-row">
                                {this.columns
                                    .filter(col => !col.startsWith('select'))
                                    .map(col => {
                                        const header = React.createRef<HTMLElement>();
                                        return (
                                            <th
                                                key={this.columns.indexOf(col)}
                                                ref={header as any}
                                                style={{
                                                    color: this.props.axes.slice().reverse().lastElement() === col ? 'green' : this.props.axes.lastElement() === col ? 'red' : undefined,
                                                    fontWeight: 'bolder', border: '3px solid black'
                                                }}
                                                onPointerDown={e => {
                                                    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.TABLE;
                                                                embedding._data_vizAxes = new List<string>([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);
                                                        })
                                                    );
                                                }}>
                                                {col}
                                            </th>
                                        );
                                    })}
                            </tr>
                        </thead>
                        <tbody>
                            {this._tableData?.map((p, i) => {
                                return (
                                    <tr key={i} className="table-row" onClick={action(e => {
                                            if (!this.props.layoutDoc.selected) this.props.layoutDoc.selected = new List<string>();
                                            const selected = Cast(this.props.layoutDoc.selected, listSpec("string"), null);
                                            if (selected.includes(p.guid)) selected.splice(selected.indexOf(p.guid), 1);
                                            else {
                                                selected.push(p.guid)};
                                        })} style={
                                            { fontWeight: StrListCast(this.props.layoutDoc.selected).includes(p.guid) ? 'bold' : '' , width: '110%',
                                            background: StrListCast(this.props.layoutDoc.selected).includes(p.guid) ? 'lightgrey' : '' }}>
                                        {this.columns.map(col => (
                                            (this.props.layoutDoc.selected)?
                                                <td key={this.columns.indexOf(col)} style={{border: '1px solid black'}}>
                                                    {p[col]}
                                                </td>
                                            : <td key={this.columns.indexOf(col)} style={{border: '1px solid black'}}> {p[col]} </td>
                                        ))}
                                    </tr>
                                );
                            })}
                        </tbody>
                    </table>
                </div>
            );
        }
        else return (
            <div className='chart-container'>
                Selected rows of data from the incoming DataVizBox to display.
            </div>
        )
    }
}