buckaroo-js-core 0.8.5 → 0.14.0

package/src/buckaroo_js/components/OperationDetail.tsx

@@ -1,203 +0,0 @@
-import _ from 'lodash';
-import {Operation, SettableArg, OperationEventFunc} from './OperationUtils';
-import {ActualArg, CommandArgSpec} from './CommandUtils';
-import {objWithoutNull, replaceAtIdx, replaceAtKey} from './utils';
-import React from 'react';
-
-export const OperationDetail = ({
-    command,
-    setCommand,
-    columns,
-    commandPatterns
-}: {
-    command: Operation;
-    setCommand: OperationEventFunc;
-    columns: string[];
-    commandPatterns: CommandArgSpec;
-}) => {
-    if (command === undefined) {
-        return <span></span>;
-    }
-    const commandName = command[0]['symbol'];
-    const pattern = commandPatterns[commandName];
-
-    if (!_.isArray(pattern)) {
-        //we shouldn't get here
-        return <h2>unknown command {commandName}</h2>;
-    } else if (_.isEqual(pattern, [null])) {
-        return <div className='operation-detail'></div>;
-    } else {
-        const fullPattern = pattern as ActualArg[];
-        return (
-            <div className='operation-detail'>
-                <ArgGetters
-                    command={command}
-                    fullPattern={fullPattern}
-                    setCommand={setCommand}
-                    columns={columns}
-                />
-            </div>
-        );
-    }
-    return <h2></h2>;
-};
-
-export const ArgGetters = ({
-    command,
-    fullPattern,
-    setCommand,
-    columns
-}: {
-    command: Operation;
-    fullPattern: ActualArg[];
-    setCommand: OperationEventFunc;
-    columns: string[];
-}) => {
-    /* reads the argspec and sets up the proper getters/setters */
-    const makeArgGetter = (pattern: ActualArg) => {
-        const idx = pattern[0];
-        const val = command[idx] as SettableArg;
-        const valSetter = (newVal: unknown) => {
-            const newCommand = replaceAtIdx(command, idx, newVal);
-            //console.log('newCommand', newCommand);
-            setCommand(newCommand as Operation);
-        };
-        return (
-            <div key={idx}>
-                <ArgGetter
-                    argProps={pattern}
-                    renderKey={idx}
-                    val={val}
-                    setter={valSetter}
-                    columns={columns}
-                />
-            </div>
-        );
-    };
-    return <div className='arg-getters'>{fullPattern.map(makeArgGetter)}</div>;
-};
-
-const ArgGetter = ({
-    argProps,
-    val,
-    setter,
-    columns,
-    renderKey
-}: {
-    argProps: ActualArg;
-    val: SettableArg;
-    setter: (arg: SettableArg) => void;
-    columns: string[];
-    renderKey: number;
-}) => {
-    const [_argPos, label, argType, lastArg] = argProps;
-
-    const defaultShim = (event: {target: {value: SettableArg}}) => setter(event.target.value);
-    if (argType === 'enum' && _.isArray(lastArg)) {
-        return (
-            <fieldset key={renderKey}>
-                <label> {label} </label>
-                <select defaultValue={val as string} onChange={defaultShim}>
-                    {lastArg.map((optionVal) => (
-                        <option key={optionVal} value={optionVal}>
-                            {optionVal}
-                        </option>
-                    ))}
-                </select>
-            </fieldset>
-        );
-    } else if (argType === 'type') {
-        if (lastArg === 'integer') {
-            const valSetterShim = (event: {target: {value: string}}) =>
-                setter(parseInt(event.target.value));
-            return (
-                <fieldset key={renderKey}>
-                    <label> {label} </label>
-                    <input
-                        type='number'
-                        defaultValue={val as number}
-                        step='1'
-                        onChange={valSetterShim}
-                    />
-                </fieldset>
-            );
-        } else if (lastArg === 'float') {
-            const valSetterShim = (event: {target: {value: string}}) =>
-                setter(parseFloat(event.target.value));
-            return (
-                <fieldset key={renderKey}>
-                    <label> {label} </label>
-                    <input
-                        type='number'
-                        step='0.01'
-                        defaultValue={val as number}
-                        onChange={valSetterShim}
-                    />
-                </fieldset>
-            );
-        } else if (lastArg === 'string') {
-            const valSetterShim = (event: {target: {value: string}}) => setter(event.target.value);
-            return (
-                <fieldset key={renderKey}>
-                    <label> {label} </label>
-                    <input type='text' defaultValue={val as string} onChange={valSetterShim} />
-                </fieldset>
-            );
-        } else {
-            return (
-                <fieldset key={renderKey}>
-                    <label> {label} </label>
-                    <input value='dont know' />
-                </fieldset>
-            );
-        }
-    } else if (argType === 'colEnum') {
-        const widgetRow = columns.map((colName: string) => {
-            const colSetter = (event: {target: {value: any}}) => {
-                const newColVal = event.target.value;
-                if (_.isString(newColVal)) {
-                    const updatedColDict = replaceAtKey(
-                        val as Record<string, string>,
-                        colName,
-                        newColVal as string
-                    ); // as Record<string, string>
-                    setter(objWithoutNull(updatedColDict, ['null']));
-                }
-            };
-            const colVal = _.get(val, colName, 'null');
-            if (!_.isArray(lastArg)) {
-                return <h3> arg error</h3>;
-            }
-            return (
-                <td key={renderKey + colName}>
-                    <select defaultValue={colVal} onChange={colSetter}>
-                        {lastArg.map((optionVal) => (
-                            <option key={optionVal} value={optionVal}>
-                                {optionVal}
-                            </option>
-                        ))}
-                    </select>
-                </td>
-            );
-        });
-
-        return (
-            <div className='col-enum' key={renderKey}>
-                <table>
-                    <thead>
-                        <tr>
-                            {columns.map((colName) => (
-                                <th key={colName}>{colName}</th>
-                            ))}
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>{widgetRow}</tr>
-                    </tbody>
-                </table>
-            </div>
-        );
-    } else {
-        return <h3> unknown argtype </h3>;
-    }
-};

package/src/buckaroo_js/components/OperationUtils.ts

@@ -1,33 +0,0 @@
-/*
-  used for manipulating the JSON Flavored lisp of operations and commands
-  */
-import _ from 'lodash';
-import {SymbolT, ColEnumArgs, SymbolDf, symDf} from './CommandUtils';
-
-export const sym = (symbolName: string) => {
-    return {symbol: symbolName};
-};
-
-export type Atom = number | string | SymbolT | ColEnumArgs;
-export type SettableArg = number | string | ColEnumArgs;
-
-export type OperationSingleColumn = [SymbolT, SymbolDf, string];
-export type OperationSingleArg = [SymbolT, SymbolDf, string, Atom];
-export type OperationTwoArg = [SymbolT, SymbolDf, string, Atom, Atom];
-export type Operation = OperationSingleColumn | OperationSingleArg | OperationTwoArg;
-
-export type SetOperationFunc = (newCommand: Operation) => void;
-export type SetOperationsFunc = (newCommands: Operation[]) => void;
-
-export type OperationDefaultArgs = Record<string, Operation>;
-
-//const ArgNames = ['Idx', 'label', 'specName', 'extraSpecArgs'];
-export const bakedOperations: Operation[] = [
-    [sym('dropcol'), symDf, 'col1'],
-    [sym('fillna'), symDf, 'col2', 5],
-    [sym('resample'), symDf, 'month', 'monthly', {}]
-];
-
-//this will become OperationEventFunc
-export type OperationEventFunc = (newCommand: Operation) => void;
-export type NoArgEventFunc = () => void;

package/src/buckaroo_js/components/Operations.tsx

@@ -1,243 +0,0 @@
-import React, {useState} from 'react';
-import _ from 'lodash';
-import {Operation, SetOperationsFunc, OperationEventFunc, NoArgEventFunc} from './OperationUtils';
-import {CommandConfigT} from './CommandUtils';
-import {replaceInArr} from './utils';
-
-import {OperationDetail} from './OperationDetail';
-import {AgGridReact} from 'ag-grid-react'; // the AG Grid React Component
-import {ColDef, GridOptions} from 'ag-grid-community';
-//import { CustomCellRendererProps } from '@ag-grid-community/react';
-
-import {updateAtMatch} from './utils';
-import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-alpine.css';
-
-export const OperationsList = ({
-    operations,
-    activeKey,
-    setActiveKey,
-    delKey
-}: {
-    operations: Operation[];
-    activeKey?: string;
-    setActiveKey: React.Dispatch<React.SetStateAction<string>>;
-    delKey: any;
-}) => {
-    const renderOperation = (params: any) => (
-        <span className='missionSpan'>
-            <span
-                style={{
-                    height: 30,
-                    width: 30,
-                    margin: 3,
-                    paddingBottom: 8,
-                    float: 'left',
-                    background: 'grey'
-                }}
-                onClick={delKey(params.value[0])}
-            >
-                X
-            </span>
-            <span>{params.value[1]}</span>
-        </span>
-    );
-
-    const getColumns = (passedOperations: Operation[]): ColDef[] =>
-        _.map(Array.from(passedOperations.entries()), ([index, element]) => {
-            const name = element[0]['symbol'];
-            const key = name + index.toString();
-            const column = {
-                field: key,
-                headerName: name,
-                cellRenderer: renderOperation
-            }; // width: 20, maxWidth: 60};
-            return column;
-        });
-
-    const rowElements: Record<string, [string, string]>[] = _.map(
-        Array.from(operations.entries()),
-        ([index, element]) => {
-            const name = element[0]['symbol'];
-            const key = name + index.toString();
-            const rowEl: Record<string, [string, string]> = {};
-            rowEl[key] = [key, element[2]]; //key, colName
-            return rowEl;
-        }
-    );
-    const rows = [_.merge({}, ...rowElements)];
-    const columns = getColumns(operations);
-
-    const styledColumns = updateAtMatch(
-        _.clone(columns),
-        activeKey || '___never',
-        {
-            cellStyle: {background: 'var(--ag-range-selection-background-color-3)'}
-        },
-        {cellStyle: {}}
-    );
-
-    const gridOptions: GridOptions = {
-        rowSelection: 'single',
-        headerHeight: 30,
-        onCellClicked: (event) => {
-            const colName = event.column.getColId();
-            setActiveKey(colName);
-        }
-    };
-    return (
-        <div style={{height: 78, width: 1000}} className='ag-theme-alpine'>
-            <AgGridReact
-                gridOptions={gridOptions}
-                rowData={rows}
-                columnDefs={styledColumns}
-            ></AgGridReact>
-        </div>
-    );
-};
-
-export const OperationAdder = ({
-    column,
-    addOperationCb,
-    defaultArgs
-}: {
-    column: string;
-    addOperationCb: any;
-    defaultArgs: any;
-}): JSX.Element => {
-    const addOperationByName = (localOperationName: string) => {
-        return () => {
-            const defaultOperation = defaultArgs[localOperationName];
-            addOperationCb(replaceInArr(defaultOperation, 'col', column));
-        };
-    };
-
-    return (
-        <div className='operation-adder'>
-            <span className={'column-name'}> Column: {column}</span>
-            <fieldset>
-                {_.keys(defaultArgs).map((optionVal) => (
-                    <button key={optionVal} onClick={addOperationByName(optionVal)}>
-                        {' '}
-                        {optionVal}{' '}
-                    </button>
-                ))}
-            </fieldset>
-        </div>
-    );
-};
-
-export const OperationViewer = ({
-    operations,
-    setOperations,
-    activeColumn,
-    allColumns,
-    commandConfig
-}: {
-    operations: Operation[];
-    setOperations: SetOperationsFunc;
-    activeColumn: string;
-    allColumns: string[];
-    commandConfig: CommandConfigT;
-}) => {
-    const opToKey = (idx: number, op: Operation): string => {
-        const name = op[0]['symbol'];
-        return name + idx.toString();
-    };
-
-    const operationObjs = _.map(Array.from(operations.entries()), ([index, element]) => {
-        const rowEl: Record<string, Operation> = {};
-        rowEl[opToKey(index, element)] = element;
-        return rowEl;
-    });
-    //why am I doing this? probably something so I gauruntee a clean dict
-
-    const operationDict = _.merge({}, ...operationObjs);
-
-    const idxObjs = _.map(Array.from(operations.entries()), ([index, element]) => {
-        const rowEl: Record<string, number> = {};
-        rowEl[opToKey(index, element)] = index;
-        return rowEl;
-    });
-    const keyToIdx = _.merge({}, ...idxObjs);
-
-    // previously was null
-    const [activeKey, setActiveKey] = useState('');
-
-    function getSetOperation(key: string): OperationEventFunc {
-        return (newOperation: Operation) => {
-            const index = keyToIdx[key];
-            const nextOperations = operations.map((c, i) => {
-                if (i === index) {
-                    return newOperation;
-                } else {
-                    return c;
-                }
-            });
-            console.log('about to call setOperations', key, newOperation);
-            setOperations(nextOperations);
-        };
-    }
-
-    function getDeleteOperation(key: string): NoArgEventFunc {
-        return (): void => {
-            const index = keyToIdx[key];
-            const nextOperations = operations.map((c, i) => {
-                if (i === index) {
-                    return undefined;
-                } else {
-                    return c;
-                }
-            });
-            //const newIdx = Math.max(0, index - 1);
-            const newOps = _.filter(nextOperations) as Operation[];
-            console.log('getDeleteOperations', operations.length, newOps.length);
-            setOperations(newOps);
-            //setActiveKey(opToKey(newIdx, newOps[newIdx]));
-            //setActiveKey('');
-        };
-    }
-
-    const getColumns = (passedOperations: Operation[]): ColDef[] =>
-        _.map(Array.from(passedOperations.entries()), ([index, element]) => {
-            const name = element[0]['symbol'];
-            const key = name + index.toString();
-            const column = {field: key, headerName: name}; // width: 20, maxWidth: 60};
-            return column;
-        });
-    const addOperation: OperationEventFunc = (newOperation: Operation) => {
-        const newOperationArr = [...operations, newOperation];
-        setOperations(newOperationArr);
-        const newOperationKey = getColumns(newOperationArr)[newOperationArr.length - 1].field;
-        if (newOperationKey !== undefined) {
-            setActiveKey(newOperationKey);
-        }
-    };
-    const {argspecs, defaultArgs} = commandConfig;
-    return (
-        <div className='command-viewer'>
-            <OperationAdder
-                column={activeColumn}
-                addOperationCb={addOperation}
-                defaultArgs={defaultArgs}
-            />
-            <div className='operations-box'>
-                <h4> Operations </h4>
-                <OperationsList
-                    operations={operations}
-                    activeKey={activeKey}
-                    setActiveKey={setActiveKey}
-                    delKey={getDeleteOperation}
-                />
-            </div>
-            {activeKey && (
-                <OperationDetail
-                    command={operationDict[activeKey]}
-                    setCommand={getSetOperation(activeKey)}
-                    columns={allColumns}
-                    commandPatterns={argspecs}
-                />
-            )}
-        </div>
-    );
-};

package/src/buckaroo_js/components/StatusBar.tsx

@@ -1,190 +0,0 @@
-// https://plnkr.co/edit/QTNwBb2VEn81lf4t?open=index.tsx
-import React, {useRef, useCallback} from 'react';
-import _ from 'lodash';
-import {AgGridReact} from 'ag-grid-react'; // the AG Grid React Component
-import {ColDef, GridOptions} from 'ag-grid-community';
-import {basicIntFormatter} from './DFViewerParts/Displayer';
-import {DFMeta} from './WidgetTypes';
-import {BuckarooOptions} from './WidgetTypes';
-import {BuckarooState, BKeys} from './WidgetTypes';
-export type setColumFunc = (newCol: string) => void;
-
-const helpCell = function (params: any) {
-    return (
-        <a
-            href='https://buckaroo-data.readthedocs.io/en/latest/feature_reference.html'
-            target='_blank'
-            rel='noopener noreferrer'
-        >
-            ?
-        </a>
-    );
-};
-
-export function StatusBar({
-    dfMeta,
-    buckarooState,
-    setBuckarooState,
-    buckarooOptions
-}: {
-    dfMeta: DFMeta;
-    buckarooState: BuckarooState;
-    setBuckarooState: React.Dispatch<React.SetStateAction<BuckarooState>>;
-    buckarooOptions: BuckarooOptions;
-}) {
-    /*
-      AgGridReact
-        rowData={rowData}
-        columnDefs={columns}
-        singleClickEdit={true}
-        stopEditingWhenCellsLoseFocus={true}
-*/
-
-    //console.log('initial buckarooState', buckarooState);
-    //   const optionCycles = _.fromPairs(
-    // //    _.map(buckarooOptions, (v: any, k) => [k, ( k==='df_display' ? v :  _.concat([false], v) ) ])
-    //     _.map(buckarooOptions, (v: any, k) => [k, ( k==='post_processing' ? v :  _.concat([false], v) ) ])
-
-    //   ) as Record<BKeys, any[]>;
-    const optionCycles = buckarooOptions;
-    const idxs = _.fromPairs(
-        _.map(_.keys(optionCycles), (k) => [
-            k,
-            _.indexOf(optionCycles[k as BKeys], buckarooState[k as BKeys])
-        ])
-    );
-
-    const nextIndex = (curIdx: number, arr: any[]) => {
-        if (curIdx === arr.length - 1) {
-            return 0;
-        }
-        return curIdx + 1;
-    };
-
-    const newBuckarooState = (k: BKeys) => {
-        const arr = optionCycles[k];
-        const curIdx = idxs[k];
-        const nextIdx = nextIndex(curIdx, arr);
-        const newVal = arr[nextIdx];
-        const newState = _.clone(buckarooState);
-        newState[k] = newVal;
-        return newState;
-    };
-    const updateDict = (event: any) => {
-        const colName = event.column.getColId();
-        if (colName === 'quick_command_args' || colName === 'search') {
-            return;
-        }
-        if (_.includes(_.keys(buckarooState), colName)) {
-            const nbstate = newBuckarooState(colName as BKeys);
-            setBuckarooState(nbstate);
-        }
-    };
-
-    const handleCellChange = useCallback((params: {oldValue: any; newValue: any}) => {
-        const {oldValue, newValue} = params;
-
-        if (oldValue !== newValue && newValue !== null) {
-            //console.log('Edited cell:', newValue);
-            const newState = {
-                ...buckarooState,
-                quick_command_args: {search: [newValue]}
-            };
-            //console.log('handleCellChange', buckarooState, newState);
-            setBuckarooState(newState);
-        }
-    }, []);
-
-    const columnDefs: ColDef[] = [
-        {
-            field: 'search',
-            headerName: 'search',
-            width: 200,
-            editable: true,
-            onCellValueChanged: handleCellChange
-            //hide: !showSearch,
-        },
-        {
-            field: 'df_display',
-            headerName: 'Σ', //note the greek symbols instead of icons which require buildchain work
-            headerTooltip: 'Summary Stats',
-            width: 120
-        },
-        /*
-    {
-      field: 'auto_clean',
-      //headerName: 'Σ', //note the greek symbols instead of icons which require buildchain work
-      headerName: 'auto cleaning',
-      headerTooltip: 'Auto Cleaning config',
-      width: 120,
-    },
-    */
-        {
-            field: 'post_processing',
-            //      headerName: "Θ",
-            headerName: 'post processing',
-            headerTooltip: 'post process method',
-            width: 100
-        },
-        {
-            field: 'show_commands',
-            headerName: 'λ',
-            headerTooltip: 'Show Commands',
-            width: 30
-        },
-
-        {field: 'sampled', headerName: 'Ξ', headerTooltip: 'Sampled', width: 30},
-        {
-            field: 'help',
-            headerName: '?',
-            headerTooltip: 'Help',
-            width: 30,
-            cellRenderer: helpCell
-        },
-        {field: 'total_rows', width: 100},
-        {field: 'filtered_rows', headerName: 'filtered', width: 85},
-        {field: 'rows_shown', headerName: 'displayed', width: 85},
-        {field: 'columns', width: 75}
-    ];
-
-    const searchArg = buckarooState.quick_command_args?.search;
-    const searchStr = searchArg && searchArg.length === 1 ? searchArg[0] : '';
-
-    const rowData = [
-        {
-            total_rows: basicIntFormatter.format(dfMeta.total_rows),
-            columns: dfMeta.columns,
-            rows_shown: basicIntFormatter.format(dfMeta.rows_shown),
-            sampled: buckarooState.sampled || '0',
-            auto_clean: buckarooState.auto_clean || '0',
-            df_display: buckarooState.df_display,
-            filtered_rows: basicIntFormatter.format(dfMeta.filtered_rows),
-            post_processing: buckarooState.post_processing,
-            show_commands: buckarooState.show_commands || '0',
-            search: searchStr
-        }
-    ];
-
-    const gridOptions: GridOptions = {
-        suppressRowClickSelection: true
-    };
-
-    const gridRef = useRef<AgGridReact<unknown>>(null);
-    const defaultColDef = {
-        cellStyle: {textAlign: 'left'}
-    };
-    return (
-        <div className='statusBar'>
-            <div style={{height: 50}} className='theme-hanger ag-theme-alpine-dark'>
-                <AgGridReact
-                    ref={gridRef}
-                    onCellClicked={updateDict}
-                    gridOptions={gridOptions}
-                    defaultColDef={defaultColDef}
-                    rowData={rowData}
-                    columnDefs={columnDefs}
-                ></AgGridReact>
-            </div>
-        </div>
-    );
-}