dotdata_widgets 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/index.js +2 -1
  2. package/lib/hooks/index.js +1 -0
  3. package/lib/hooks/widget-model.js +1 -0
  4. package/lib/utils/widget/index.js +2 -0
  5. package/lib/utils/widget/widget-context-wrapper.js +9 -0
  6. package/lib/utils/widget/widget-model-context.js +9 -0
  7. package/lib/utils/widget/widget-model.js +24 -0
  8. package/lib/widgets/FeatureLeaderboardWidget.js +17 -31
  9. package/lib/widgets/FeatureSpaceWidget.js +19 -18
  10. package/lib/widgets/feature-leaderboard/FeatureLeaderboardView.js +5 -1
  11. package/lib/widgets/feature-space/FeatureSpaceView.js +4 -2
  12. package/package.json +24 -28
package/lib/hooks/index.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";
package/lib/hooks/widget-model.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";
package/lib/utils/widget/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from './widget-model-context';
2
+ export * from './widget-model';
package/lib/utils/widget/widget-context-wrapper.js ADDED
@@ -0,0 +1,9 @@
1
+ import React, { createContext, useContext } from 'react';
2
+ export const WidgetModelContext = createContext(undefined);
3
+ export function useWidgetModelContext() {
4
+ return useContext(WidgetModelContext);
5
+ }
6
+ export const withModelContext = (Component) => {
7
+ return (props) => (React.createElement(WidgetModelContext.Provider, { value: props.model },
8
+ React.createElement(Component, { ...props })));
9
+ };
package/lib/utils/widget/widget-model-context.js ADDED
@@ -0,0 +1,9 @@
1
+ import React, { createContext, useContext } from 'react';
2
+ export const WidgetModelContext = createContext(undefined);
3
+ export function useWidgetModelContext() {
4
+ return useContext(WidgetModelContext);
5
+ }
6
+ export const withWidgetModelContext = (Component) => {
7
+ return (props) => (React.createElement(WidgetModelContext.Provider, { value: props.model },
8
+ React.createElement(Component, { ...props })));
9
+ };
package/lib/utils/widget/widget-model.js ADDED
@@ -0,0 +1,24 @@
1
+ import { useEffect, useState } from 'react';
2
+ import { useWidgetModelContext } from './widget-model-context';
3
+ export function useModelState(name) {
4
+ const model = useWidgetModelContext();
5
+ const stringName = String(name);
6
+ const [state, setState] = useState(model?.get(stringName));
7
+ useModelEvent(`change:${stringName}`, model => {
8
+ setState(model.get(stringName));
9
+ }, [name]);
10
+ function updateModel(val, options) {
11
+ model?.set(name, val, options);
12
+ model?.save_changes();
13
+ }
14
+ return [state, updateModel];
15
+ }
16
+ export function useModelEvent(event, callback, deps) {
17
+ const model = useWidgetModelContext();
18
+ const dependencies = deps === undefined ? [model] : [...deps, model];
19
+ useEffect(() => {
20
+ const callbackWrapper = (e) => model && callback(model, e);
21
+ model?.on(event, callbackWrapper);
22
+ return () => void model?.unbind(event, callbackWrapper);
23
+ }, dependencies);
24
+ }
package/lib/widgets/FeatureLeaderboardWidget.js CHANGED
@@ -1,11 +1,16 @@
1
1
  // Copyright (c) dotdata
2
2
  // Distributed under the terms of the Modified BSD License.
3
3
  import React from 'react';
4
- import { ReactWidget, UseSignal } from '@jupyterlab/apputils';
4
+ import ReactDOM from 'react-dom';
5
5
  import { DOMWidgetModel, DOMWidgetView, } from '@jupyter-widgets/base';
6
- import { Signal } from '@lumino/signaling';
7
6
  import { MODULE_NAME, MODULE_VERSION } from '../version';
8
7
  import { FeatureLeaderboardView } from './feature-leaderboard/FeatureLeaderboardView';
8
+ import { withWidgetModelContext } from '../utils/widget';
9
+ const defaultState = {
10
+ value: { allEntries: [] },
11
+ confidence: 0.95,
12
+ max_collinearity: 0.95,
13
+ };
9
14
  export class FeatureLeaderboardWidgetModel extends DOMWidgetModel {
10
15
  defaults() {
11
16
  return {
@@ -16,9 +21,7 @@ export class FeatureLeaderboardWidgetModel extends DOMWidgetModel {
16
21
  _view_name: FeatureLeaderboardWidgetModel.view_name,
17
22
  _view_module: FeatureLeaderboardWidgetModel.view_module,
18
23
  _view_module_version: FeatureLeaderboardWidgetModel.view_module_version,
19
- value: { allEntries: [] },
20
- confidence: 0.95,
21
- max_collinearity: 0.95,
24
+ ...defaultState,
22
25
  };
23
26
  }
24
27
  }
@@ -32,32 +35,15 @@ FeatureLeaderboardWidgetModel.view_name = 'FeatureLeaderboardWidgetView'; // Set
32
35
  FeatureLeaderboardWidgetModel.view_module = MODULE_NAME; // Set to null if no view
33
36
  FeatureLeaderboardWidgetModel.view_module_version = MODULE_VERSION;
34
37
  export class FeatureLeaderboardWidgetView extends DOMWidgetView {
35
- constructor() {
36
- super(...arguments);
37
- this.signal = new Signal(this);
38
- this.luminoWidget = ReactWidget.create(React.createElement("div", { className: "dotdata-widget" },
39
- React.createElement(UseSignal, { signal: this.signal }, (_, signalData) => signalData?.value ? (React.createElement(FeatureLeaderboardView, { featureLeaderboard: signalData.value, maxCollinearity: signalData.max_collinearity, confidence: signalData.confidence, setConfidence: this.onValueChange('confidence'), setMaxCollinearity: this.onValueChange('max_collinearity') })) : null)));
40
- }
41
38
  render() {
42
- this.model.on('change:confidence', this.onModelChange, this);
43
- this.model.on('change:max_collinearity', this.onModelChange, this);
44
- this.model.on('change:value', this.onModelChange, this);
45
- setTimeout(() => {
46
- this.onModelChange();
47
- }, 1000);
48
- }
49
- onModelChange() {
50
- const { value, confidence, max_collinearity } = this.model.get_state(false);
51
- this.signal.emit({
52
- value,
53
- confidence,
54
- max_collinearity,
55
- });
56
- }
57
- onValueChange(propName) {
58
- return (value) => {
59
- this.model.set(propName, value);
60
- this.model.save_changes();
61
- };
39
+ try {
40
+ const component = React.createElement(withWidgetModelContext(FeatureLeaderboardView), {
41
+ model: this.model,
42
+ });
43
+ ReactDOM.render(component, this.el);
44
+ }
45
+ catch (err) {
46
+ console.error('FeatureSpaceWidgetView', err);
47
+ }
62
48
  }
63
49
  }
package/lib/widgets/FeatureSpaceWidget.js CHANGED
@@ -1,11 +1,18 @@
1
1
  // Copyright (c) dotdata
2
2
  // Distributed under the terms of the Modified BSD License.
3
3
  import React from 'react';
4
- import { ReactWidget, UseSignal } from '@jupyterlab/apputils';
4
+ import ReactDOM from 'react-dom';
5
5
  import { DOMWidgetModel, DOMWidgetView, } from '@jupyter-widgets/base';
6
- import { Signal } from '@lumino/signaling';
7
6
  import { MODULE_NAME, MODULE_VERSION } from '../version';
8
7
  import { FeatureSpaceView } from './feature-space/FeatureSpaceView';
8
+ import { withWidgetModelContext } from '../utils/widget';
9
+ const defaultState = {
10
+ value: {
11
+ explorationPaths: [],
12
+ filters: { types: [] },
13
+ aggregations: { types: [] },
14
+ },
15
+ };
9
16
  export class FeatureSpaceWidgetModel extends DOMWidgetModel {
10
17
  defaults() {
11
18
  return {
@@ -16,7 +23,7 @@ export class FeatureSpaceWidgetModel extends DOMWidgetModel {
16
23
  _view_name: FeatureSpaceWidgetModel.view_name,
17
24
  _view_module: FeatureSpaceWidgetModel.view_module,
18
25
  _view_module_version: FeatureSpaceWidgetModel.view_module_version,
19
- value: undefined,
26
+ ...defaultState,
20
27
  };
21
28
  }
22
29
  }
@@ -30,21 +37,15 @@ FeatureSpaceWidgetModel.view_name = 'FeatureSpaceWidgetView'; // Set to null if
30
37
  FeatureSpaceWidgetModel.view_module = MODULE_NAME; // Set to null if no view
31
38
  FeatureSpaceWidgetModel.view_module_version = MODULE_VERSION;
32
39
  export class FeatureSpaceWidgetView extends DOMWidgetView {
33
- constructor() {
34
- super(...arguments);
35
- this.signal = new Signal(this);
36
- this.luminoWidget = ReactWidget.create(React.createElement("div", { className: "dotdata-widget" },
37
- React.createElement(UseSignal, { signal: this.signal }, (_, signalData) => signalData?.value ? (React.createElement(FeatureSpaceView, { featureSpace: signalData?.value })) : null)));
38
- }
39
40
  render() {
40
- this.model.on('change:value', this.onModelChange, this);
41
- setTimeout(() => {
42
- this.onModelChange();
43
- }, 1000);
44
- }
45
- onModelChange() {
46
- this.signal.emit({
47
- value: this.model.get('value'),
48
- });
41
+ try {
42
+ const component = React.createElement(withWidgetModelContext(FeatureSpaceView), {
43
+ model: this.model,
44
+ });
45
+ ReactDOM.render(component, this.el);
46
+ }
47
+ catch (e) {
48
+ console.error('FeatureSpaceWidgetView', e);
49
+ }
49
50
  }
50
51
  }
package/lib/widgets/feature-leaderboard/FeatureLeaderboardView.js CHANGED
@@ -1,7 +1,11 @@
1
1
  import React from 'react';
2
+ import { useModelState } from '../../utils/widget';
2
3
  import { FeatureLeaderboardOverview } from './FeatureLeaderboardOverview';
3
4
  import { FeatureLeaderboardEntryItem } from './entry-item/FeatureLeaderboardEntryItem';
4
- export const FeatureLeaderboardView = ({ featureLeaderboard, setConfidence, confidence, maxCollinearity, setMaxCollinearity, }) => {
5
+ export const FeatureLeaderboardView = ({ model }) => {
6
+ const [featureLeaderboard] = useModelState('value');
7
+ const [confidence, setConfidence] = useModelState('confidence');
8
+ const [maxCollinearity, setMaxCollinearity] = useModelState('max_collinearity');
5
9
  const featureEntries = React.useMemo(() => filterFeatures(featureLeaderboard, maxCollinearity, confidence), [maxCollinearity, confidence, featureLeaderboard]);
6
10
  return (React.createElement(React.Fragment, null,
7
11
  React.createElement("h2", { className: "grey-label" }, "Feature Pipeline Overview:"),
package/lib/widgets/feature-space/FeatureSpaceView.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import React from 'react';
2
+ import { useModelState } from '../../utils/widget';
2
3
  import { FeatureSpaceDomainsDescriptions } from './FeatureSpaceDomainsDescriptions';
3
4
  import { FeatureExplorationPaths } from './FeatureExplorationPaths';
4
5
  export const FeatureSpaceView = props => {
6
+ const [featureSpace] = useModelState('value');
5
7
  return (React.createElement(React.Fragment, null,
6
8
  React.createElement("h2", { className: "grey-label" }, "Feature Space Overview:"),
7
- props.featureSpace.explorationPaths ? (React.createElement(FeatureExplorationPaths, { explorationPaths: props.featureSpace.explorationPaths })) : null,
8
- props.featureSpace.filters ? (React.createElement(FeatureSpaceDomainsDescriptions, { filters: props.featureSpace.filters, aggregations: props.featureSpace.aggregations })) : null));
9
+ featureSpace.explorationPaths ? (React.createElement(FeatureExplorationPaths, { explorationPaths: featureSpace.explorationPaths })) : null,
10
+ featureSpace.filters ? (React.createElement(FeatureSpaceDomainsDescriptions, { filters: featureSpace.filters, aggregations: featureSpace.aggregations })) : null));
9
11
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dotdata_widgets",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "A dotdata widget",
5
5
  "keywords": [
6
6
  "dotdata",
@@ -51,10 +51,9 @@
51
51
  },
52
52
  "dependencies": {
53
53
  "@fontsource/roboto": "^4.5.8",
54
- "@jupyter-widgets/base": "^1.1.10 || ^2 || ^3 || ^4 || ^5 || ^6",
55
- "@jupyterlab/application": "^3.5.2",
56
- "react": "18.2.0",
57
- "react-dom": "18.2.0",
54
+ "@jupyter-widgets/base": "^6.0.2",
55
+ "react": "17.0.2",
56
+ "react-dom": "17.0.2",
58
57
  "vega": "^5.22.1"
59
58
  },
60
59
  "devDependencies": {
@@ -62,41 +61,38 @@
62
61
  "@babel/preset-env": "^7.20.2",
63
62
  "@babel/preset-react": "^7.18.6",
64
63
  "@babel/preset-typescript": "^7.18.6",
65
- "@jupyter-widgets/base-manager": "^1.0.3",
66
- "@jupyterlab/builder": "^3.0.9",
67
- "@lumino/application": "^1.31.3",
68
- "@lumino/widgets": "^1.37.1",
69
- "@types/jest": "^26.0.24",
70
- "@types/react": "^18.0.27",
71
- "@types/react-dom": "18.0.10",
64
+ "@jupyterlab/builder": "^3.6.1",
65
+ "@types/jest": "^29.4.0",
66
+ "@types/react": "17.0.53",
67
+ "@types/react-dom": "17.0.18",
72
68
  "@types/webpack-env": "^1.18.0",
73
- "@typescript-eslint/eslint-plugin": "^3.10.1",
74
- "@typescript-eslint/parser": "^3.10.1",
75
- "acorn": "^7.4.1",
69
+ "@typescript-eslint/eslint-plugin": "^5.52.0",
70
+ "@typescript-eslint/parser": "^5.52.0",
71
+ "acorn": "^8.8.2",
76
72
  "babel-loader": "^9.1.2",
77
73
  "concurrently": "^7.6.0",
78
- "css-loader": "^3.6.0",
79
- "eslint": "^7.32.0",
80
- "eslint-config-prettier": "^6.15.0",
81
- "eslint-plugin-prettier": "^3.4.1",
74
+ "css-loader": "^6.7.3",
75
+ "eslint": "^8.34.0",
76
+ "eslint-config-prettier": "^8.6.0",
77
+ "eslint-plugin-prettier": "^4.2.1",
82
78
  "file-loader": "^6.2.0",
83
- "fs-extra": "^7.0.1",
79
+ "fs-extra": "^11.1.0",
84
80
  "identity-obj-proxy": "^3.0.0",
85
- "jest": "^26.6.3",
86
- "mkdirp": "^0.5.6",
81
+ "jest": "^29.4.2",
82
+ "mkdirp": "^2.1.3",
87
83
  "npm-run-all": "^4.1.5",
88
84
  "prettier": "^2.8.4",
89
- "rimraf": "^2.6.3",
90
- "source-map-loader": "^1.1.3",
91
- "style-loader": "^1.3.0",
92
- "ts-jest": "^26.5.6",
93
- "ts-loader": "^8.4.0",
85
+ "rimraf": "^4.1.2",
86
+ "source-map-loader": "^4.0.1",
87
+ "style-loader": "^3.3.1",
88
+ "ts-jest": "^29.0.5",
89
+ "ts-loader": "^9.4.2",
94
90
  "tsc-alias": "^1.8.2",
95
91
  "tsconfig-paths-webpack-plugin": "^4.0.0",
96
92
  "typescript": "~4.9.5",
97
93
  "url-loader": "^4.1.1",
98
94
  "webpack": "^5.69.1",
99
- "webpack-cli": "^4.10.0"
95
+ "webpack-cli": "^5.0.1"
100
96
  },
101
97
  "babel": {
102
98
  "presets": [