dotdata_widgets 0.1.0 → 0.1.1

package/lib/plugin.js

@@ -1,50 +1,28 @@
-"use strict";
 // Copyright (c) dotdata
 // Distributed under the terms of the Modified BSD License.
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const base_1 = require("@jupyter-widgets/base");
-const widgetExports = __importStar(require("./widget"));
-const version_1 = require("./version");
+import { IJupyterWidgetRegistry } from '@jupyter-widgets/base';
+import * as widgetExports from './widgets';
+import { MODULE_NAME, MODULE_VERSION } from './version';
 const EXTENSION_ID = 'dotdata_widgets:plugin';
 /**
  * The example plugin.
  */
 const examplePlugin = {
     id: EXTENSION_ID,
-    requires: [base_1.IJupyterWidgetRegistry],
+    requires: [IJupyterWidgetRegistry],
     activate: activateWidgetExtension,
     autoStart: true,
 };
 // the "as unknown as ..." typecast above is solely to support JupyterLab 1
 // and 2 in the same codebase and should be removed when we migrate to Lumino.
-exports.default = examplePlugin;
+export default examplePlugin;
 /**
  * Activate the widget extension.
  */
 function activateWidgetExtension(app, registry) {
     registry.registerWidget({
-        name: version_1.MODULE_NAME,
-        version: version_1.MODULE_VERSION,
+        name: MODULE_NAME,
+        version: MODULE_VERSION,
         exports: widgetExports,
     });
 }
-//# sourceMappingURL=plugin.js.map

package/lib/utils/asserations.js

@@ -0,0 +1,5 @@
+export function assertIsSet(obj, message) {
+    if (obj === undefined || obj === null) {
+        throw new Error(message ?? `Expected ${obj} to be defined`);
+    }
+}

package/lib/utils/index.js

@@ -0,0 +1,3 @@
+export * from './asserations';
+export * from './object';
+export * from './localize';

package/lib/utils/localize.js

@@ -0,0 +1,14 @@
+import { isSet } from './object';
+const numberDefaultFormatter = new Intl.NumberFormat(navigator.language, {
+    maximumFractionDigits: 3,
+    useGrouping: false,
+});
+export var Localize;
+(function (Localize) {
+    function formatNumber(value, unsetSymbol) {
+        return isSet(value)
+            ? numberDefaultFormatter.format(value)
+            : unsetSymbol ?? '';
+    }
+    Localize.formatNumber = formatNumber;
+})(Localize || (Localize = {}));

package/lib/utils/object/extract-property.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function extractProperty(property) {
+    return function extractFrom(source) {
+        return source[property];
+    };
+}

package/lib/utils/object/index.js

@@ -0,0 +1,2 @@
+export * from './is-set';
+export * from './extract-property';

package/lib/utils/object/is-set.js

@@ -0,0 +1,6 @@
+export function isSet(obj) {
+    return obj !== undefined && obj !== null;
+}
+export function isNotSet(obj) {
+    return obj === undefined || obj === null;
+}

package/lib/version.js

@@ -1,8 +1,5 @@
-"use strict";
 // Copyright (c) dotdata
 // Distributed under the terms of the Modified BSD License.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MODULE_NAME = exports.MODULE_VERSION = void 0;
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -13,9 +10,8 @@ const data = require('../package.json');
  * The html widget manager assumes that this is the same as the npm package
  * version number.
  */
-exports.MODULE_VERSION = data.version;
+export const MODULE_VERSION = data.version;
 /*
  * The current package name.
  */
-exports.MODULE_NAME = data.name;
-//# sourceMappingURL=version.js.map
+export const MODULE_NAME = data.name;

package/lib/widgets/FeatureLeaderboardWidget.js

@@ -0,0 +1,63 @@
+// Copyright (c) dotdata
+// Distributed under the terms of the Modified BSD License.
+import React from 'react';
+import { ReactWidget, UseSignal } from '@jupyterlab/apputils';
+import { DOMWidgetModel, DOMWidgetView, } from '@jupyter-widgets/base';
+import { Signal } from '@lumino/signaling';
+import { MODULE_NAME, MODULE_VERSION } from '../version';
+import { FeatureLeaderboardView } from './feature-leaderboard/FeatureLeaderboardView';
+export class FeatureLeaderboardWidgetModel extends DOMWidgetModel {
+    defaults() {
+        return {
+            ...super.defaults(),
+            _model_name: FeatureLeaderboardWidgetModel.model_name,
+            _model_module: FeatureLeaderboardWidgetModel.model_module,
+            _model_module_version: FeatureLeaderboardWidgetModel.model_module_version,
+            _view_name: FeatureLeaderboardWidgetModel.view_name,
+            _view_module: FeatureLeaderboardWidgetModel.view_module,
+            _view_module_version: FeatureLeaderboardWidgetModel.view_module_version,
+            value: { allEntries: [] },
+            confidence: 0.95,
+            max_collinearity: 0.95,
+        };
+    }
+}
+FeatureLeaderboardWidgetModel.serializers = {
+    ...DOMWidgetModel.serializers,
+};
+FeatureLeaderboardWidgetModel.model_name = 'FeatureLeaderboardWidgetModel';
+FeatureLeaderboardWidgetModel.model_module = MODULE_NAME;
+FeatureLeaderboardWidgetModel.model_module_version = MODULE_VERSION;
+FeatureLeaderboardWidgetModel.view_name = 'FeatureLeaderboardWidgetView'; // Set to null if no view
+FeatureLeaderboardWidgetModel.view_module = MODULE_NAME; // Set to null if no view
+FeatureLeaderboardWidgetModel.view_module_version = MODULE_VERSION;
+export class FeatureLeaderboardWidgetView extends DOMWidgetView {
+    constructor() {
+        super(...arguments);
+        this.signal = new Signal(this);
+        this.luminoWidget = ReactWidget.create(React.createElement("div", { className: "dotdata-widget" },
+            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)));
+    }
+    render() {
+        this.model.on('change:confidence', this.onModelChange, this);
+        this.model.on('change:max_collinearity', this.onModelChange, this);
+        this.model.on('change:value', this.onModelChange, this);
+        setTimeout(() => {
+            this.onModelChange();
+        }, 1000);
+    }
+    onModelChange() {
+        const { value, confidence, max_collinearity } = this.model.get_state(false);
+        this.signal.emit({
+            value,
+            confidence,
+            max_collinearity,
+        });
+    }
+    onValueChange(propName) {
+        return (value) => {
+            this.model.set(propName, value);
+            this.model.save_changes();
+        };
+    }
+}

package/lib/widgets/FeatureSpaceWidget.js

@@ -0,0 +1,50 @@
+// Copyright (c) dotdata
+// Distributed under the terms of the Modified BSD License.
+import React from 'react';
+import { ReactWidget, UseSignal } from '@jupyterlab/apputils';
+import { DOMWidgetModel, DOMWidgetView, } from '@jupyter-widgets/base';
+import { Signal } from '@lumino/signaling';
+import { MODULE_NAME, MODULE_VERSION } from '../version';
+import { FeatureSpaceView } from './feature-space/FeatureSpaceView';
+export class FeatureSpaceWidgetModel extends DOMWidgetModel {
+    defaults() {
+        return {
+            ...super.defaults(),
+            _model_name: FeatureSpaceWidgetModel.model_name,
+            _model_module: FeatureSpaceWidgetModel.model_module,
+            _model_module_version: FeatureSpaceWidgetModel.model_module_version,
+            _view_name: FeatureSpaceWidgetModel.view_name,
+            _view_module: FeatureSpaceWidgetModel.view_module,
+            _view_module_version: FeatureSpaceWidgetModel.view_module_version,
+            value: undefined,
+        };
+    }
+}
+FeatureSpaceWidgetModel.serializers = {
+    ...DOMWidgetModel.serializers,
+};
+FeatureSpaceWidgetModel.model_name = 'FeatureSpaceWidgetModel';
+FeatureSpaceWidgetModel.model_module = MODULE_NAME;
+FeatureSpaceWidgetModel.model_module_version = MODULE_VERSION;
+FeatureSpaceWidgetModel.view_name = 'FeatureSpaceWidgetView'; // Set to null if no view
+FeatureSpaceWidgetModel.view_module = MODULE_NAME; // Set to null if no view
+FeatureSpaceWidgetModel.view_module_version = MODULE_VERSION;
+export class FeatureSpaceWidgetView extends DOMWidgetView {
+    constructor() {
+        super(...arguments);
+        this.signal = new Signal(this);
+        this.luminoWidget = ReactWidget.create(React.createElement("div", { className: "dotdata-widget" },
+            React.createElement(UseSignal, { signal: this.signal }, (_, signalData) => signalData?.value ? (React.createElement(FeatureSpaceView, { featureSpace: signalData?.value })) : null)));
+    }
+    render() {
+        this.model.on('change:value', this.onModelChange, this);
+        setTimeout(() => {
+            this.onModelChange();
+        }, 1000);
+    }
+    onModelChange() {
+        this.signal.emit({
+            value: this.model.get('value'),
+        });
+    }
+}

package/lib/widgets/feature-leaderboard/FeatureLeaderboardEntries.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Accordion, AccordionHeader, AccordionDetails, } from '../../components/accordion';
+import { FeatureExplanation } from '../../feature-descriptor/feature-explanation/FeatureExplanation';
+import { FeatureLeaderboardEntryItem } from './entry-item/FeatureLeaderboardEntryItem';
+export const FeatureLeaderboardEntries = ({ entriesGroups }) => {
+    return (React.createElement(React.Fragment, null, entriesGroups.map((entriesGroup, groupIdx) => (React.createElement(Accordion, { key: groupIdx, collapsedDetailsStyle: { padding: '0' }, expandedDetailsStyle: { padding: '0' }, expandedHeaderStyle: { background: '#F0F0F0' }, initialState: true },
+        React.createElement(AccordionHeader, null,
+            React.createElement(FeatureExplanation, { explanationBlocks: entriesGroup[0].feature.explanation.tokens })),
+        React.createElement(AccordionDetails, null, entriesGroup.map(entry => (React.createElement(FeatureLeaderboardEntryItem, { key: entry.feature.id, featureEntry: entry })))))))));
+};

package/lib/widgets/feature-leaderboard/FeatureLeaderboardOverview.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Input } from '../../components/input';
+const sliderRowStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+};
+const maxCollinearityTooltip = 'Maximum correlation of any two features on the list';
+const confidenceTooltip = 'The probability that a feature is better than a random feature';
+export const FeatureLeaderboardOverview = ({ confidence, setConfidence, maxCollinearity, setMaxCollinearity }) => {
+    return (React.createElement("div", { style: { display: 'flex', gap: '40px', flexWrap: 'wrap' } },
+        React.createElement("label", { style: sliderRowStyle, htmlFor: "maxCollinearitySlider" },
+            React.createElement("span", { className: "grey-label label-bold", title: maxCollinearityTooltip }, "Max collinearity:"),
+            React.createElement(Input, { id: "maxCollinearitySlider", type: "range", min: 0.0, max: 1.0, step: 0.01, list: "sliderEdgeValues", value: maxCollinearity, onValueChange: v => setMaxCollinearity(Number(v)) }),
+            React.createElement(Input, { inputSize: "small", type: "number", min: 0.0, max: 1.0, step: 0.01, value: maxCollinearity, onValueChange: v => setMaxCollinearity(Number(v)) })),
+        React.createElement("label", { style: sliderRowStyle, htmlFor: "confidenceSlider" },
+            React.createElement("span", { className: "grey-label label-bold", title: confidenceTooltip }, "Confidence:"),
+            React.createElement(Input, { id: "confidenceSlider", type: "range", min: 0.0, max: 1.0, step: 0.01, list: "sliderEdgeValues", value: confidence, onValueChange: v => setConfidence(Number(v)) }),
+            React.createElement(Input, { inputSize: "small", type: "number", min: 0.0, max: 1.0, step: 0.01, value: confidence, onValueChange: v => setConfidence(Number(v)) }))));
+};

package/lib/widgets/feature-leaderboard/FeatureLeaderboardView.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { FeatureLeaderboardOverview } from './FeatureLeaderboardOverview';
+import { FeatureLeaderboardEntryItem } from './entry-item/FeatureLeaderboardEntryItem';
+export const FeatureLeaderboardView = ({ featureLeaderboard, setConfidence, confidence, maxCollinearity, setMaxCollinearity, }) => {
+    const featureEntries = React.useMemo(() => filterFeatures(featureLeaderboard, maxCollinearity, confidence), [maxCollinearity, confidence, featureLeaderboard]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("h2", { className: "grey-label" }, "Feature Pipeline Overview:"),
+        React.createElement(FeatureLeaderboardOverview, { confidence: confidence, setConfidence: setConfidence, maxCollinearity: maxCollinearity, setMaxCollinearity: setMaxCollinearity }),
+        React.createElement("br", null),
+        featureEntries.map(featureEntry => (React.createElement(FeatureLeaderboardEntryItem, { key: featureEntry.feature.id, featureEntry: featureEntry })))));
+};
+function filterFeatures(featureLeaderboard, maxCollinearity, confidence) {
+    const fulfillCollinearity = (entry) => entry.maxAbsCorrelationOfSimplerFeature < maxCollinearity;
+    const fulfillNoise = (entry) => entry.signalConfidence >= confidence;
+    return featureLeaderboard.allEntries
+        .flat()
+        .filter(fulfillCollinearity)
+        .filter(fulfillNoise);
+}

package/lib/widgets/feature-leaderboard/entry-item/FeatureLeaderboardEntryDetails.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FeatureStatisticsTable, FeatureDistributionChart, FeatureCorrelatedFeaturesTable, } from '../../../feature-descriptor/feature-details';
+export const FeatureLeaderboardEntryDetails = ({ entry }) => {
+    return (React.createElement("div", null,
+        React.createElement("div", { style: { display: 'flex', gap: '50px' } },
+            React.createElement("div", { className: "feature-metrics", style: { flex: 3 } },
+                React.createElement("h3", { className: "grey-label" }, "Feature Statistics:"),
+                React.createElement(FeatureStatisticsTable, { statistics: entry.stats })),
+            React.createElement("div", { className: "feature-histogram", style: { flex: 1 } },
+                React.createElement("h3", { className: "grey-label" }, "Feature Distribution:"),
+                React.createElement(FeatureDistributionChart, { histogram: entry.histogram }))),
+        React.createElement("div", { className: "correlated-features" },
+            React.createElement("h3", { className: "grey-label" }, "Correlated Features:"),
+            React.createElement(FeatureCorrelatedFeaturesTable, { correlatedFeatures: entry.topCorrelatedFeatures }))));
+};

package/lib/widgets/feature-leaderboard/entry-item/FeatureLeaderboardEntryItem.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Accordion, AccordionHeader, AccordionDetails, } from '../../../components/accordion';
+import { FeatureExplanation } from '../../../feature-descriptor/feature-explanation/FeatureExplanation';
+import { FeatureLeaderboardEntryDetails } from './FeatureLeaderboardEntryDetails';
+const featureNameLabelStyle = {
+    color: 'var(--c-grey-600)',
+    display: 'inline-block',
+    minWidth: '5rem',
+};
+export const FeatureLeaderboardEntryItem = ({ featureEntry }) => {
+    return (React.createElement(Accordion, { expandedDetailsStyle: {
+            borderBottom: '1px solid var(--c-grey-500)',
+            paddingBlockEnd: '30px',
+        } },
+        React.createElement(AccordionHeader, null,
+            React.createElement("span", { className: "label-bold", style: featureNameLabelStyle }, featureEntry.feature.id),
+            React.createElement(FeatureExplanation, { key: featureEntry.feature.id, explanationBlocks: featureEntry.feature.explanation.tokens })),
+        React.createElement(AccordionDetails, null,
+            React.createElement(FeatureLeaderboardEntryDetails, { entry: featureEntry }))));
+};

package/lib/widgets/feature-space/FeatureExplorationPaths.js

@@ -0,0 +1,37 @@
+import React from 'react';
+const FeatureExplorationPathItem = props => {
+    return (React.createElement("div", null,
+        React.createElement("div", { style: { display: 'flex', alignItems: 'baseline' } },
+            React.createElement("h3", { className: "grey-label", style: { minWidth: '185px' } },
+                "Exploration Path [#",
+                props.explorationPathIndex,
+                "]"),
+            React.createElement("div", null,
+                props.explorationPath.targetTable,
+                "[",
+                React.createElement("span", { style: {
+                        color: 'var(--c-blue-700)',
+                        fontWeight: '500',
+                    } }, props.explorationPath.targetColumns.join(', ')),
+                "] - ",
+                props.explorationPath.sourceTable,
+                "[",
+                React.createElement("span", { style: {
+                        color: 'var(--c-blue-700)',
+                        fontWeight: '500',
+                    } }, props.explorationPath.sourceColumns.join(', ')),
+                "]")),
+        React.createElement("div", { style: { paddingLeft: '16px' } },
+            React.createElement("p", { className: "grey-label" }, "Joins:"),
+            props.explorationPath.joins.map(join => (React.createElement("div", { key: join.joinId },
+                "[",
+                join.joinId,
+                "] ",
+                join.description,
+                " (",
+                join.numFeatures,
+                " features)"))))));
+};
+export const FeatureExplorationPaths = props => {
+    return (React.createElement(React.Fragment, null, props.explorationPaths.map((explorationPath, idx) => (React.createElement(FeatureExplorationPathItem, { key: idx, explorationPathIndex: idx, explorationPath: explorationPath })))));
+};

package/lib/widgets/feature-space/FeatureSpaceDomainsDescriptions.js

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { Accordion, AccordionDetails, AccordionHeader, } from '../../components/accordion';
+import { Input } from '../../components/input';
+import { GroupedDomainsDescriptionsList } from '../../feature-descriptors-domain/grouped-domains-descriptions-list';
+const searchInputStyle = {
+    width: '70%',
+    marginTop: '4px',
+    marginBottom: '16px',
+};
+export const FeatureSpaceDomainsDescriptions = props => {
+    const [aggregationSearch, setAggregationSearch] = useState(() => '');
+    const [filterSearch, setFilterSearch] = useState(() => '');
+    const [searchedAggregation, setSearchedAggregation] = useState(() => props.aggregations);
+    const [searchedFilters, setSearchedFilters] = useState(() => props.filters);
+    useEffect(() => {
+        const aggregations = filterDomainDescriptions(props.aggregations, aggregationSearch);
+        setSearchedAggregation(aggregations);
+    }, [aggregationSearch]);
+    useEffect(() => {
+        const filters = filterDomainDescriptions(props.filters, filterSearch);
+        setSearchedFilters(filters);
+    }, [filterSearch]);
+    return (React.createElement("div", null,
+        React.createElement(Accordion, null,
+            React.createElement(AccordionHeader, null,
+                React.createElement("h3", { className: "grey-label" }, "Filters and Aggregations")),
+            React.createElement(AccordionDetails, null,
+                React.createElement("div", { style: { display: 'flex', marginBottom: '0.5rem' } },
+                    React.createElement("div", { style: { width: '50%' } },
+                        React.createElement("div", { className: "grey-label" }, "Filters"),
+                        React.createElement(Input, { style: searchInputStyle, value: filterSearch, placeholder: "Search:", onValueChange: setFilterSearch }),
+                        React.createElement(GroupedDomainsDescriptionsList, { groupedDomain: searchedFilters })),
+                    React.createElement("div", { style: { width: '50%' } },
+                        React.createElement("div", { className: "grey-label" }, "Aggregations"),
+                        React.createElement(Input, { style: searchInputStyle, value: aggregationSearch, placeholder: "Search:", onValueChange: setAggregationSearch }),
+                        React.createElement(GroupedDomainsDescriptionsList, { groupedDomain: searchedAggregation })))))));
+};
+const isNotEmpty = (arr) => arr.length > 0;
+function filterDomainDescriptions(domains, searchPhrase) {
+    return {
+        types: domains.types
+            .map(({ summary, columns }) => ({
+            summary,
+            columns: columns
+                .map(column => ({
+                summary: column.summary,
+                descriptions: column.descriptions.filter(({ description }) => description.toLowerCase().includes(searchPhrase.toLowerCase())),
+            }))
+                .filter(({ descriptions }) => isNotEmpty(descriptions)),
+        }))
+            .filter(({ columns }) => isNotEmpty(columns)),
+    };
+}

package/lib/widgets/feature-space/FeatureSpaceView.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FeatureSpaceDomainsDescriptions } from './FeatureSpaceDomainsDescriptions';
+import { FeatureExplorationPaths } from './FeatureExplorationPaths';
+export const FeatureSpaceView = props => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("h2", { className: "grey-label" }, "Feature Space Overview:"),
+        props.featureSpace.explorationPaths ? (React.createElement(FeatureExplorationPaths, { explorationPaths: props.featureSpace.explorationPaths })) : null,
+        props.featureSpace.filters ? (React.createElement(FeatureSpaceDomainsDescriptions, { filters: props.featureSpace.filters, aggregations: props.featureSpace.aggregations })) : null));
+};

package/lib/widgets/index.js

@@ -0,0 +1,4 @@
+// Import the CSS
+import '../../css/widget.css';
+export * from './FeatureLeaderboardWidget';
+export * from './FeatureSpaceWidget';

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "dotdata_widgets",
-  "version": "0.1.0",
-  "description": "A Custom Jupyter Widget Library",
+  "version": "0.1.1",
+  "description": "A dotdata widget",
   "keywords": [
+    "dotdata",
+    "widgets",
     "jupyter",
     "jupyterlab",
-    "jupyterlab-extension",
-    "widgets"
+    "jupyterlab-extension"
   ],
   "files": [
     "lib/**/*.js",
     "dist/*.js",
     "css/*.css"
   ],
-  "homepage": "https://github.com/dotdata/dotdata_widgets",
+  "homepage": "https://github.com/ramencloud/dotdata-core",
   "bugs": {
-    "url": "https://github.com/dotdata/dotdata_widgets/issues"
+    "url": "https://github.com/ramencloud/dotdata-core/issues"
   },
   "license": "BSD-3-Clause",
   "author": {
@@ -26,14 +27,14 @@
   "types": "./lib/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/dotdata/dotdata_widgets"
+    "url": "https://github.com/ramencloud/dotdata-core"
   },
   "scripts": {
     "build": "yarn run build:lib && yarn run build:nbextension && yarn run build:labextension:dev",
     "build:prod": "yarn run build:lib && yarn run build:nbextension && yarn run build:labextension",
     "build:labextension": "jupyter labextension build .",
     "build:labextension:dev": "jupyter labextension build --development True .",
-    "build:lib": "tsc",
+    "build:lib": "tsc && tsc-alias",
     "build:nbextension": "webpack",
     "clean": "yarn run clean:lib && yarn run clean:nbextension && yarn run clean:labextension",
     "clean:lib": "rimraf lib",
@@ -44,43 +45,65 @@
     "prepack": "yarn run build:lib",
     "test": "jest",
     "watch": "npm-run-all -p watch:*",
-    "watch:lib": "tsc -w",
+    "watch:lib": "concurrently \"tsc -w\" \"tsc-alias -w\"",
     "watch:nbextension": "webpack --watch --mode=development",
     "watch:labextension": "jupyter labextension watch ."
   },
   "dependencies": {
-    "@jupyter-widgets/base": "^1.1.10 || ^2 || ^3 || ^4 || ^5 || ^6"
+    "@fontsource/roboto": "^4.5.8",
+    "@jupyter-widgets/base": "^1.1.10 || ^2 || ^3 || ^4 || ^5 || ^6",
+    "@jupyterlab/application": "^3.5.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "vega": "^5.22.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.0",
-    "@babel/preset-env": "^7.5.0",
-    "@jupyter-widgets/base-manager": "^1.0.2",
-    "@jupyterlab/builder": "^3.0.0",
-    "@lumino/application": "^1.6.0",
-    "@lumino/widgets": "^1.6.0",
-    "@types/jest": "^26.0.0",
-    "@types/webpack-env": "^1.13.6",
-    "@typescript-eslint/eslint-plugin": "^3.6.0",
-    "@typescript-eslint/parser": "^3.6.0",
-    "acorn": "^7.2.0",
-    "css-loader": "^3.2.0",
-    "eslint": "^7.4.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "fs-extra": "^7.0.0",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@jupyter-widgets/base-manager": "^1.0.3",
+    "@jupyterlab/builder": "^3.0.9",
+    "@lumino/application": "^1.31.3",
+    "@lumino/widgets": "^1.37.1",
+    "@types/jest": "^26.0.24",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "18.0.10",
+    "@types/webpack-env": "^1.18.0",
+    "@typescript-eslint/eslint-plugin": "^3.10.1",
+    "@typescript-eslint/parser": "^3.10.1",
+    "acorn": "^7.4.1",
+    "babel-loader": "^9.1.2",
+    "concurrently": "^7.6.0",
+    "css-loader": "^3.6.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.4.1",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^7.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.0.0",
-    "mkdirp": "^0.5.1",
-    "npm-run-all": "^4.1.3",
-    "prettier": "^2.0.5",
-    "rimraf": "^2.6.2",
+    "jest": "^26.6.3",
+    "mkdirp": "^0.5.6",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.4",
+    "rimraf": "^2.6.3",
     "source-map-loader": "^1.1.3",
-    "style-loader": "^1.0.0",
-    "ts-jest": "^26.0.0",
-    "ts-loader": "^8.0.0",
-    "typescript": "~4.1.3",
-    "webpack": "^5.61.0",
-    "webpack-cli": "^4.0.0"
+    "style-loader": "^1.3.0",
+    "ts-jest": "^26.5.6",
+    "ts-loader": "^8.4.0",
+    "tsc-alias": "^1.8.2",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "~4.9.5",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.69.1",
+    "webpack-cli": "^4.10.0"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react",
+      "@babel/preset-typescript"
+    ]
   },
   "jupyterlab": {
     "extension": "lib/plugin",