dotdata_widgets 0.1.2 → 0.1.3

package/lib/utils/widget/widget-model.js

@@ -1,9 +1,12 @@
-import { useEffect, useState } from 'react';
-import { useWidgetModelContext } from './widget-model-context';
-export function useModelState(name) {
-    const model = useWidgetModelContext();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModelEvent = exports.useModelState = void 0;
+const react_1 = require("react");
+const widget_model_context_1 = require("./widget-model-context");
+function useModelState(name) {
+    const model = (0, widget_model_context_1.useWidgetModelContext)();
     const stringName = String(name);
-    const [state, setState] = useState(model?.get(stringName));
+    const [state, setState] = (0, react_1.useState)(model?.get(stringName));
     useModelEvent(`change:${stringName}`, model => {
         setState(model.get(stringName));
     }, [name]);
@@ -13,12 +16,15 @@ export function useModelState(name) {
     }
     return [state, updateModel];
 }
-export function useModelEvent(event, callback, deps) {
-    const model = useWidgetModelContext();
+exports.useModelState = useModelState;
+function useModelEvent(event, callback, deps) {
+    const model = (0, widget_model_context_1.useWidgetModelContext)();
     const dependencies = deps === undefined ? [model] : [...deps, model];
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const callbackWrapper = (e) => model && callback(model, e);
         model?.on(event, callbackWrapper);
         return () => void model?.unbind(event, callbackWrapper);
     }, dependencies);
 }
+exports.useModelEvent = useModelEvent;
+//# sourceMappingURL=widget-model.js.map

package/lib/utils/widget-model/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./widget-model-context"), exports);
+__exportStar(require("./widget-model"), exports);
+//# sourceMappingURL=index.js.map

package/lib/utils/widget-model/widget-model-context.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 });
+exports.WidgetModelContextProvider = exports.useWidgetModelContext = exports.WidgetModelContext = void 0;
+const react_1 = __importStar(require("react"));
+exports.WidgetModelContext = (0, react_1.createContext)(undefined);
+function useWidgetModelContext() {
+    const context = (0, react_1.useContext)(exports.WidgetModelContext);
+    if (context === undefined) {
+        throw new Error('WidgetModelContext has to be used in proper context');
+    }
+    return context;
+}
+exports.useWidgetModelContext = useWidgetModelContext;
+const WidgetModelContextProvider = (Component) => {
+    return (props) => (react_1.default.createElement(exports.WidgetModelContext.Provider, { value: props.model },
+        react_1.default.createElement(Component, { ...props })));
+};
+exports.WidgetModelContextProvider = WidgetModelContextProvider;
+//# sourceMappingURL=widget-model-context.js.map

package/lib/utils/widget-model/widget-model.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModelEvent = exports.useModelState = void 0;
+const react_1 = require("react");
+const widget_model_context_1 = require("./widget-model-context");
+function useModelState(name) {
+    const model = (0, widget_model_context_1.useWidgetModelContext)();
+    const stringName = String(name);
+    const [state, setState] = (0, react_1.useState)(() => model.get(stringName));
+    useModelEvent(`change:${stringName}`, model => {
+        setState(model.get(stringName));
+    }, [name]);
+    function updateModel(val, options) {
+        model.set(name, val, options);
+        model.save_changes();
+    }
+    return [state, updateModel];
+}
+exports.useModelState = useModelState;
+function useModelEvent(event, callback, deps) {
+    const model = (0, widget_model_context_1.useWidgetModelContext)();
+    const dependencies = deps === undefined ? [model] : [...deps, model];
+    (0, react_1.useEffect)(() => {
+        const callbackWrapper = (e) => callback(model, e);
+        model.on(event, callbackWrapper);
+        return () => void model.unbind(event, callbackWrapper);
+    }, dependencies);
+}
+exports.useModelEvent = useModelEvent;
+//# sourceMappingURL=widget-model.js.map

package/lib/utils/widget-theme/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./widget-theme"), exports);
+//# sourceMappingURL=index.js.map

package/lib/utils/widget-theme/widget-theme.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.theme = void 0;
+const styles_1 = require("@mui/material/styles");
+const themeOptions = {
+    spacing: 4,
+    palette: {
+        primary: {
+            main: '#1976d2;', // --c-blue-700
+        },
+    },
+    typography: {
+        fontSize: 12,
+    },
+    components: {
+        MuiList: {
+            defaultProps: {
+                dense: true,
+            },
+        },
+        MuiMenuItem: {
+            defaultProps: {
+                dense: true,
+            },
+        },
+        MuiTable: {
+            defaultProps: {
+                size: 'small',
+            },
+        },
+        MuiButton: {
+            defaultProps: {
+                size: 'small',
+            },
+        },
+        MuiButtonGroup: {
+            defaultProps: {
+                size: 'small',
+            },
+        },
+        MuiCheckbox: {
+            defaultProps: {
+            // size: 'small',
+            },
+        },
+        MuiFab: {
+            defaultProps: {
+                size: 'small',
+            },
+        },
+        MuiFormControl: {
+            defaultProps: {
+                margin: 'dense',
+                size: 'small',
+            },
+        },
+        MuiFormHelperText: {
+            defaultProps: {
+                margin: 'dense',
+            },
+        },
+        MuiIconButton: {
+            defaultProps: {
+                size: 'small',
+            },
+        },
+        MuiInputBase: {
+            defaultProps: {
+                margin: 'dense',
+            },
+        },
+        MuiInputLabel: {
+            defaultProps: {
+                margin: 'dense',
+            },
+        },
+        MuiRadio: {
+            defaultProps: {
+                size: 'small',
+            },
+        },
+        MuiSwitch: {
+            defaultProps: {
+                size: 'small',
+            },
+        },
+        MuiTextField: {
+            defaultProps: {
+                margin: 'dense',
+                size: 'small',
+            },
+        },
+    },
+    shape: {
+        borderRadius: 4,
+    },
+};
+exports.theme = (0, styles_1.createTheme)(themeOptions);
+//# sourceMappingURL=widget-theme.js.map

package/lib/version.js

@@ -1,5 +1,8 @@
+"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
@@ -10,8 +13,9 @@ const data = require('../package.json');
  * The html widget manager assumes that this is the same as the npm package
  * version number.
  */
-export const MODULE_VERSION = data.version;
+exports.MODULE_VERSION = data.version;
 /*
  * The current package name.
  */
-export const MODULE_NAME = data.name;
+exports.MODULE_NAME = data.name;
+//# sourceMappingURL=version.js.map

package/lib/widgets/FeatureLeaderboardWidget.js

@@ -1,17 +1,23 @@
+"use strict";
 // Copyright (c) dotdata
 // Distributed under the terms of the Modified BSD License.
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DOMWidgetModel, DOMWidgetView, } from '@jupyter-widgets/base';
-import { MODULE_NAME, MODULE_VERSION } from '../version';
-import { FeatureLeaderboardView } from './feature-leaderboard/FeatureLeaderboardView';
-import { withWidgetModelContext } from '../utils/widget';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureLeaderboardWidgetView = exports.FeatureLeaderboardWidgetModel = void 0;
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const base_1 = require("@jupyter-widgets/base");
+const version_1 = require("../version");
+const FeatureLeaderboardView_1 = require("./feature-leaderboard/FeatureLeaderboardView");
+const widget_model_1 = require("../utils/widget-model");
 const defaultState = {
     value: { allEntries: [] },
     confidence: 0.95,
     max_collinearity: 0.95,
 };
-export class FeatureLeaderboardWidgetModel extends DOMWidgetModel {
+class FeatureLeaderboardWidgetModel extends base_1.DOMWidgetModel {
     defaults() {
         return {
             ...super.defaults(),
@@ -25,25 +31,29 @@ export class FeatureLeaderboardWidgetModel extends DOMWidgetModel {
         };
     }
 }
+exports.FeatureLeaderboardWidgetModel = FeatureLeaderboardWidgetModel;
 FeatureLeaderboardWidgetModel.serializers = {
-    ...DOMWidgetModel.serializers,
+    ...base_1.DOMWidgetModel.serializers,
 };
 FeatureLeaderboardWidgetModel.model_name = 'FeatureLeaderboardWidgetModel';
-FeatureLeaderboardWidgetModel.model_module = MODULE_NAME;
-FeatureLeaderboardWidgetModel.model_module_version = MODULE_VERSION;
+FeatureLeaderboardWidgetModel.model_module = version_1.MODULE_NAME;
+FeatureLeaderboardWidgetModel.model_module_version = version_1.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 {
+FeatureLeaderboardWidgetModel.view_module = version_1.MODULE_NAME; // Set to null if no view
+FeatureLeaderboardWidgetModel.view_module_version = version_1.MODULE_VERSION;
+class FeatureLeaderboardWidgetView extends base_1.DOMWidgetView {
     render() {
+        this.el.classList.add('dotdata-widget');
         try {
-            const component = React.createElement(withWidgetModelContext(FeatureLeaderboardView), {
+            const component = react_1.default.createElement((0, widget_model_1.WidgetModelContextProvider)(FeatureLeaderboardView_1.FeatureLeaderboardView), {
                 model: this.model,
             });
-            ReactDOM.render(component, this.el);
+            react_dom_1.default.render(component, this.el);
         }
         catch (err) {
             console.error('FeatureSpaceWidgetView', err);
         }
     }
 }
+exports.FeatureLeaderboardWidgetView = FeatureLeaderboardWidgetView;
+//# sourceMappingURL=FeatureLeaderboardWidget.js.map

package/lib/widgets/FeatureSpaceWidget.js

@@ -1,19 +1,27 @@
+"use strict";
 // Copyright (c) dotdata
 // Distributed under the terms of the Modified BSD License.
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { DOMWidgetModel, DOMWidgetView, } from '@jupyter-widgets/base';
-import { MODULE_NAME, MODULE_VERSION } from '../version';
-import { FeatureSpaceView } from './feature-space/FeatureSpaceView';
-import { withWidgetModelContext } from '../utils/widget';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureSpaceWidgetView = exports.FeatureSpaceWidgetModel = void 0;
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const base_1 = require("@jupyter-widgets/base");
+const version_1 = require("../version");
+const FeatureSpaceView_1 = require("./feature-space/FeatureSpaceView");
+const widget_model_1 = require("../utils/widget-model");
 const defaultState = {
     value: {
         explorationPaths: [],
         filters: { types: [] },
         aggregations: { types: [] },
     },
+    selected_filters: [],
+    selected_aggregations: [],
 };
-export class FeatureSpaceWidgetModel extends DOMWidgetModel {
+class FeatureSpaceWidgetModel extends base_1.DOMWidgetModel {
     defaults() {
         return {
             ...super.defaults(),
@@ -27,25 +35,29 @@ export class FeatureSpaceWidgetModel extends DOMWidgetModel {
         };
     }
 }
+exports.FeatureSpaceWidgetModel = FeatureSpaceWidgetModel;
 FeatureSpaceWidgetModel.serializers = {
-    ...DOMWidgetModel.serializers,
+    ...base_1.DOMWidgetModel.serializers,
 };
 FeatureSpaceWidgetModel.model_name = 'FeatureSpaceWidgetModel';
-FeatureSpaceWidgetModel.model_module = MODULE_NAME;
-FeatureSpaceWidgetModel.model_module_version = MODULE_VERSION;
+FeatureSpaceWidgetModel.model_module = version_1.MODULE_NAME;
+FeatureSpaceWidgetModel.model_module_version = version_1.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 {
+FeatureSpaceWidgetModel.view_module = version_1.MODULE_NAME; // Set to null if no view
+FeatureSpaceWidgetModel.view_module_version = version_1.MODULE_VERSION;
+class FeatureSpaceWidgetView extends base_1.DOMWidgetView {
     render() {
+        this.el.classList.add('dotdata-widget');
         try {
-            const component = React.createElement(withWidgetModelContext(FeatureSpaceView), {
+            const component = react_1.default.createElement((0, widget_model_1.WidgetModelContextProvider)(FeatureSpaceView_1.FeatureSpaceView), {
                 model: this.model,
             });
-            ReactDOM.render(component, this.el);
+            react_dom_1.default.render(component, this.el);
         }
         catch (e) {
             console.error('FeatureSpaceWidgetView', e);
         }
     }
 }
+exports.FeatureSpaceWidgetView = FeatureSpaceWidgetView;
+//# sourceMappingURL=FeatureSpaceWidget.js.map

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

@@ -1,10 +1,18 @@
-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 })))))))));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureLeaderboardEntries = void 0;
+const react_1 = __importDefault(require("react"));
+const accordion_1 = require("../../components/accordion");
+const FeatureExplanation_1 = require("../../feature/feature-explanation/FeatureExplanation");
+const FeatureLeaderboardEntryItem_1 = require("./entry-item/FeatureLeaderboardEntryItem");
+const FeatureLeaderboardEntries = ({ entriesGroups }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null, entriesGroups.map((entriesGroup, groupIdx) => (react_1.default.createElement(accordion_1.Accordion, { key: groupIdx, collapsedDetailsStyle: { padding: '0' }, expandedDetailsStyle: { padding: '0' }, expandedHeaderStyle: { background: '#F0F0F0' }, initialState: true },
+        react_1.default.createElement(accordion_1.AccordionHeader, null,
+            react_1.default.createElement(FeatureExplanation_1.FeatureExplanation, { explanationBlocks: entriesGroup[0].feature.explanation.tokens })),
+        react_1.default.createElement(accordion_1.AccordionDetails, null, entriesGroup.map(entry => (react_1.default.createElement(FeatureLeaderboardEntryItem_1.FeatureLeaderboardEntryItem, { key: entry.feature.id, featureEntry: entry })))))))));
+};
+exports.FeatureLeaderboardEntries = FeatureLeaderboardEntries;
+//# sourceMappingURL=FeatureLeaderboardEntries.js.map

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

@@ -1,20 +1,17 @@
-import React from 'react';
-import { Input } from '../../components/input';
-const sliderRowStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '6px',
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-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)) }))));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureLeaderboardOverview = void 0;
+const react_1 = __importDefault(require("react"));
+const overview_slider_1 = require("./leaderboard-overview/overview-slider");
+const MAX_COLLINEARITY_TOOLTIP = 'Maximum correlation of any two features on the list';
+const CONFIDENCE_TOOLTIP = 'The probability that a feature is better than a random feature';
+const FeatureLeaderboardOverview = ({ confidence, setConfidence, maxCollinearity, setMaxCollinearity }) => {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(overview_slider_1.OverviewSlider, { value: maxCollinearity, setValue: setMaxCollinearity, label: "Max collinearity:", labelTooltip: MAX_COLLINEARITY_TOOLTIP }),
+        react_1.default.createElement(overview_slider_1.OverviewSlider, { value: confidence, setValue: setConfidence, label: "Confidence:", labelTooltip: CONFIDENCE_TOOLTIP })));
 };
+exports.FeatureLeaderboardOverview = FeatureLeaderboardOverview;
+//# sourceMappingURL=FeatureLeaderboardOverview.js.map

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

@@ -1,18 +1,25 @@
-import React from 'react';
-import { useModelState } from '../../utils/widget';
-import { FeatureLeaderboardOverview } from './FeatureLeaderboardOverview';
-import { FeatureLeaderboardEntryItem } from './entry-item/FeatureLeaderboardEntryItem';
-export const FeatureLeaderboardView = ({ model }) => {
-    const [featureLeaderboard] = useModelState('value');
-    const [confidence, setConfidence] = useModelState('confidence');
-    const [maxCollinearity, setMaxCollinearity] = useModelState('max_collinearity');
-    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 })))));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureLeaderboardView = void 0;
+const react_1 = __importDefault(require("react"));
+const widget_model_1 = require("../../utils/widget-model");
+const FeatureLeaderboardOverview_1 = require("./FeatureLeaderboardOverview");
+const FeatureLeaderboardEntryItem_1 = require("./entry-item/FeatureLeaderboardEntryItem");
+const FeatureLeaderboardView = ({ model }) => {
+    const [featureLeaderboard] = (0, widget_model_1.useModelState)('value');
+    const [confidence, setConfidence] = (0, widget_model_1.useModelState)('confidence');
+    const [maxCollinearity, setMaxCollinearity] = (0, widget_model_1.useModelState)('max_collinearity');
+    const featureEntries = react_1.default.useMemo(() => filterFeatures(featureLeaderboard, maxCollinearity, confidence), [maxCollinearity, confidence, featureLeaderboard]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("h2", { className: "grey-label" }, "Feature Pipeline Overview:"),
+        react_1.default.createElement(FeatureLeaderboardOverview_1.FeatureLeaderboardOverview, { confidence: confidence, setConfidence: setConfidence, maxCollinearity: maxCollinearity, setMaxCollinearity: setMaxCollinearity }),
+        react_1.default.createElement("br", null),
+        featureEntries.map(featureEntry => (react_1.default.createElement(FeatureLeaderboardEntryItem_1.FeatureLeaderboardEntryItem, { key: featureEntry.feature.id, featureEntry: featureEntry })))));
+};
+exports.FeatureLeaderboardView = FeatureLeaderboardView;
 function filterFeatures(featureLeaderboard, maxCollinearity, confidence) {
     const fulfillCollinearity = (entry) => entry.maxAbsCorrelationOfSimplerFeature < maxCollinearity;
     const fulfillNoise = (entry) => entry.signalConfidence >= confidence;
@@ -21,3 +28,4 @@ function filterFeatures(featureLeaderboard, maxCollinearity, confidence) {
         .filter(fulfillCollinearity)
         .filter(fulfillNoise);
 }
+//# sourceMappingURL=FeatureLeaderboardView.js.map

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

@@ -1,15 +1,23 @@
-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 }))));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureLeaderboardEntryDetails = void 0;
+const react_1 = __importDefault(require("react"));
+const feature_details_1 = require("../../../feature/feature-details");
+const FeatureLeaderboardEntryDetails = ({ entry }) => {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { style: { display: 'flex', gap: '50px' } },
+            react_1.default.createElement("div", { className: "feature-metrics", style: { flex: 3 } },
+                react_1.default.createElement("h3", { className: "grey-label" }, "Feature Statistics:"),
+                react_1.default.createElement(feature_details_1.FeatureStatisticsTable, { statistics: entry.stats })),
+            react_1.default.createElement("div", { className: "feature-histogram", style: { flex: 1 } },
+                react_1.default.createElement("h3", { className: "grey-label" }, "Feature Distribution:"),
+                react_1.default.createElement(feature_details_1.FeatureDistributionChart, { histogram: entry.histogram }))),
+        react_1.default.createElement("div", { className: "correlated-features" },
+            react_1.default.createElement("h3", { className: "grey-label" }, "Correlated Features:"),
+            react_1.default.createElement(feature_details_1.FeatureCorrelatedFeaturesTable, { correlatedFeatures: entry.topCorrelatedFeatures }))));
+};
+exports.FeatureLeaderboardEntryDetails = FeatureLeaderboardEntryDetails;
+//# sourceMappingURL=FeatureLeaderboardEntryDetails.js.map

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

@@ -1,20 +1,28 @@
-import React from 'react';
-import { Accordion, AccordionHeader, AccordionDetails, } from '../../../components/accordion';
-import { FeatureExplanation } from '../../../feature-descriptor/feature-explanation/FeatureExplanation';
-import { FeatureLeaderboardEntryDetails } from './FeatureLeaderboardEntryDetails';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureLeaderboardEntryItem = void 0;
+const react_1 = __importDefault(require("react"));
+const accordion_1 = require("../../../components/accordion");
+const FeatureExplanation_1 = require("../../../feature/feature-explanation/FeatureExplanation");
+const FeatureLeaderboardEntryDetails_1 = require("./FeatureLeaderboardEntryDetails");
 const featureNameLabelStyle = {
     color: 'var(--c-grey-600)',
     display: 'inline-block',
     minWidth: '5rem',
 };
-export const FeatureLeaderboardEntryItem = ({ featureEntry }) => {
-    return (React.createElement(Accordion, { expandedDetailsStyle: {
+const FeatureLeaderboardEntryItem = ({ featureEntry }) => {
+    return (react_1.default.createElement(accordion_1.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 }))));
+        react_1.default.createElement(accordion_1.AccordionHeader, null,
+            react_1.default.createElement("span", { className: "label-bold", style: featureNameLabelStyle }, featureEntry.feature.id),
+            react_1.default.createElement(FeatureExplanation_1.FeatureExplanation, { key: featureEntry.feature.id, explanationBlocks: featureEntry.feature.explanation.tokens })),
+        react_1.default.createElement(accordion_1.AccordionDetails, null,
+            react_1.default.createElement(FeatureLeaderboardEntryDetails_1.FeatureLeaderboardEntryDetails, { entry: featureEntry }))));
 };
+exports.FeatureLeaderboardEntryItem = FeatureLeaderboardEntryItem;
+//# sourceMappingURL=FeatureLeaderboardEntryItem.js.map

package/lib/widgets/feature-leaderboard/leaderboard-overview/overview-metric-slider.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=overview-metric-slider.js.map