Skip to content

Commit

Permalink
frontend upgrades
Browse files Browse the repository at this point in the history
  • Loading branch information
@aschonfeld
aschonfeld committed Jul 18, 2023
1 parent 72935a7 commit e61c753
Show file tree
Hide file tree
Showing 116 changed files with 3,988 additions and 2,567 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1052,7 +1052,7 @@ The folowing screen shots are for a dataframe with the following data:
|Function|Description|Preview|
|:------:|:---------:|:-----:|
|**Remove Duplicate Columns**|Remove any columns that contain the same data as another and you can either keep the first, last or none of these columns that match this criteria. You can test which columns will be removed by clicking the "View Duplicates" button.|![](https://raw.githubusercontent.com/aschonfeld/dtale-media/master/images/duplicates/columns.png)|
|**Remove Duplicate Column Names**|Remove any columns with the same name (name comparison is case-insensitive) and you can either keep the first, last or none of these columns that match this criteria. You can test which columns will be removed by clicking the "View Duplicates" button.|![](https://raw.githubusercontent.com/aschonfeld/dtale-media/master/images/duplicates/columns_names.png)|
|**Remove Duplicate Column Names**|Remove any columns with the same name (name comparison is case-insensitive) and you can either keep the first, last or none of these columns that match this criteria. You can test which columns will be removed by clicking the "View Duplicates" button.|![](https://raw.githubusercontent.com/aschonfeld/dtale-media/master/images/duplicates/column_names.png)|
|**Remove Duplicate Rows**|Remove any rows from your dataframe where the values of a subset of columns are considered duplicates. You can choose to keep the first, last or none of the rows considered duplicated.|![](https://raw.githubusercontent.com/aschonfeld/dtale-media/master/images/duplicates/rows.png)|
|**Show Duplicates**|Break any duplicate rows (based on a subset of columns) out into another dataframe viewable in your D-Tale session. You can choose to view all duplicates or select specific groups based on the duplicated value.|![](https://raw.githubusercontent.com/aschonfeld/dtale-media/master/images/duplicates/show.png)|

Expand Down
2 changes: 2 additions & 0 deletions frontend/jest.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ module.exports = {
moduleNameMapper: {
'\\.(css|scss)$': '<rootDir>/config/styleMock.js',
axios: '<rootDir>/node_modules/axios/dist/node/axios.cjs',
'd3-cloud': '<rootDir>/node_modules/d3-cloud/index.js',
'^d3-(.*)$': '<rootDir>/node_modules/d3-$1/dist/d3-$1.js',
},
setupFiles: [testPolyfills],
setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
Expand Down
154 changes: 74 additions & 80 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,148 +31,142 @@
"private": true,
"license": "SEE LICENSE IN proprietary",
"devDependencies": {
"@babel/core": "7.20.12",
"@babel/eslint-parser": "7.19.1",
"@babel/preset-env": "7.20.2",
"@babel/preset-flow": "7.18.6",
"@babel/preset-react": "7.18.6",
"@babel/preset-typescript": "7.18.6",
"@babel/register": "7.18.9",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "13.4.0",
"@babel/core": "7.22.9",
"@babel/eslint-parser": "7.22.9",
"@babel/preset-env": "7.22.9",
"@babel/preset-flow": "7.22.5",
"@babel/preset-react": "7.22.5",
"@babel/preset-typescript": "7.22.5",
"@babel/register": "7.22.5",
"@testing-library/jest-dom": "5.17.0",
"@testing-library/react": "14.0.0",
"@testing-library/user-event": "14.4.3",
"@types/chroma-js": "2.1.4",
"@types/chroma-js": "2.4.0",
"@types/cross-spawn": "6.0.2",
"@types/jest": "29.2.5",
"@types/jest": "29.5.3",
"@types/numeral": "2.0.2",
"@types/plotly.js": "2.12.11",
"@types/plotly.js": "2.12.24",
"@types/prop-types": "15.7.5",
"@types/raf": "3.4.0",
"@types/react": "18.0.26",
"@types/react": "18.2.15",
"@types/react-color": "3.0.6",
"@types/react-dom": "18.0.10",
"@types/react-dom": "18.2.7",
"@types/react-redux": "7.1.25",
"@types/react-select": "5.0.1",
"@types/react-slider": "1.3.1",
"@types/react-syntax-highlighter": "15.5.6",
"@types/react-virtualized": "9.21.21",
"@types/react-syntax-highlighter": "15.5.7",
"@types/react-virtualized": "9.21.22",
"@types/reactcss": "1.2.6",
"@types/redux-mock-store": "^1.0.3",
"@types/resolve": "1.20.2",
"@types/styled-components": "5.1.26",
"@typescript-eslint/eslint-plugin": "5.48.1",
"@typescript-eslint/eslint-plugin-tslint": "5.48.1",
"@typescript-eslint/parser": "5.48.1",
"autoprefixer": "10.4.13",
"@typescript-eslint/eslint-plugin": "6.1.0",
"@typescript-eslint/eslint-plugin-tslint": "6.1.0",
"@typescript-eslint/parser": "6.1.0",
"autoprefixer": "10.4.14",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.1.0",
"babel-jest": "29.3.1",
"babel-loader": "9.1.2",
"babel-jest": "29.6.1",
"babel-loader": "9.1.3",
"clean-webpack-plugin": "4.0.0",
"cross-spawn": "7.0.3",
"css-loader": "6.7.3",
"eslint": "8.31.0",
"eslint-config-prettier": "8.6.0",
"css-loader": "6.8.1",
"eslint": "8.45.0",
"eslint-config-prettier": "8.8.0",
"eslint-plugin-babel": "5.3.1",
"eslint-plugin-flowtype": "8.0.3",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-jest": "27.2.1",
"eslint-plugin-jsdoc": "39.6.4",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jest": "27.2.3",
"eslint-plugin-jsdoc": "46.4.4",
"eslint-plugin-only-warn": "1.1.0",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-prettier": "5.0.0",
"eslint-plugin-promise": "6.1.1",
"eslint-plugin-react": "7.31.11",
"eslint-plugin-react": "7.32.2",
"exports-loader": "4.0.0",
"expose-loader": "4.0.0",
"expose-loader": "4.1.0",
"file-loader": "6.2.0",
"flow-bin": "0.196.3",
"flow-bin": "0.212.0",
"imports-loader": "4.0.1",
"jest": "29.3.1",
"jest-environment-jsdom": "29.3.1",
"jest-junit": "15.0.0",
"jest": "29.6.1",
"jest-environment-jsdom": "29.6.1",
"jest-junit": "16.0.0",
"jsinspect": "0.12.7",
"parallel-webpack": "2.6.0",
"postcss-loader": "7.0.2",
"postcss-nested": "6.0.0",
"prettier": "2.8.2",
"postcss-loader": "7.3.3",
"postcss-nested": "6.0.1",
"prettier": "3.0.0",
"raf": "3.4.1",
"react-docgen": "5.4.3",
"react-docgen": "6.0.2",
"react-select-event": "^5.5.1",
"react-test-renderer": "18.2.0",
"redux-devtools-extension": "2.13.9",
"redux-mock-store": "^1.5.4",
"regenerator-runtime": "0.13.11",
"resolve": "1.22.1",
"sass": "^1.60.0",
"sass-loader": "13.2.0",
"serialize-javascript": "6.0.0",
"style-loader": "3.3.1",
"terser": "^5.16.1",
"terser-webpack-plugin": "5.3.6",
"ts-jest": "29.0.3",
"ts-loader": "9.4.2",
"resolve": "1.22.2",
"sass": "^1.63.6",
"sass-loader": "13.3.2",
"serialize-javascript": "6.0.1",
"style-loader": "3.3.3",
"terser": "^5.19.1",
"terser-webpack-plugin": "5.3.9",
"ts-jest": "29.1.1",
"ts-loader": "9.4.4",
"tslint": "6.1.3",
"url-loader": "4.1.1",
"webpack": "5.76.0",
"webpack-cli": "5.0.1"
"webpack": "5.88.2",
"webpack-cli": "5.1.4"
},
"dependencies": {
"@blueprintjs/datetime": "4.4.8",
"@blueprintjs/datetime2": "^0.9.6",
"@fortawesome/fontawesome-free": "6.2.1",
"@reduxjs/toolkit": "^1.9.1",
"@sgratzl/chartjs-chart-boxplot": "4.1.0",
"@blueprintjs/datetime": "5.0.5",
"@fortawesome/fontawesome-free": "6.4.0",
"@reduxjs/toolkit": "^1.9.5",
"@sgratzl/chartjs-chart-boxplot": "4.2.4",
"any-promise": "1.3.0",
"axios": "1.2.2",
"axios": "1.4.0",
"babel-polyfill": "6.26.0",
"bootstrap": "5.2.3",
"chart.js": "4.1.2",
"chartjs-plugin-zoom": "2.0.0",
"bootstrap": "5.3.0",
"chart.js": "4.3.0",
"chartjs-plugin-zoom": "2.0.1",
"chroma-js": "2.4.2",
"create-react-class": "15.7.0",
"currency-symbol-map": "5.1.0",
"dom-helpers": "5.2.1",
"es6-object-assign": "1.1.0",
"es6-promise": "4.2.8",
"highlight.js": "11.7.0",
"i18next": "22.4.9",
"immutable": "4.2.2",
"highlight.js": "11.8.0",
"i18next": "23.2.11",
"immutable": "4.3.1",
"moment": "2.29.4",
"ntee": "2.0.0",
"numeral": "2.0.6",
"oboe": "2.1.5",
"plotly.js-geo-dist-min": "2.17.1",
"plotly.js-geo-dist-min": "2.24.3",
"postcss-cli": "10.1.0",
"re-resizable": "6.9.9",
"react": "18.2.0",
"react-addons-shallow-compare": "15.6.3",
"react-bootstrap": "2.7.0",
"react-bootstrap": "2.8.0",
"react-color": "2.19.3",
"react-dom": "18.2.0",
"react-draggable": "4.4.5",
"react-dropzone": "14.2.3",
"react-hotkeys": "2.0.0",
"react-i18next": "12.1.4",
"react-i18next": "13.0.2",
"react-motion": "0.5.2",
"react-redux": "8.0.5",
"react-select": "5.7.0",
"react-slider": "2.0.4",
"react-redux": "8.1.1",
"react-select": "5.7.4",
"react-slider": "2.0.6",
"react-syntax-highlighter": "15.5.0",
"react-virtualized": "9.22.3",
"react-wordcloud": "1.2.7",
"react-virtualized": "9.22.5",
"react-wordcloud": "https://github.com/ahmohamed/react-wordcloud",
"reactcss": "1.2.3",
"redux": "4.2.0",
"redux": "4.2.1",
"redux-thunk": "2.4.2",
"string.prototype.startswith": "1.0.0",
"styled-components": "5.3.6",
"typescript": "4.9.4",
"styled-components": "6.0.4",
"typescript": "5.1.6",
"uuid": "9.0.0",
"vis-data": "7.1.4",
"vis-network": "9.1.2"
},
"resolutions": {
"d3-array": "2.3.3",
"minimist": "1.2.7",
"postcss": "8.4.21"
"vis-data": "7.1.6",
"vis-network": "9.1.6"
}
}
4 changes: 2 additions & 2 deletions frontend/static/__tests__/chartUtils-test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ describe('chartUtils tests', () => {
({
controller: { _config: { selectedPoint: 0 } } as any as DatasetController,
data: [LINE_POINT.element],
} as ChartMeta),
}) as ChartMeta,
ctx: buildChartContext(),
} as any as Chart<'line'>;
plugin.afterDraw?.(chartInstance, {}, {});
Expand Down Expand Up @@ -93,7 +93,7 @@ describe('chartUtils tests', () => {
({
controller: { _config: { selectedPoint: 0 } } as any as DatasetController,
data: [LINE_POINT.element],
} as ChartMeta),
}) as ChartMeta,
ctx: buildChartContext(),
} as any as Chart<'line'>;
plugin.afterDraw?.(chartInstance, {}, {});
Expand Down
6 changes: 3 additions & 3 deletions frontend/static/__tests__/dtale/GridEventHandler-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ describe('RibbonDropdown', () => {

it('opens ribbon menu for first 5 pixels', async () => {
const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
setTimeoutSpy.mockImplementation((cb, ms) => ({} as NodeJS.Timeout));
setTimeoutSpy.mockImplementation((cb, ms) => ({}) as NodeJS.Timeout);
const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
const mainPanel = container.getElementsByClassName('main-panel-content')[0];
const myEvent = createEvent.mouseMove(mainPanel, { clientY: 5 });
Expand All @@ -98,7 +98,7 @@ describe('RibbonDropdown', () => {
it('hides ribbon menu outside of first 45 pixels', async () => {
await buildMock(undefined, { ribbonMenuOpen: true });
const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
setTimeoutSpy.mockImplementation((cb, ms) => ({} as NodeJS.Timeout));
setTimeoutSpy.mockImplementation((cb, ms) => ({}) as NodeJS.Timeout);
const mainPanel = container.getElementsByClassName('main-panel-content')[0];
const myEvent = createEvent.mouseMove(mainPanel, { clientY: 45 });
fireEvent(mainPanel, myEvent);
Expand All @@ -111,7 +111,7 @@ describe('RibbonDropdown', () => {
it('does not hide ribbon menu when dropdown is open', async () => {
buildMock(undefined, { ribbonMenuOpen: true, ribbonDropdown: { visible: true } });
const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
setTimeoutSpy.mockImplementation((cb, ms) => ({} as NodeJS.Timeout));
setTimeoutSpy.mockImplementation((cb, ms) => ({}) as NodeJS.Timeout);
const mainPanel = container.getElementsByClassName('main-panel-content')[0];
const myEvent = createEvent.mouseMove(mainPanel, { clientY: 45 });
await fireEvent(mainPanel, myEvent);
Expand Down
6 changes: 3 additions & 3 deletions frontend/static/__tests__/dtale/create/random-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,13 +116,13 @@ describe('CreateRandom', () => {
await fireEvent.click(screen.getByText('Date'));
});
await act(async () => {
await fireEvent.click(result.getElementsByClassName('bp4-popover2-target')[0]);
await fireEvent.click(result.getElementsByClassName('bp5-popover-target')[0]);
});
await act(async () => {
await fireEvent.change(result.getElementsByClassName('bp4-input')[0], { target: { value: '20000101' } });
await fireEvent.change(result.getElementsByClassName('bp5-input')[0], { target: { value: '20000101' } });
});
await act(async () => {
await fireEvent.change(result.getElementsByClassName('bp4-input')[1], { target: { value: '20000102' } });
await fireEvent.change(result.getElementsByClassName('bp5-input')[1], { target: { value: '20000102' } });
});
await act(async () => {
await fireEvent.click(result.getElementsByClassName('ico-check-box-outline-blank')[0]);
Expand Down
1 change: 1 addition & 0 deletions frontend/static/__tests__/dtale/formatting/Formatting.test.support.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export class Spies {
* Build the initial wrapper.
*
* @param colIdx the index of the column to open the menu of.
* @return main DOM element
*/
public async setupWrapper(colIdx: number): Promise<Element> {
const store = reduxUtils.createDtaleStore();
Expand Down
4 changes: 2 additions & 2 deletions frontend/static/__tests__/dtale/range/DataViewer-range-select-row-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,8 @@ describe('DataViewer tests', () => {
start: 1,
end: 1,
});
const cellOnRow2 = [...result.getElementsByClassName('cell')].find((c) =>
c.getAttribute('cell_idx')?.endsWith('2'),
const cellOnRow2 = [...result.getElementsByClassName('cell')].find(
(c) => c.getAttribute('cell_idx')?.endsWith('2'),
)!;
await act(async () => {
fireEvent.mouseOver(cellOnRow2, { shiftKey: true });
Expand Down
4 changes: 2 additions & 2 deletions frontend/static/__tests__/dtale/ribbon/RibbonDropdown-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,10 @@ describe('RibbonDropdown', () => {
hiddenProps?: Record<string, string>,
): Promise<void> => {
const rectSpy = jest.spyOn(HTMLDivElement.prototype, 'getBoundingClientRect');
rectSpy.mockImplementation(() => ({ left: 5, top: 5, width: 10, ...dims } as DOMRect));
rectSpy.mockImplementation(() => ({ left: 5, top: 5, width: 10, ...dims }) as DOMRect);
store = reduxUtils.createDtaleStore();
buildInnerHTML({ settings: '', predefinedFilters: PREDEFINED_FILTERS, ...hiddenProps }, store);
element = { getBoundingClientRect: () => ({ left: 5, top: 5, width: 10, ...dims } as DOMRect) } as HTMLElement;
element = { getBoundingClientRect: () => ({ left: 5, top: 5, width: 10, ...dims }) as DOMRect } as HTMLElement;
store.dispatch({ type: ActionType.OPEN_RIBBON_DROPDOWN, name, element });
wrapper = await act(async (): Promise<RenderResult> => {
const result = render(
Expand Down
10 changes: 5 additions & 5 deletions frontend/static/__tests__/filters/ColumnFilter-date-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,21 +28,21 @@ describe('ColumnFilter date tests', () => {
afterAll(() => spies.afterAll());

it('ColumnFilter date rendering', async () => {
expect(result.getElementsByClassName('bp4-input').length).toBeGreaterThan(0);
expect(result.getElementsByClassName('bp5-input').length).toBeGreaterThan(0);
await act(async () => {
await fireEvent.click(result.getElementsByClassName('ico-check-box-outline-blank')[0]);
});
expect(result.getElementsByClassName('bp4-disabled')).toHaveLength(2);
expect(result.getElementsByClassName('bp5-disabled')).toHaveLength(2);
await act(async () => {
await fireEvent.click(result.getElementsByClassName('ico-check-box')[0]);
});
expect(result.getElementsByClassName('bp4-disabled')).toHaveLength(0);
expect(result.getElementsByClassName('bp5-disabled')).toHaveLength(0);
await act(async () => {
await fireEvent.change(result.getElementsByClassName('bp4-input')[0], { target: { value: '20000102' } });
await fireEvent.change(result.getElementsByClassName('bp5-input')[0], { target: { value: '20000102' } });
});
expect(spies.saveSpy).toHaveBeenLastCalledWith('1', 'col4', { type: 'date', start: '20000102', end: '20000131' });
await act(async () => {
await fireEvent.change(result.getElementsByClassName('bp4-input')[1], { target: { value: '20000103' } });
await fireEvent.change(result.getElementsByClassName('bp5-input')[1], { target: { value: '20000103' } });
});
expect(spies.saveSpy).toHaveBeenLastCalledWith('1', 'col4', { type: 'date', start: '20000102', end: '20000103' });
});
Expand Down
2 changes: 1 addition & 1 deletion frontend/static/__tests__/filters/ColumnFilter-numeric-async-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ describe('ColumnFilter numeric tests', () => {
await act(async () => {
await fireEvent.click(result.getElementsByClassName('ico-check-box')[0]);
});
expect(result.getElementsByClassName('bp4-disabled')).toHaveLength(0);
expect(result.getElementsByClassName('bp5-disabled')).toHaveLength(0);
const asyncSelect = result.getElementsByClassName('Select')[0] as HTMLElement;
await act(async () => {
await selectEvent.openMenu(asyncSelect);
Expand Down
2 changes: 1 addition & 1 deletion frontend/static/__tests__/filters/ColumnFilter-string-async-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ describe('ColumnFilter string tests', () => {
await act(async () => {
await fireEvent.click(result.getElementsByClassName('ico-check-box')[0]);
});
expect(result.getElementsByClassName('bp4-disabled')).toHaveLength(0);
expect(result.getElementsByClassName('bp5-disabled')).toHaveLength(0);
const asyncSelect = result.getElementsByClassName('Select')[1] as HTMLElement;
await act(async () => {
await selectEvent.clearAll(asyncSelect);
Expand Down
4 changes: 2 additions & 2 deletions frontend/static/__tests__/iframe/DataViewer-base-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ describe('DataViewer iframe tests', () => {
window.open = openSpy;
(window as any).top = { location: { href: 'http://test.com' } };
(window as any).self = { location: { href: 'http://test/dtale/iframe' } };
jest.mock('@blueprintjs/datetime2', () => {
jest.mock('@blueprintjs/datetime', () => {
const { createMockComponent } = require('../mocks/createMockComponent');
return { DateInput2: createMockComponent('DateInput2') };
return { DateInput: createMockComponent('DateInput') };
});
});

Expand Down

0 comments on commit e61c753

Please sign in to comment.