dotdata_widgets 0.0.28-dev.70.bfd2f27f

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

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

package/lib/widgets/FeatureLeaderboardWidget.js

@@ -0,0 +1,61 @@
+"use strict";
+// Copyright (c) dotdata
+// Distributed under the terms of the Modified BSD License.
+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,
+    liked_features: [],
+    disliked_features: [],
+};
+class FeatureLeaderboardWidgetModel extends base_1.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,
+            ...defaultState,
+        };
+    }
+}
+exports.FeatureLeaderboardWidgetModel = FeatureLeaderboardWidgetModel;
+FeatureLeaderboardWidgetModel.serializers = {
+    ...base_1.DOMWidgetModel.serializers,
+};
+FeatureLeaderboardWidgetModel.model_name = 'FeatureLeaderboardWidgetModel';
+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 = 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_1.default.createElement((0, widget_model_1.WidgetModelContextProvider)(FeatureLeaderboardView_1.FeatureLeaderboardView), {
+                model: this.model,
+            });
+            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

@@ -0,0 +1,64 @@
+"use strict";
+// Copyright (c) dotdata
+// Distributed under the terms of the Modified BSD License.
+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: [],
+    configuration: { selectable: true, disabled: false },
+};
+class FeatureSpaceWidgetModel extends base_1.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,
+            ...defaultState,
+        };
+    }
+}
+exports.FeatureSpaceWidgetModel = FeatureSpaceWidgetModel;
+FeatureSpaceWidgetModel.serializers = {
+    ...base_1.DOMWidgetModel.serializers,
+};
+FeatureSpaceWidgetModel.model_name = 'FeatureSpaceWidgetModel';
+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 = 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_1.default.createElement((0, widget_model_1.WidgetModelContextProvider)(FeatureSpaceView_1.FeatureSpaceView), {
+                model: this.model,
+            });
+            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/FeatureLeaderboardOverview.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 material_1 = require("@mui/material");
+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 = ({ isAssessed, confidence, setConfidence, maxCollinearity, setMaxCollinearity, setSearch, }) => {
+    const [searchPhrase, setSearchPhrase] = react_1.default.useState(() => '');
+    return (react_1.default.createElement("div", { style: { display: 'flex' } },
+        isAssessed ? (react_1.default.createElement(react_1.default.Fragment, 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 }))) : null,
+        react_1.default.createElement("span", { style: { marginLeft: 'auto' } },
+            react_1.default.createElement(material_1.TextField, { sx: { top: '-8px' }, size: "small", label: "Search", type: "search", variant: "standard", margin: "dense", value: searchPhrase, onChange: e => {
+                    setSearchPhrase(e.target.value);
+                    setSearch(e.target.value);
+                } }))));
+};
+exports.FeatureLeaderboardOverview = FeatureLeaderboardOverview;
+//# sourceMappingURL=FeatureLeaderboardOverview.js.map

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

@@ -0,0 +1,45 @@
+"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 material_1 = require("@mui/material");
+const _utils_1 = require("../../utils");
+const widget_theme_1 = require("../../utils/widget-theme");
+const widget_model_1 = require("../../utils/widget-model");
+const transducer_1 = require("../../utils/transducer");
+const FeatureLeaderboardOverview_1 = require("./FeatureLeaderboardOverview");
+const FeatureLeaderboardEntry_1 = require("./leaderboard-entry/FeatureLeaderboardEntry");
+const FeatureLeaderboardEntryRow_1 = require("./leaderboard-entry/FeatureLeaderboardEntryRow");
+const FeatureLeaderboardView = ({ model }) => {
+    const [featureLeaderboard] = (0, widget_model_1.useModelState)('value');
+    const isAssessed = (0, _utils_1.isNotSet)(featureLeaderboard.isAssessed) || featureLeaderboard.isAssessed;
+    const [confidence, setConfidence] = (0, widget_model_1.useModelState)('confidence');
+    const [maxCollinearity, setMaxCollinearity] = (0, widget_model_1.useModelState)('max_collinearity');
+    const [explanationSearch, setExplanationSearch] = react_1.default.useState(() => '');
+    const featureEntries = react_1.default.useMemo(() => filterFeatures(featureLeaderboard, maxCollinearity, confidence, explanationSearch, isAssessed), [maxCollinearity, confidence, explanationSearch, featureLeaderboard]);
+    return (react_1.default.createElement(material_1.ThemeProvider, { theme: widget_theme_1.theme },
+        react_1.default.createElement(FeatureLeaderboardOverview_1.FeatureLeaderboardOverview, { isAssessed: isAssessed, confidence: confidence, setConfidence: setConfidence, maxCollinearity: maxCollinearity, setMaxCollinearity: setMaxCollinearity, setSearch: setExplanationSearch }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("div", { style: { display: 'inline-block', minWidth: '100%' } }, isAssessed
+            ? featureEntries.map(featureEntry => (react_1.default.createElement(FeatureLeaderboardEntry_1.FeatureLeaderboardEntry, { key: featureEntry.feature.id, featureEntry: featureEntry })))
+            : featureEntries.map(featureEntry => (react_1.default.createElement("div", { className: "feature-leaderboard-entry-row-wrapper", key: featureEntry.feature.id },
+                react_1.default.createElement(FeatureLeaderboardEntryRow_1.FeatureLeaderboardEntryRow, { feature: featureEntry.feature })))))));
+};
+exports.FeatureLeaderboardView = FeatureLeaderboardView;
+function filterFeatures(featureLeaderboard, maxCollinearity, confidence, explanationSearchPhrase, isAssessed) {
+    const explanationSearchFilter = (entry) => !explanationSearchPhrase ||
+        entry.feature.explanation_str?.includes(explanationSearchPhrase);
+    const correlationFilter = (entry) => entry.maxAbsCorrelationOfSimplerFeature <= maxCollinearity;
+    const confidenceFilter = (entry) => entry.signalConfidence >= confidence;
+    const reduces = isAssessed
+        ? (0, transducer_1.compose)((0, transducer_1.filter)(explanationSearchFilter), (0, transducer_1.filter)(correlationFilter), (0, transducer_1.filter)(confidenceFilter))
+        : (0, transducer_1.compose)((0, transducer_1.filter)(explanationSearchFilter));
+    const aggregation = (a, b) => a.concat([b]);
+    return featureLeaderboard.allEntries
+        .flat()
+        .reduce(reduces(aggregation), []);
+}
+//# sourceMappingURL=FeatureLeaderboardView.js.map

package/lib/widgets/feature-leaderboard/components/leaderboard-feature-likes.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LeaderBoardFeatureLikes = void 0;
+const react_1 = __importDefault(require("react"));
+const lodash_1 = require("lodash");
+const widget_model_1 = require("../../../utils/widget-model");
+const feature_likes_1 = require("../../../feature/feature-likes");
+const LeaderBoardFeatureLikes = ({ featureId, }) => {
+    const [likedFeatures, setLikedFeatures] = (0, widget_model_1.useModelState)('liked_features');
+    const [dislikedFeatures, setDislikedFeatures] = (0, widget_model_1.useModelState)('disliked_features');
+    const [liked, setLiked] = react_1.default.useState(() => feature_likes_1.FeatureLike.Neutral);
+    react_1.default.useEffect(() => {
+        const newState = likedFeatures.includes(featureId)
+            ? feature_likes_1.FeatureLike.Liked
+            : dislikedFeatures.includes(featureId)
+                ? feature_likes_1.FeatureLike.Disliked
+                : feature_likes_1.FeatureLike.Neutral;
+        setLiked(newState);
+    }, [likedFeatures, dislikedFeatures]);
+    function toggleIsLiked() {
+        if (liked === feature_likes_1.FeatureLike.Neutral) {
+            setLikedFeatures([...likedFeatures, featureId]);
+        }
+        if (liked === feature_likes_1.FeatureLike.Liked) {
+            setLikedFeatures((0, lodash_1.without)(likedFeatures, featureId));
+        }
+        if (liked === feature_likes_1.FeatureLike.Disliked) {
+            setDislikedFeatures((0, lodash_1.without)(dislikedFeatures, featureId));
+            setLikedFeatures([...likedFeatures, featureId]);
+        }
+    }
+    function toggleIsDisliked() {
+        if (liked === feature_likes_1.FeatureLike.Neutral) {
+            setDislikedFeatures([...dislikedFeatures, featureId]);
+        }
+        if (liked === feature_likes_1.FeatureLike.Disliked) {
+            setDislikedFeatures((0, lodash_1.without)(dislikedFeatures, featureId));
+        }
+        if (liked === feature_likes_1.FeatureLike.Liked) {
+            setLikedFeatures((0, lodash_1.without)(likedFeatures, featureId));
+            setDislikedFeatures([...dislikedFeatures, featureId]);
+        }
+    }
+    return (react_1.default.createElement(feature_likes_1.FeatureLikes, { liked: liked, toggleIsLiked: toggleIsLiked, toggleIsDisliked: toggleIsDisliked }));
+};
+exports.LeaderBoardFeatureLikes = LeaderBoardFeatureLikes;
+//# sourceMappingURL=leaderboard-feature-likes.js.map

package/lib/widgets/feature-leaderboard/leaderboard-entry/FeatureLeaderboardEntry.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureLeaderboardEntry = void 0;
+const react_1 = __importDefault(require("react"));
+const accordion_1 = require("../../../components/accordion");
+const FeatureLeaderboardEntryDetails_1 = require("./FeatureLeaderboardEntryDetails");
+const FeatureLeaderboardEntryRow_1 = require("./FeatureLeaderboardEntryRow");
+const FeatureLeaderboardEntry = ({ featureEntry }) => {
+    return (react_1.default.createElement(accordion_1.Accordion, { className: "feature-leaderboard-entry" },
+        react_1.default.createElement(accordion_1.AccordionHeader, null,
+            react_1.default.createElement(FeatureLeaderboardEntryRow_1.FeatureLeaderboardEntryRow, { feature: featureEntry.feature })),
+        react_1.default.createElement(accordion_1.AccordionDetails, null,
+            react_1.default.createElement(FeatureLeaderboardEntryDetails_1.FeatureLeaderboardEntryDetails, { entry: featureEntry }))));
+};
+exports.FeatureLeaderboardEntry = FeatureLeaderboardEntry;
+//# sourceMappingURL=FeatureLeaderboardEntry.js.map

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

@@ -0,0 +1,23 @@
+"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/leaderboard-entry/FeatureLeaderboardEntryRow.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureLeaderboardEntryRow = void 0;
+const react_1 = __importDefault(require("react"));
+const FeatureExplanation_1 = require("../../../feature/feature-explanation/FeatureExplanation");
+const leaderboard_feature_likes_1 = require("../components/leaderboard-feature-likes");
+const featureNameLabelStyle = {
+    color: 'var(--c-grey-600)',
+    display: 'inline-block',
+    minWidth: '5rem',
+};
+const FeatureLeaderboardEntryRow = ({ feature }) => {
+    return (react_1.default.createElement("div", { className: "feature-leaderboard-entry-row" },
+        react_1.default.createElement("span", { className: "label-bold", style: featureNameLabelStyle }, feature.id),
+        react_1.default.createElement(FeatureExplanation_1.FeatureExplanation, { key: feature.id, explanationBlocks: feature.explanation.tokens }),
+        react_1.default.createElement("div", { style: { marginLeft: 'auto', display: 'flex', gap: '5px' } },
+            react_1.default.createElement(leaderboard_feature_likes_1.LeaderBoardFeatureLikes, { featureId: feature.id }))));
+};
+exports.FeatureLeaderboardEntryRow = FeatureLeaderboardEntryRow;
+//# sourceMappingURL=FeatureLeaderboardEntryRow.js.map

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

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverviewSlider = void 0;
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const MIN = 0;
+const MAX = 1;
+const STEP = 0.01;
+const OverviewSlider = ({ value, setValue, label, labelTooltip, }) => {
+    const [localValue, setLocalValue] = react_1.default.useState(() => value);
+    react_1.default.useEffect(() => {
+        // !compare only value not types
+        // eslint-disable-next-line eqeqeq
+        if (localValue != value) {
+            setLocalValue(value);
+        }
+    }, [value]);
+    function onInputBlur() {
+        const val = Math.max(MIN, Math.min(MAX, Number(localValue)));
+        setLocalValue(val);
+        setNewValue(val);
+    }
+    function handleInputChange(event) {
+        setLocalValue(event.target.value);
+        setNewValue(event.target.value);
+    }
+    function setNewValue(v) {
+        const val = Number(v);
+        if (val !== value) {
+            setValue(val);
+        }
+    }
+    return (react_1.default.createElement("div", { style: {
+            display: 'inline-flex',
+            minWidth: '400px',
+            alignItems: 'center',
+            gap: '8px',
+        } },
+        react_1.default.createElement(material_1.Grid, { item: true },
+            react_1.default.createElement(material_1.Tooltip, { title: labelTooltip, placement: "bottom" },
+                react_1.default.createElement("span", { className: "grey-label label-bold", style: { position: 'relative', top: '-3px' } }, label))),
+        react_1.default.createElement(material_1.Grid, { item: true, sx: { maxWidth: '200px', width: '100%' } },
+            react_1.default.createElement(material_1.Slider, { size: "small", step: STEP, min: MIN, max: MAX, value: sliderValue(localValue), onChange: (e, value) => {
+                    setLocalValue(value);
+                    setNewValue(value);
+                } })),
+        react_1.default.createElement(material_1.Grid, { item: true },
+            react_1.default.createElement(material_1.Input, { value: localValue, size: "small", onChange: handleInputChange, onBlur: onInputBlur, inputProps: {
+                    step: STEP,
+                    min: MIN,
+                    max: MAX,
+                    type: 'number',
+                } }))));
+};
+exports.OverviewSlider = OverviewSlider;
+function sliderValue(value) {
+    return Number(value);
+}
+//# sourceMappingURL=overview-slider.js.map

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

@@ -0,0 +1,74 @@
+"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.FeatureDomainsDescriptions = void 0;
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const domains_descriptions_tree_1 = require("../../feature-descriptor/domains-descriptions-tree");
+const headerWrapperStyle = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+};
+const FeatureDomainsDescriptions = props => {
+    const [selectedDomains] = (0, domains_descriptions_tree_1.useDomainsDescriptionsTreeItemSelection)();
+    const [domainSearchValue, setDomainSearchValue] = (0, react_1.useState)(() => '');
+    const [numberOfDescriptions, setNumberOfDescriptions] = (0, react_1.useState)(() => 0);
+    const [searchedDomain, setSearchedDomain] = (0, react_1.useState)(() => props.descriptionsTree);
+    (0, react_1.useEffect)(() => {
+        setNumberOfDescriptions(calculateNumberOfDescriptions(props.descriptionsTree));
+    }, [props.descriptionsTree]);
+    (0, react_1.useEffect)(() => {
+        const selectedDomainFilter = (0, domains_descriptions_tree_1.createDomainPredicate)(selectedDomains, props.selectedJoinIds);
+        const domains = (0, domains_descriptions_tree_1.filterDomainsDescriptionsTree)(props.descriptionsTree, description => description.description
+            .toLowerCase()
+            .includes(domainSearchValue.toLowerCase()) &&
+            selectedDomainFilter(description));
+        setSearchedDomain(domains);
+    }, [
+        domainSearchValue,
+        selectedDomains,
+        props.selectedJoinIds,
+        props.descriptionsTree,
+    ]);
+    return (react_1.default.createElement(domains_descriptions_tree_1.DomainsDescriptionsTree, { descriptionsTree: searchedDomain },
+        react_1.default.createElement(domains_descriptions_tree_1.FeatureDomainDescriptionsTreeHeader, null,
+            react_1.default.createElement("div", { style: headerWrapperStyle },
+                react_1.default.createElement("h4", { style: { margin: 0 } },
+                    props.domainName,
+                    ": (",
+                    numberOfDescriptions,
+                    ")"),
+                react_1.default.createElement(material_1.TextField, { sx: { top: '-8px' }, size: "small", label: `Search for ${props.domainName.toLowerCase()}`, type: "search", variant: "standard", margin: "dense", value: domainSearchValue, onChange: e => setDomainSearchValue(e.target.value) })))));
+};
+exports.FeatureDomainsDescriptions = FeatureDomainsDescriptions;
+function calculateNumberOfDescriptions(descriptionsTree) {
+    return descriptionsTree.types
+        .map(({ columns }) => columns.map(({ descriptions }) => descriptions.length))
+        .flat(3)
+        .reduce((a, b) => a + b, 0);
+}
+//# sourceMappingURL=FeatureDomainsDescriptions.js.map

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureExplorationPaths = void 0;
+const react_1 = __importDefault(require("react"));
+const feature_exploration_path_1 = require("../../feature-descriptor/feature-exploration-path");
+const FeatureExplorationPaths = ({ explorationPaths, selectedJoinIds, setSelectedJoinIds }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null, explorationPaths.map((explorationPath, idx) => (react_1.default.createElement("div", { key: idx, className: "exploration-path" },
+        react_1.default.createElement(feature_exploration_path_1.ExplorationPathHeader, { explorationPath: explorationPath, explorationPathIndex: idx }),
+        react_1.default.createElement("div", { style: { paddingLeft: '16px' } },
+            react_1.default.createElement(feature_exploration_path_1.ExplorationPathJoinList, { joins: explorationPath.joins, selectedJoinIds: selectedJoinIds, setSelectedJoinIds: setSelectedJoinIds })))))));
+};
+exports.FeatureExplorationPaths = FeatureExplorationPaths;
+//# sourceMappingURL=FeatureExplorationPaths.js.map

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

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureSpaceView = void 0;
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const widget_model_1 = require("../../utils/widget-model");
+const widget_theme_1 = require("../../utils/widget-theme");
+const FeatureExplorationPaths_1 = require("./FeatureExplorationPaths");
+const domains_descriptions_tree_1 = require("../../feature-descriptor/domains-descriptions-tree");
+const FeatureDomainsDescriptions_1 = require("./FeatureDomainsDescriptions");
+const Divider = () => (react_1.default.createElement("div", { style: {
+        height: '1px',
+        borderTop: '1px solid var(--c-grey-300)',
+        marginBlock: '24px',
+    } }));
+const FeatureSpaceView = props => {
+    const [featureSpace] = (0, widget_model_1.useModelState)('value');
+    const [configuration] = (0, widget_model_1.useModelState)('configuration');
+    const selectedFiltersModel = (0, widget_model_1.useModelState)('_selected_filters');
+    const selectedAggregationsModel = (0, widget_model_1.useModelState)('_selected_aggregations');
+    const [selectedJoinIds, setSelectedJoinIds] = react_1.default.useState(() => []);
+    const [filterDescriptionsTree, setFilterDescriptionsTree] = react_1.default.useState(() => ({ types: [] }));
+    const [aggregationDescriptionsTree, setAggregationDescriptionsTree] = react_1.default.useState(() => ({ types: [] }));
+    react_1.default.useEffect(() => {
+        setFilterDescriptionsTree(domains_descriptions_tree_1.DescriptionsTree.appendGroupId(featureSpace.filters, 'f'));
+    }, [featureSpace.filters]);
+    react_1.default.useEffect(() => {
+        setAggregationDescriptionsTree(domains_descriptions_tree_1.DescriptionsTree.appendGroupId(featureSpace.aggregations, 'a'));
+    }, [featureSpace.aggregations]);
+    const descriptionTreeConfig = react_1.default.useMemo(() => ({
+        isWithCheckboxes: configuration.selectable,
+        areCheckboxesDisabled: configuration.disabled,
+    }), [configuration]);
+    return (react_1.default.createElement(styles_1.ThemeProvider, { theme: widget_theme_1.theme },
+        react_1.default.createElement(domains_descriptions_tree_1.DomainsDescriptionsTreeConfigContextProvider, { configuration: descriptionTreeConfig },
+            react_1.default.createElement(domains_descriptions_tree_1.DomainsDescriptionsTreeItemSelectionContextProvider, null,
+                react_1.default.createElement(FeatureExplorationPaths_1.FeatureExplorationPaths, { explorationPaths: featureSpace.explorationPaths, selectedJoinIds: selectedJoinIds, setSelectedJoinIds: setSelectedJoinIds }),
+                react_1.default.createElement(Divider, null),
+                react_1.default.createElement(material_1.Grid, { container: true, spacing: 6 },
+                    react_1.default.createElement(material_1.Grid, { item: true, xs: 6 },
+                        react_1.default.createElement(domains_descriptions_tree_1.DomainsDescriptionsSelectionContextProvider, { selectedDomainDescriptionIds: selectedFiltersModel[0], setSelectedDomainDescriptionIds: selectedFiltersModel[1] },
+                            react_1.default.createElement(FeatureDomainsDescriptions_1.FeatureDomainsDescriptions, { domainName: "Filters", descriptionsTree: filterDescriptionsTree, selectedJoinIds: selectedJoinIds }))),
+                    react_1.default.createElement(material_1.Grid, { item: true, xs: 6, sx: { overflow: 'hidden' } },
+                        react_1.default.createElement(domains_descriptions_tree_1.DomainsDescriptionsSelectionContextProvider, { selectedDomainDescriptionIds: selectedAggregationsModel[0], setSelectedDomainDescriptionIds: selectedAggregationsModel[1] },
+                            react_1.default.createElement(FeatureDomainsDescriptions_1.FeatureDomainsDescriptions, { domainName: "Aggregations", descriptionsTree: aggregationDescriptionsTree, selectedJoinIds: selectedJoinIds }))))))));
+};
+exports.FeatureSpaceView = FeatureSpaceView;
+//# sourceMappingURL=FeatureSpaceView.js.map