buckaroo-js-core 0.8.4 → 0.11.7

package/src/buckaroo_js/components/DCFCell.tsx

@@ -1,175 +0,0 @@
-import React, {useState, Dispatch, SetStateAction} from 'react';
-import _ from 'lodash';
-import {OperationResult, baseOperationResults} from './DependentTabs';
-import {ColumnsEditor} from './ColumnsEditor';
-import {
-    dfviewer_config_no_pinned,
-    realSummaryConfig,
-    realSummaryTableData,
-    summaryDfForTableDf,
-    tableDf
-} from '../baked_data/staticData';
-import {DFData, DFViewerConfig} from './DFViewerParts/DFWhole';
-import {DFViewer} from './DFViewerParts/DFViewer';
-import {StatusBar} from './StatusBar';
-import {BuckarooState} from './WidgetTypes';
-import {BuckarooOptions} from './WidgetTypes';
-import {DFMeta} from './WidgetTypes';
-import {CommandConfigT} from './CommandUtils';
-import {bakedCommandConfig} from './bakedOperationDefaults';
-import {Operation, bakedOperations} from './OperationUtils';
-
-export type CommandConfigSetterT = (setter: Dispatch<SetStateAction<CommandConfigT>>) => void;
-
-/*
-  Widget DCFCell is meant to be used with callback functions and passed values, not explicit http calls
-
-  TODO:add height settings to dfConfig rather than hardcoded.
- */
-export interface IDisplayArgs {
-    data_key: string;
-    df_viewer_config: DFViewerConfig;
-    summary_stats_key: string;
-}
-export function WidgetDCFCell({
-    df_data_dict,
-    df_display_args,
-    df_meta,
-    operations,
-    on_operations,
-    operation_results,
-    commandConfig,
-    buckaroo_state,
-    on_buckaroo_state,
-    buckaroo_options
-}: {
-    df_meta: DFMeta;
-    df_data_dict: Record<string, DFData>;
-    df_display_args: Record<string, IDisplayArgs>;
-    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;
-}) {
-    const [activeCol, setActiveCol] = useState('stoptime');
-
-    const cDisp = df_display_args[buckaroo_state.df_display];
-    if (cDisp === undefined) {
-        console.log('cDisp undefined', buckaroo_state.df_display, buckaroo_options.df_display);
-    } else {
-        //  console.log("cDisp", cDisp);
-    }
-    const dfData = df_data_dict[cDisp.data_key];
-    //console.log("dfData", dfData);
-    const summaryStatsData = df_data_dict[cDisp.summary_stats_key];
-
-    return (
-        <div className='dcf-root flex flex-col' style={{width: '100%', height: '100%'}}>
-            <div
-                className='orig-df flex flex-row'
-                style={{
-                    // height: '450px',
-                    overflow: 'hidden'
-                }}
-            >
-                <StatusBar
-                    dfMeta={df_meta}
-                    buckarooState={buckaroo_state}
-                    setBuckarooState={on_buckaroo_state}
-                    buckarooOptions={buckaroo_options}
-                />
-                <DFViewer
-                    df_data={dfData}
-                    df_viewer_config={cDisp.df_viewer_config}
-                    summary_stats_data={summaryStatsData}
-                    activeCol={activeCol}
-                    setActiveCol={setActiveCol}
-                />
-            </div>
-            {buckaroo_state.show_commands ? (
-                <ColumnsEditor
-                    df_viewer_config={cDisp.df_viewer_config}
-                    activeColumn={activeCol}
-                    operations={operations}
-                    setOperations={on_operations}
-                    operationResult={operation_results}
-                    commandConfig={commandConfig}
-                />
-            ) : (
-                <span></span>
-            )}
-        </div>
-    );
-}
-
-export function WidgetDCFCellExample() {
-    const dfm: DFMeta = {
-        columns: 5,
-        rows_shown: 20,
-        filtered_rows: 89,
-        total_rows: 877
-    };
-
-    const [bState, setBState] = useState<BuckarooState>({
-        auto_clean: '',
-        sampled: false,
-        show_commands: false,
-        df_display: 'main',
-        post_processing: '',
-        quick_command_args: {}
-    });
-
-    const bOptions: BuckarooOptions = {
-        auto_clean: ['', 'aggressive', 'conservative'],
-        df_display: ['main', 'realSummary', 'no_pinned'],
-        sampled: ['random'],
-        post_processing: ['', 'foo', 'bar'],
-        show_commands: ['on']
-        //    'summary_stats' : ['full', 'all', 'typing_stats']
-    };
-
-    const [operations, setOperations] = useState<Operation[]>(bakedOperations);
-
-    const bakedDfDisplay: Record<string, IDisplayArgs> = {
-        main: {
-            data_key: 'main',
-            df_viewer_config: tableDf.dfviewer_config,
-            summary_stats_key: 'all'
-        },
-        realSummary: {
-            data_key: 'empty',
-            df_viewer_config: realSummaryConfig,
-            summary_stats_key: 'real_summary'
-        },
-
-        no_pinned: {
-            data_key: 'main',
-            df_viewer_config: dfviewer_config_no_pinned,
-            summary_stats_key: 'all'
-        }
-    };
-
-    const df_data_dict = {
-        main: tableDf.data,
-        all: summaryDfForTableDf,
-        real_summary: realSummaryTableData,
-        empty: [{index: 'distinct_count'}]
-    };
-    return (
-        <WidgetDCFCell
-            df_meta={dfm}
-            df_display_args={bakedDfDisplay}
-            df_data_dict={df_data_dict}
-            buckaroo_options={bOptions}
-            buckaroo_state={bState}
-            on_buckaroo_state={setBState}
-            commandConfig={bakedCommandConfig}
-            operations={operations}
-            on_operations={setOperations}
-            operation_results={baseOperationResults}
-        />
-    );
-}

package/src/buckaroo_js/components/DFViewerParts/DFViewer.tsx

@@ -1,215 +0,0 @@
-import React, {useRef, CSSProperties, useState} from 'react';
-import _ from 'lodash';
-import {ComponentConfig, DFData, DFViewerConfig} from './DFWhole';
-
-import {dfToAgrid, extractPinnedRows} from './gridUtils';
-import {replaceAtMatch} from '../utils';
-import {AgGridReact} from 'ag-grid-react'; // the AG Grid React Component
-import {
-    DomLayoutType,
-    GridOptions,
-    SizeColumnsToContentStrategy,
-    SizeColumnsToFitProvidedWidthStrategy
-} from 'ag-grid-community';
-import {summaryDfForTableDf, tableDf} from '../../baked_data/staticData';
-
-import {getCellRendererSelector} from './gridUtils';
-
-export type setColumFunc = (newCol: string) => void;
-
-export function DFViewer({
-    df_data: df,
-    df_viewer_config,
-    summary_stats_data,
-    style,
-    activeCol,
-    setActiveCol
-}: {
-    df_data: DFData;
-    df_viewer_config: DFViewerConfig;
-    summary_stats_data?: DFData;
-    style?: CSSProperties;
-    activeCol?: string;
-    setActiveCol?: setColumFunc;
-}) {
-    /* = {
-    df: EmptyDf.data,
-    df_viewer_config: EmptyDf.dfviewer_config,
-    summary_stats_data: [],
-    style: { height: '300px' },
-    setActiveCol: () => null,
-  }*/
-    //console.log("dfviewer df_viewer_config", df_viewer_config);
-    //  console.log("summary_stats_data", summary_stats_data);
-    //  console.log("full_object", {'df':df, 'df_viewer_config':df_viewer_config, 'summary_stats_data': summary_stats_data})
-    const [agColsPure, agData] = dfToAgrid(df, df_viewer_config, summary_stats_data || []);
-
-    const styledColumns = replaceAtMatch(_.clone(agColsPure), activeCol || '___never', {
-        cellStyle: {background: 'var(--ag-range-selection-background-color-3)'}
-    });
-
-    const defaultColDef = {
-        sortable: true,
-        type: 'rightAligned',
-        cellRendererSelector: getCellRendererSelector(df_viewer_config.pinned_rows)
-    };
-
-    const gridOptions: GridOptions = {
-        rowSelection: 'single',
-
-        enableCellTextSelection: true,
-        onRowClicked: (event) => {
-            // console.log('A row was clicked')
-            // console.log("event", event)
-            const sel = document.getSelection();
-            if (sel === null) {
-                return;
-            }
-            const range = document.createRange();
-            const el = event?.event?.target;
-            if (el === null || el === undefined) {
-                return;
-            }
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //@ts-ignore
-            range.selectNodeContents(el);
-            sel.removeAllRanges();
-            sel.addRange(range);
-        },
-        tooltipShowDelay: 0,
-
-        // defaultColDef needs to be specifically passed in as a prop to the component, not defined here,
-        // otherwise updates aren't reactive
-
-        onCellClicked: (event) => {
-            const colName = event.column.getColId();
-            if (setActiveCol === undefined || colName === undefined) {
-                return;
-            } else {
-                setActiveCol(colName);
-            }
-        },
-        ...(df_viewer_config.extra_grid_config ? df_viewer_config.extra_grid_config : {})
-    };
-    const gridRef = useRef<AgGridReact<unknown>>(null);
-    const pinned_rows = df_viewer_config.pinned_rows;
-    const topRowData = summary_stats_data
-        ? extractPinnedRows(summary_stats_data, pinned_rows ? pinned_rows : [])
-        : [];
-
-    const getAutoSize = ():
-        | SizeColumnsToFitProvidedWidthStrategy
-        | SizeColumnsToContentStrategy => {
-        if (styledColumns.length < 1) {
-            return {
-                type: 'fitProvidedWidth',
-                width: window.innerWidth - 100
-            };
-        }
-        return {
-            type: 'fitCellContents'
-        };
-    };
-
-    const hs = heightStyle({
-        numRows: agData.length,
-        pinnedRowLen: df_viewer_config.pinned_rows.length,
-        location: window.location,
-        compC: df_viewer_config?.component_config,
-        rowHeight: df_viewer_config?.extra_grid_config?.rowHeight
-    });
-
-    return (
-        <div className={`df-viewer  ${hs.classMode} ${hs.inIframe}`}>
-            <div style={hs.applicableStyle} className='theme-hanger ag-theme-alpine-dark '>
-                <AgGridReact
-                    ref={gridRef}
-                    domLayout={hs.domLayout}
-                    defaultColDef={defaultColDef}
-                    gridOptions={gridOptions}
-                    rowData={agData}
-                    pinnedTopRowData={topRowData}
-                    columnDefs={_.cloneDeep(styledColumns)}
-                    autoSizeStrategy={getAutoSize()}
-                ></AgGridReact>
-            </div>
-        </div>
-    );
-}
-
-interface HeightStyleArgs {
-    numRows: number;
-    pinnedRowLen: number;
-    readonly location: Location;
-    rowHeight?: number;
-    compC?: ComponentConfig;
-}
-interface HeightStyleI {
-    domLayout: DomLayoutType;
-    inIframe: string;
-    classMode: 'short-mode' | 'regular-mode';
-    applicableStyle: CSSProperties;
-}
-
-export const heightStyle = (hArgs: HeightStyleArgs): HeightStyleI => {
-    const {numRows, pinnedRowLen, location, rowHeight, compC} = hArgs;
-    const isGoogleColab = location.host.indexOf('colab.googleusercontent.com') !== -1;
-
-    const inIframe = window.parent !== window;
-    const regularCompHeight = window.innerHeight / (compC?.height_fraction || 2);
-    const dfvHeight = compC?.dfvHeight || regularCompHeight;
-    const regularDivStyle = {height: dfvHeight};
-    const shortDivStyle = {minHeight: 50, maxHeight: dfvHeight};
-
-    const belowMinRows = numRows + pinnedRowLen < 10;
-
-    const shortMode = compC?.shortMode || (belowMinRows && rowHeight === undefined);
-    console.log(
-        'shortMode',
-        shortMode,
-        'dfvHeight',
-        dfvHeight,
-        'isGoogleColab',
-        isGoogleColab,
-        'inIframe',
-        inIframe
-    );
-    const inIframeClass = inIframe ? 'inIframe' : '';
-    if (isGoogleColab || inIframe) {
-        return {
-            classMode: 'regular-mode',
-            domLayout: 'normal',
-            applicableStyle: {height: 500},
-            inIframe: inIframeClass
-        };
-    }
-    const domLayout: DomLayoutType = compC?.layoutType || (shortMode ? 'autoHeight' : 'normal');
-    const applicableStyle = shortMode ? shortDivStyle : regularDivStyle;
-    const classMode = shortMode ? 'short-mode' : 'regular-mode';
-    return {
-        classMode,
-        domLayout,
-        applicableStyle,
-        inIframe: inIframeClass
-    };
-
-    /*
-  ab = window.location.host;
- "cskfus796ts-496ff2e9c6d22116-0-colab.googleusercontent.com"
- bc = window.location.pathname
- "/outputframe.html" 
-*/
-};
-
-export function DFViewerEx() {
-    const [activeCol, setActiveCol] = useState('tripduration');
-    return (
-        <DFViewer
-            df_data={tableDf.data}
-            df_viewer_config={tableDf.dfviewer_config}
-            summary_stats_data={summaryDfForTableDf}
-            activeCol={activeCol}
-            setActiveCol={setActiveCol}
-        />
-    );
-}

package/src/buckaroo_js/components/DFViewerParts/DFWhole.ts

@@ -1,190 +0,0 @@
-// I'm not sure about adding underlying types too
-
-import {ColDef, GridOptions} from 'ag-grid-community';
-import _ from 'lodash';
-
-type AGGrid_ColDef = ColDef;
-
-export interface ObjDisplayerA {
-    displayer: 'obj';
-    max_length?: number;
-}
-export interface BooleanDisplayerA {
-    displayer: 'boolean';
-}
-export interface StringDisplayerA {
-    displayer: 'string';
-    max_length?: number;
-}
-export interface FloatDisplayerA {
-    displayer: 'float';
-    min_fraction_digits: number;
-    max_fraction_digits: number;
-}
-
-export interface DatetimeDefaultDisplayerA {
-    displayer: 'datetimeDefault';
-}
-export interface IntegerDisplayerA {
-    displayer: 'integer';
-    min_digits: number;
-    max_digits: number;
-}
-
-export interface DatetimeLocaleDisplayerA {
-    displayer: 'datetimeLocaleString';
-    locale: 'en-US' | 'en-GB' | 'en-CA' | 'fr-FR' | 'es-ES' | 'de-DE' | 'ja-JP';
-    args: Intl.DateTimeFormatOptions;
-}
-
-// Used DisplayerA instead of FormatterArgs,  Displayer makes sense from the python side
-// python doesn't care that histogram requires a cellRenderer and Integer only changes the formatter
-export type FormatterArgs =
-    | ObjDisplayerA
-    | BooleanDisplayerA
-    | StringDisplayerA
-    | FloatDisplayerA
-    | DatetimeDefaultDisplayerA
-    | DatetimeLocaleDisplayerA
-    | IntegerDisplayerA;
-
-export interface HistogramDisplayerA {
-    displayer: 'histogram';
-}
-
-export interface LinkifyDisplayerA {
-    displayer: 'linkify';
-}
-export interface BooleanCheckboxDisplayerA {
-    displayer: 'boolean_checkbox';
-}
-
-export interface Base64PNGImageDisplayerA {
-    displayer: 'Base64PNGImageDisplayer';
-}
-
-export interface SVGDisplayerA {
-    displayer: 'SVGDisplayer';
-}
-
-export type CellRendererArgs =
-    | HistogramDisplayerA
-    | LinkifyDisplayerA
-    | BooleanCheckboxDisplayerA
-    | Base64PNGImageDisplayerA
-    | SVGDisplayerA;
-
-export type DisplayerArgs = FormatterArgs | CellRendererArgs;
-
-export const cellRendererDisplayers = [
-    'histogram',
-    'linkify',
-    'Base64PNGImageDisplayer',
-    'SVGDisplayer'
-];
-
-//ColorMapRules
-export interface ColorMapRules {
-    color_rule: 'color_map';
-    map_name: 'BLUE_TO_YELLOW' | 'DIVERGING_RED_WHITE_BLUE';
-    //optional, the column to base the ranges on.  the proper histogram_bins must still be sent in for that column
-    val_column?: string;
-}
-
-//if exist_column is not null,  set cell style to condtional_color... used for highlighting changed values or errored_rows
-export interface ColorWhenNotNullRules {
-    color_rule: 'color_not_null';
-    conditional_color: string | 'red';
-    exist_column: string;
-}
-
-export interface ColorFromColumn {
-    color_rule: 'color_from_column';
-    col_name: string;
-}
-
-export type ColorMappingConfig = ColorMapRules | ColorWhenNotNullRules | ColorFromColumn;
-
-//TooltipRules
-export interface SimpleTooltip {
-    tooltip_type: 'simple';
-    val_column: string;
-}
-
-export interface SummarySeriesTooltip {
-    tooltip_type: 'summary_series';
-}
-
-export type TooltipConfig = SimpleTooltip | SummarySeriesTooltip; //more to be added
-
-export type ColumnConfig = {
-    col_name: string;
-    displayer_args: DisplayerArgs;
-    color_map_config?: ColorMappingConfig;
-    tooltip_config?: TooltipConfig;
-    ag_grid_specs?: AGGrid_ColDef;
-};
-
-export type PinnedRowConfig = {
-    primary_key_val: string;
-    displayer_args: DisplayerArgs;
-    //used to render index column values with string not the specified displayer, otherwise the column will be listed as NaN or blank
-    //by default the "index" column is always rendered with "obj"
-    default_renderer_columns?: string[];
-};
-
-export type ComponentConfig = {
-    height_fraction?: number;
-    // temporary debugging props
-    dfvHeight?: number;
-    layoutType?: 'autoHeight' | 'normal';
-    shortMode?: boolean;
-};
-
-export interface DFViewerConfig {
-    pinned_rows: PinnedRowConfig[];
-    column_config: ColumnConfig[];
-    extra_grid_config?: GridOptions;
-    component_config?: ComponentConfig;
-}
-
-export type DFDataRow = Record<
-    string,
-    string | number | boolean | any[] | Record<string, any> | null
->;
-
-export type DFData = DFDataRow[];
-
-/*
-When I want to start tagging metadata onto DFData
-export interface DFData {
-  rows: DFDataRow[];
-  //data_meta expansion point for typing info about the data as needed by non-display stuff
-  // typing,  sorting, null handling I'm not sure about it
-};
-*/
-
-export interface DFWhole {
-    dfviewer_config: DFViewerConfig;
-    data: DFData;
-}
-
-export const EmptyDf: DFWhole = {
-    dfviewer_config: {
-        pinned_rows: [],
-        column_config: []
-    },
-    data: []
-};
-
-//actually SDFT is summary stats transposed to be useful
-// SDFT[col][stat_name]
-// SDFT really only needs histogramBins and histogramLogBins and...? at this point
-//type SDFT = any;
-
-export interface SDFMeasure {
-    histogram_bins: number[];
-    histogram_log_bins: number[];
-}
-
-export type SDFT = Record<string, SDFMeasure>;