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

import { action, computed } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../../../../fields/Doc';
import { Id } from '../../../../../fields/FieldSymbols';
import { List } from '../../../../../fields/List';
import { emptyFunction, returnFalse, setupMoveUpEvents, Utils } from '../../../../../Utils';
import { DragManager } from '../../../../util/DragManager';
import { DocumentView } from '../../DocumentView';
import { DataVizView } from '../DataVizBox';

interface TableBoxProps {
    pairs: { [key: string]: any }[];
    selectAxes: (axes: string[]) => void;
    axes: string[];
    docView?: () => DocumentView | undefined;
}

@observer
export class TableBox extends React.Component<TableBoxProps> {
    @computed get columns() {
        return this.props.pairs.length ? Array.from(Object.keys(this.props.pairs[0])) : [];
    }
    render() {
        return (
            <div className="table-container">
                <table className="table">
                    <thead>
                        <tr className="table-row">
                            {this.columns
                                .filter(col => !col.startsWith('select'))
                                .map(col => {
                                    const header = React.createRef<HTMLElement>();
                                    return (
                                        <th
                                            ref={header as any}
                                            style={{
                                                color: this.props.axes.slice().reverse().lastElement() === col ? 'green' : this.props.axes.lastElement() === col ? 'red' : undefined,
                                                fontWeight: this.props.axes.includes(col) ? 'bolder' : 'normal',
                                            }}
                                            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.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.link_displayLine = 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.props.pairs?.map((p, i) => {
                            return (
                                <tr className="table-row" onClick={action(e => (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]]))}>
                                    {this.columns.map(col => (
                                        <td style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}>{p[col]}</td>
                                    ))}
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            </div>
        );
    }
}