buckaroo-js-core 0.8.0

package/src/buckaroo_js/components/DCFCell.tsx

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

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

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