Skip to content

Commit

Permalink
hacked up version but it works throguh the widget, and it loads notab…
Browse files Browse the repository at this point in the history 
…ly faster
  • Loading branch information
@paddymul
paddymul committed Nov 4, 2024
1 parent abb2274 commit 23dff0e
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 28 deletions.
86 changes: 66 additions & 20 deletions buckaroo/buckaroo_widget.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@
from .pluggable_analysis_framework.analysis_management import DfStats
from .pluggable_analysis_framework.pluggable_analysis_framework import ColAnalysis

from .serialization_utils import EMPTY_DF_WHOLE, check_and_fix_df
from .dataflow.dataflow import CustomizableDataflow, StylingAnalysis, exception_protect
from .dataflow.dataflow_extras import (Sampling)
from .serialization_utils import EMPTY_DF_WHOLE, check_and_fix_df, pd_to_obj
from .dataflow.dataflow import CustomizableDataflow, StylingAnalysis
from .dataflow.dataflow_extras import (Sampling, exception_protect)
from .dataflow.autocleaning import PandasAutocleaning


Expand Down Expand Up @@ -166,31 +166,77 @@ class RawDFViewerWidget(BuckarooProjectWidget):
"""

#### DOMWidget Boilerplate
# _model_name = Unicode('InfiniteViewerModel').tag(sync=True)
# _view_name = Unicode('InfiniteViewerView').tag(sync=True)
_model_name = Unicode('DFViewerModel').tag(sync=True)
_view_name = Unicode('DFViewerView').tag(sync=True)
#_model_id = Unicode('paddy').tag(sync=True)
#END DOMWidget Boilerplate

def __init__(self, df):
super().__init__()
print("RawDFViewerWidget 177")
self.df = df

payloadArgs = Dict({'sourceName':'paddy', 'start':0, 'end':50}).tag(sync=True)
payloadResponse = Dict({'key': {'sourceName':'paddy', 'start':0, 'end':49},
'data': []}
).tag(sync=True)

# @exception_protect('payloadArgsHandler')
@observe('payloadArgs')

def _payloadArgsHandler(self, change):
start, end = self.payloadArgs['start'], self.payloadArgs['end']
print("payloadArgsHandler", start, end)

slice_df = pd_to_obj(self.df[start:end])
self.payloadResponse = {'key':self.payloadArgs, 'data':slice_df}


df_data = List([
{'a': 5 , 'b':20, 'c': 'Paddy'},
{'a': 58.2, 'b': 9, 'c': 'Margaret'}]).tag(sync=True)
"""
interface PayloadArgs {
sourceName: string;
start: number;
end: number
}
interface PayloadResponse {
key: PayloadArgs;
data: DFData;
}
"""

class InfiniteViewerWidget(BuckarooProjectWidget):
"""
A very raw way of instaniating just the DFViewer, not meant for use by enduers
df_viewer_config = Dict({
'column_config': [
{ 'col_name': 'a',
'displayer_args': { 'displayer': 'float', 'min_fraction_digits': 2, 'max_fraction_digits': 8 }},
{ 'col_name': 'b',
'displayer_args': { 'displayer': 'integer', 'min_digits': 3, 'max_digits': 5 }},
{ 'col_name': 'c',
'displayer_args': { 'displayer': 'string', 'min_digits': 3, 'max_digits': 5 }}],
'pinned_rows': [
{ 'primary_key_val': 'dtype', 'displayer_args': { 'displayer': 'obj' }},
{ 'primary_key_val': 'mean', 'displayer_args': { 'displayer': 'integer', 'min_digits': 3, 'max_digits': 5 }}]}
instead use DFViewer, or PolarsDFViewer which have better convience methods
"""

#### DOMWidget Boilerplate
# _model_name = Unicode('InfiniteViewerModel').tag(sync=True)
# _view_name = Unicode('InfiniteViewerView').tag(sync=True)
_model_name = Unicode('DFViewerModel').tag(sync=True)
_view_name = Unicode('DFViewerView').tag(sync=True)
_model_id = Unicode('paddy').tag(sync=True)
#END DOMWidget Boilerplate

def __init__(self, df):
self.df = df

payloadArgs = Dict({'sourceName':'paddy', 'start':0, 'end':50}).tag(sync=True)
payloadResponse = Dict({'key': {'sourceName':'paddy', 'start':0, 'end':49},
'data': []}
).tag(sync=True)

summary_stats_data = List([
{ 'index': 'mean', 'a': 28, 'b': 14, 'c': 'Padarget' },
{ 'index': 'dtype', 'a': 'float64', 'b': 'int64', 'c': 'object' }]).tag(sync=True)
# @exception_protect('payloadArgsHandler')
@observe('payloadArgs')

def _payloadArgsHandler(self, change):
start, end = self.payloadArgs['start'], self.payloadArgs['end']
print("payloadArgsHandler", start, end)

slice_df = pd_to_obj(self.df[start:end])
self.payloadResponse = {'key':self.payloadArgs, 'data':slice_df}

4 changes: 4 additions & 0 deletions js/components/DFViewerParts/DFViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ import {
} from '@ag-grid-community/core';
import { getCellRendererSelector } from './gridUtils';

import { ModuleRegistry } from '@ag-grid-community/core';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';

ModuleRegistry.registerModules([ ClientSideRowModelModule ]);
export type setColumFunc = (newCol: string) => void;

export function DFViewer({
Expand Down
35 changes: 28 additions & 7 deletions js/components/DFViewerParts/TableInfinite.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
import {
ColDef,
IDatasource,
INumberFilterParams,
ITextFilterParams,
ModuleRegistry,
} from "@ag-grid-community/core";
import { InfiniteRowModelModule } from "@ag-grid-community/infinite-row-model";
Expand Down Expand Up @@ -49,8 +51,20 @@ export const InfiniteViewer = ({ dataSource }: { dataSource: IDatasource }) => {
}
},
},
{ field: "athlete", minWidth: 150 },
{ field: "age" },
{ field: "athlete", minWidth: 150,
filterParams: {
filterOptions: ["contains", "startsWith", "endsWith"],
defaultOption: "startsWith",
} as ITextFilterParams,

},
{ field: "age",
filter: "agNumberColumnFilter",
filterParams: {
numAlwaysVisibleConditions: 2,
defaultJoinOperator: "OR",
} as INumberFilterParams,
},
{ field: "total" }
]);
console.log("setColumnDefs", setColumnDefs, useCallback);
Expand All @@ -59,6 +73,8 @@ export const InfiniteViewer = ({ dataSource }: { dataSource: IDatasource }) => {
flex: 1,
minWidth: 100,
//sortable: false,
filter: true,

};
}, []);

Expand Down Expand Up @@ -96,10 +112,15 @@ const getDs = (setPaState2: (pa: PayloadArgs) => void): IDatasource => {
const dsLoc: IDatasource = {
rowCount: undefined,
getRows: (params) => {
/*
console.log(
"asking for " + params.startRow + " to " + params.endRow
);
*/
console.log("params", params);
console.log("params.filter", params.filterModel)
console.log("params.filter", params.sortModel)

// At this point in your code, you would call the server.
// To make the demo look real, wait for 500ms before returning
const dsPayloadArgs = { sourceName: sourceName, start: params.startRow, end: params.endRow };
Expand Down Expand Up @@ -128,13 +149,13 @@ const getDs = (setPaState2: (pa: PayloadArgs) => void): IDatasource => {
}


export const PayloadGetter = ({ payloadArgs, on_PayloadArgs, payloadResponse }: {
export const InfiniteWrapper = ({ payloadArgs, on_payloadArgs, payloadResponse }: {
payloadArgs: PayloadArgs,
on_PayloadArgs: (pa: PayloadArgs) => void,
on_payloadArgs: (pa: PayloadArgs) => void,
payloadResponse: PayloadResponse,

}) => {
const ds = getDs(on_PayloadArgs);
const ds = getDs(on_payloadArgs);
respCache[getPayloadKey(payloadArgs)] = payloadResponse;
return <InfiniteViewer dataSource={ds} />
}
Expand All @@ -156,9 +177,9 @@ export const InfiniteEx = () => {
const resp: PayloadResponse = paToResp(paState);


return (<PayloadGetter
return (<InfiniteWrapper
payloadArgs={paState}
on_PayloadArgs={setPaState}
on_payloadArgs={setPaState}
payloadResponse={resp}

/>);
Expand Down
62 changes: 61 additions & 1 deletion js/dcefwidget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import "@ag-grid-community/styles/ag-theme-alpine.css";

import '../js/style/dcf-npm.css';
import { DFViewer } from './components/DFViewerParts/DFViewer';
import { InfiniteWrapper } from './components/DFViewerParts/TableInfinite';

export class DCEFWidgetModel extends DOMWidgetModel {
defaults(): Backbone.ObjectHash {
Expand Down Expand Up @@ -122,7 +123,66 @@ export class DFViewerView extends DOMWidgetView {
this.touch();
};
}
return React.createElement(DFViewer, props);
// return React.createElement(DFViewer, props);
return React.createElement(InfiniteWrapper, props);

//return React.createElement(WidgetDCFCell, props);
};

const root = ReactDOMClient.createRoot(this.el);
const componentEl = React.createElement(Component, {});
root.render(componentEl);
}
}

export class InfiniteViewerModel extends DOMWidgetModel {
defaults(): Backbone.ObjectHash {
return {
...super.defaults(),
_model_name: InfiniteViewerModel.model_name,
_model_module: InfiniteViewerModel.model_module,
_model_module_version: InfiniteViewerModel.model_module_version,
_view_name: InfiniteViewerModel.view_name,
_view_module: InfiniteViewerModel.view_module,
_view_module_version: InfiniteViewerModel.view_module_version,
};
}

static serializers: ISerializers = {
...DOMWidgetModel.serializers,
// Add any extra serializers here
};

static model_name = 'InfiniteViewerModel';
static model_module = MODULE_NAME;
static model_module_version = MODULE_VERSION;
static view_name = 'InfiniteViewerView'; // Set to null if no view
static view_module = MODULE_NAME; // Set to null if no view
static view_module_version = MODULE_VERSION;
}
export class InfiniteViewerView extends DOMWidgetView {
render(): void {
this.el.classList.add('dfviewer-widget');

const Component = () => {
const [_, setCounter] = useState(0);
const forceRerender = () => {
setCounter((x: number) => x + 1);
};
useEffect(() => {
this.listenTo(this.model, 'change', forceRerender);
}, []);

const props: any = {};
for (const key of Object.keys(this.model.attributes)) {
props[key] = this.model.get(key);
props['on_' + key] = (value: any) => {
this.model.set(key, value);
this.touch();
};
}
console.log(DFViewer);
return React.createElement(InfiniteWrapper, props);
//return React.createElement(WidgetDCFCell, props);
};

Expand Down

0 comments on commit 23dff0e

Please sign in to comment.