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

import { action, computed, observable } 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';
import { LinkManager } from '../../../../util/LinkManager';
import { Cast, DocCast } from '../../../../../fields/Types';
import { EditableText, Size, Type } from 'browndash-components';
import './Chart.scss';
import { listSpec } from '../../../../../fields/Schema';

interface TableBoxProps {
    rootDoc: 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> {
    @observable editableHeaders = this.columns;
    @observable editableCells = this._tableData;

    @computed get _tableData() {
        if (this.incomingLinks.length! <= 0) return this.props.pairs;
        /// StrListCast(this.incomingLinks[0].anchor_1.selected) ==> list of guids that the parent has selected
        return this.props.pairs?.filter(pair => (Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
    }

    @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.props.pairs.length ? Array.from(Object.keys(this.props.pairs[0])) : [];
        return this._tableData.length ? Array.from(Object.keys(this._tableData[0])) : [];
    }

    // render() {
    //     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.editableHeaders
    //                             .filter(col => !col.startsWith('select'))
    //                             .map(col => {
    //                                 const header = React.createRef<HTMLElement>();
    //                                 const displayColName = col;
    //                                 return (
    //                                     <th
    //                                         key={this.editableHeaders.indexOf(col)}
    //                                         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._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);
    //                                                 })
    //                                             );
    //                                         }}>
    //                                         <EditableText
    //                                             val={displayColName}
    //                                             setVal={action(val => {
    //                                                 this.editableHeaders[this.editableHeaders.indexOf(col)] = val as string
    //                                                 this.props.pairs.map(pair => {
    //                                                     pair[val as string] = pair[col];
    //                                                     delete pair[col]
    //                                                 })
    //                                             })}
    //                                             color={"black"}
    //                                             size={Size.LARGE}
    //                                         />
    //                                     </th>
    //                                 );
    //                             })}
    //                     </tr>
    //                 </thead>
    //                 <tbody>
    //                     {this._tableData?.map((p, i) => {
    //                         return (
    //                             <tr key={i} className="table-row" onClick={action(e => (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]]))}>
    //                                 {this.editableHeaders.map(col => (
    //                                     <td key={this.editableHeaders.indexOf(col)} style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}>
    //                                         {p[col]}
    //                                     </td>
    //                                 ))}
    //                             </tr>
    //                         );
    //                     })}
    //                 </tbody>
    //             </table>
    //         </div>
    //     );
    // }


    render() {
        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: 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._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.docView?.()!.layoutDoc.selected) 
                                        //     this.props.docView!.()!.layoutDoc.selected = new List<string>();
                                        // const selected = Cast(this.props.docView?.()!.layoutDoc.selected, listSpec("string"), null);
                                        //                    // StrListCast(this.props.docView?.()!.layoutDoc.selected)
                                        // selected.push(p.guid);
                                        (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]])
                                    })}>
                                    {this.columns.map(col => (
                                        <td key={this.columns.indexOf(col)} style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}>
                                            {p[col]}
                                        </td>
                                    ))}
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            </div>
        );
    }



}