buckaroo-js-core 0.8.0

package/src/buckaroo_js/components/Operations.tsx

@@ -0,0 +1,243 @@
+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

@@ -0,0 +1,190 @@
+// 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>
+    );
+}

package/src/buckaroo_js/components/WidgetTypes.tsx

@@ -0,0 +1,42 @@
+export interface DFMeta {
+    // static,
+    total_rows: number;
+    columns: number;
+    filtered_rows: number;
+    rows_shown: number;
+}
+export interface BuckarooOptions {
+    sampled: string[];
+    auto_clean: string[];
+    post_processing: string[];
+    df_display: string[]; // keys into Into df_display_args
+    show_commands: string[];
+}
+
+export type QuickAtom = number | string;
+export type QuickArg = QuickAtom[];
+export interface BuckarooState {
+    sampled: string | false;
+    auto_clean: string | false;
+    quick_command_args: Record<string, QuickArg>;
+    post_processing: string | false;
+    df_display: string; //at least one dataframe must always be displayed
+    show_commands: string | false;
+}
+
+export type BKeys = keyof BuckarooOptions;
+
+// df_dict: Record<string, DFWhole>;
+// df_meta: DFMeta;
+/*
+
+  df_dict: Record<string, DFWhole>;
+  df_meta: DFMeta;
+  operations: Operation[];
+  on_operations: (ops: Operation[]) => void;
+  operation_results: OperationResult;
+  commandConfig: CommandConfigT;
+  buckaroo_state: BuckarooState;
+  on_buckaroo_state: React.Dispatch<React.SetStateAction<BuckarooState>>;
+  buckaroo_options: BuckarooOptions;
+*/

package/src/buckaroo_js/components/bakedOperationDefaults.ts

@@ -0,0 +1,14 @@
+import {OperationDefaultArgs} from './OperationUtils';
+import {sym} from './utils';
+import {symDf, CommandConfigT, bakedArgSpecs} from './CommandUtils';
+
+export const bakedOperationDefaults: OperationDefaultArgs = {
+    dropcol: [sym('dropcol'), symDf, 'col'],
+    fillna: [sym('fillna'), symDf, 'col', 8],
+    resample: [sym('resample'), symDf, 'col', 'monthly', {}]
+};
+
+export const bakedCommandConfig: CommandConfigT = {
+    argspecs: bakedArgSpecs,
+    defaultArgs: bakedOperationDefaults
+};

package/src/buckaroo_js/components/utils.ts

@@ -0,0 +1,60 @@
+import _ from 'lodash';
+import {DFWhole} from './DFViewerParts/DFWhole';
+import {ColDef} from 'ag-grid-community';
+
+export type setDFFunc = (newDf: DFWhole) => void;
+
+export const requestDf = (url: string, setCallBack: setDFFunc) => {
+    const retPromise = fetch(url).then(async (response) => {
+        const tableDf = await response.json();
+        setCallBack(tableDf);
+    });
+    return retPromise;
+};
+
+export const sym = (symbolName: string) => {
+    return {symbol: symbolName};
+};
+
+export function replaceInArr<T>(arr: T[], old: T, subst: T): T[] {
+    return arr.map((item: T) => (item === old ? subst : item));
+}
+
+export function replaceAtIdx<T>(arr: T[], idx: number, subst: T): T[] {
+    return arr.map((item: T, innerIdx: number) => (innerIdx === idx ? subst : item));
+}
+
+export function replaceAtKey<T>(obj: Record<string, T>, key: string, subst: T): Record<string, T> {
+    const objCopy = _.clone(obj);
+    objCopy[key] = subst;
+    return objCopy;
+}
+
+export const objWithoutNull = (obj: Record<string, string>, extraStrips: string[] = []) =>
+    _.pickBy(obj, (x) => ![null, undefined, ...extraStrips].includes(x));
+export const updateAtMatch = (
+    cols: ColDef[],
+    key: string,
+    subst: Partial<ColDef>,
+    negative: Partial<ColDef>
+) => {
+    const retColumns = cols.map((x) => {
+        if (x.field === key) {
+            return {...x, ...subst};
+        } else {
+            return {...x, ...negative};
+        }
+    });
+    return retColumns;
+};
+
+export const replaceAtMatch = (cols: ColDef[], key: string, subst: Partial<ColDef>) => {
+    const retColumns = cols.map((x) => {
+        if (x.field === key) {
+            return {...x, ...subst};
+        } else {
+            return {...x};
+        }
+    });
+    return retColumns;
+};

package/src/buckaroo_js/extension.ts

@@ -0,0 +1,15 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+// Entry point for the notebook bundle containing custom model definitions.
+//
+// Setup notebook base URL
+//
+// Some static assets may be required by the custom widget javascript. The base
+// url for the notebook is not known at build time and is therefore computed
+// dynamically.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(window as any).__webpack_public_path__ =
+    document.querySelector('body')!.getAttribute('data-base-url') + 'nbextensions/buckaroo';
+
+export * from './index';

package/src/buckaroo_js/index.ts

@@ -0,0 +1,34 @@
+// Copyright (c) Bloomberg
+// Distributed under the terms of the Modified BSD License.
+
+import {ColumnsEditor, ColumnsEditorEx} from './components/ColumnsEditor';
+import {WidgetDCFCellExample} from './components/DCFCell';
+import {DFViewer, DFViewerEx} from './components/DFViewerParts/DFViewer';
+import {HistogramCell} from './components/DFViewerParts/HistogramCell';
+import {DependentTabs} from './components/DependentTabs';
+import {OperationViewer} from './components/Operations';
+//import { DFData, DFViewerConfig } from './components/DFViewerParts/DFWhole';
+import {StatusBar} from './components/StatusBar';
+
+// In case of classic Jupyter Notebook and embed, we provide the PhosphorJS CSS
+
+export * as bakedData from './baked_data/staticData';
+
+export const extraComponents = {
+    ColumnsEditor,
+    DependentTabs,
+    OperationViewer,
+    WidgetDCFCellExample,
+    ColumnsEditorEx,
+    DFViewer,
+    DFViewerEx,
+    StatusBar,
+    HistogramCell
+};
+
+/*
+export const typing = { 
+    DFData, 
+    DFViewerConfig
+ };
+*/