dotdata_widgets 0.1.1 → 0.1.3

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" }, 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 typeof value === 'number' ? value : 0;
+}
+//# sourceMappingURL=overview-slider.js.map

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

@@ -0,0 +1,82 @@
+"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 input_1 = require("../../components/input");
+const domains_descriptors_tree_1 = require("../../feature-descriptor/domains-descriptors-tree");
+const headerWrapperStyle = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+};
+const searchBorder = {
+    borderLeft: '1px solid var(--c-grey-300)',
+    paddingLeft: '10px',
+};
+const searchInputStyle = {
+    width: '220px',
+};
+const FeatureDomainsDescriptions = props => {
+    const [selectedDomains] = (0, domains_descriptors_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_descriptors_tree_1.createDomainPredicate)(selectedDomains, props.selectedJoinIds);
+        const domains = (0, domains_descriptors_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_descriptors_tree_1.DomainsDescriptionsTree, { descriptionsTree: searchedDomain },
+        react_1.default.createElement(domains_descriptors_tree_1.FeatureDomainDescriptionsTreeHeader, null,
+            react_1.default.createElement("div", { style: headerWrapperStyle },
+                react_1.default.createElement("h4", null,
+                    props.domainName,
+                    ": (",
+                    numberOfDescriptions,
+                    ")"),
+                react_1.default.createElement("div", { style: searchBorder },
+                    react_1.default.createElement(input_1.Input, { style: searchInputStyle, value: domainSearchValue, placeholder: `Search for ${props.domainName.toLowerCase()}`, onValueChange: setDomainSearchValue }))))));
+};
+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

@@ -1,37 +1,16 @@
-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)"))))));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-export const FeatureExplorationPaths = props => {
-    return (React.createElement(React.Fragment, null, props.explorationPaths.map((explorationPath, idx) => (React.createElement(FeatureExplorationPathItem, { key: idx, explorationPathIndex: idx, explorationPath: explorationPath })))));
+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/FeatureSpaceDomain.js

@@ -0,0 +1,75 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureSpaceDomain = void 0;
+const react_1 = __importStar(require("react"));
+const UnfoldLess_1 = __importDefault(require("@mui/icons-material/UnfoldLess"));
+const input_1 = require("../../components/input");
+const feature_descriptor_grouped_domain_tree_1 = require("../../feature-descriptors-domain/feature-descriptor-grouped-domain-tree");
+const searchInputStyle = {
+    width: '220px',
+};
+const FeatureSpaceDomain = props => {
+    const [domainSearch, setDomainSearch] = (0, react_1.useState)(() => '');
+    const [searchedDomain, setSearchedDomain] = (0, react_1.useState)(() => props.groupedDomain);
+    (0, react_1.useEffect)(() => {
+        const domains = filterDomainDescriptions(props.groupedDomain, domainSearch);
+        setSearchedDomain(domains);
+    }, [domainSearch]);
+    const [expandedDomainGroups, setExpandedDomainGroups] = react_1.default.useState(() => props.groupedDomain.types
+        .map(({ columns }, typeIdx) => [
+        `type_${typeIdx}`,
+        columns.map((_, columnIdx) => `type_${typeIdx}_column${columnIdx}`),
+    ])
+        .flat(2));
+    return (react_1.default.createElement("div", { className: "feature-space-domain-filters" },
+        react_1.default.createElement("div", { className: "feature-space-domain-header" },
+            react_1.default.createElement(UnfoldLess_1.default, { onClick: () => setExpandedDomainGroups([]) }),
+            react_1.default.createElement("h4", { className: "" }, "Filters (123)"),
+            react_1.default.createElement(input_1.Input, { style: searchInputStyle, value: domainSearch, placeholder: "Search for filter", onValueChange: setDomainSearch })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(feature_descriptor_grouped_domain_tree_1.FeatureDescriptorGroupedDomainTree, { groupedDomain: searchedDomain, expanded: expandedDomainGroups }))));
+};
+exports.FeatureSpaceDomain = FeatureSpaceDomain;
+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)),
+    };
+}
+//# sourceMappingURL=FeatureSpaceDomain.js.map

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

@@ -0,0 +1,80 @@
+"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.FeatureSpaceDomainDescriptions = void 0;
+const react_1 = __importStar(require("react"));
+const feature_descriptors_domain_1 = require("../../models/feature-descriptors-domain");
+const input_1 = require("../../components/input");
+const feature_domain_descriptions_1 = require("../../feature-descriptors-domain/feature-domain-descriptions");
+const context_1 = require("../../feature-descriptors-domain/context");
+const utils_1 = require("../../feature-descriptors-domain/utils");
+const lodash_1 = require("lodash");
+const searchInputStyle = {
+    width: '220px',
+};
+const FeatureSpaceDomainDescriptions = props => {
+    const [selectedDomains] = (0, context_1.useFeatureDomainSelection)();
+    const [domainSearch, setDomainSearch] = (0, react_1.useState)(() => '');
+    const [numberOfDescriptions, setNumberOfDescriptions] = (0, react_1.useState)(() => 0);
+    const [searchedDomain, setSearchedDomain] = (0, react_1.useState)(() => props.groupedDomain);
+    (0, react_1.useEffect)(() => {
+        const descriptions = props.groupedDomain.types
+            .map(({ columns }) => columns.map(({ descriptions }) => descriptions.length))
+            .flat(3)
+            .reduce((a, b) => a + b);
+        setNumberOfDescriptions(descriptions);
+    }, [props.groupedDomain]);
+    (0, react_1.useEffect)(() => {
+        const selectedDomainFilter = filterDomain(selectedDomains);
+        const domains = (0, utils_1.filterGroupedDomainDescriptions)(props.groupedDomain, description => description.description
+            .toLowerCase()
+            .includes(domainSearch.toLowerCase()) &&
+            selectedDomainFilter(description));
+        setSearchedDomain(domains);
+    }, [domainSearch, selectedDomains, props.groupedDomain]);
+    return (react_1.default.createElement(feature_domain_descriptions_1.FeatureDomainDescriptionsTree, { groupedDomain: searchedDomain },
+        react_1.default.createElement(feature_domain_descriptions_1.FeatureDomainDescriptionsTreeHeader, null,
+            react_1.default.createElement("h4", null,
+                props.label,
+                ": (",
+                numberOfDescriptions,
+                ")"),
+            react_1.default.createElement(input_1.Input, { style: searchInputStyle, value: domainSearch, placeholder: `Search for ${props.label.toLowerCase()}`, onValueChange: setDomainSearch }))));
+};
+exports.FeatureSpaceDomainDescriptions = FeatureSpaceDomainDescriptions;
+function filterDomain(selectedDomains) {
+    const joinIds = new Set(Object.values(selectedDomains).flatMap(d => d.filter(lodash_1.isNumber)));
+    const domainIds = Object.values(selectedDomains).flatMap(d => d
+        .filter(feature_descriptors_domain_1.DomainId.isTypeOf)
+        .filter(({ joinId }) => (joinIds.size ? joinIds.has(joinId) : true)));
+    return (description) => {
+        return domainIds.length
+            ? description.domains.some(x => domainIds.find(({ domainIdx, joinId }) => x.joinId === joinId && x.domainIdx === domainIdx))
+            : joinIds.size
+                ? description.domains.some(({ joinId }) => joinIds.has(joinId))
+                : true;
+    };
+}
+//# sourceMappingURL=FeatureSpaceDomainDescriptions.js.map

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

@@ -1,40 +1,74 @@
-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';
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureSpaceDomainsDescriptions = void 0;
+const react_1 = __importStar(require("react"));
+const UnfoldLess_1 = __importDefault(require("@mui/icons-material/UnfoldLess"));
+const input_1 = require("../../components/input");
+const feature_descriptor_grouped_domain_tree_1 = require("../../feature-descriptors-domain/feature-descriptor-grouped-domain-tree");
 const searchInputStyle = {
-    width: '70%',
-    marginTop: '4px',
-    marginBottom: '16px',
+    width: '220px',
 };
-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 FeatureSpaceDomainsDescriptions = props => {
+    const [aggregationSearch, setAggregationSearch] = (0, react_1.useState)(() => '');
+    const [filterSearch, setFilterSearch] = (0, react_1.useState)(() => '');
+    const [searchedAggregation, setSearchedAggregation] = (0, react_1.useState)(() => props.aggregations);
+    const [searchedFilters, setSearchedFilters] = (0, react_1.useState)(() => props.filters);
+    (0, react_1.useEffect)(() => {
         const aggregations = filterDomainDescriptions(props.aggregations, aggregationSearch);
         setSearchedAggregation(aggregations);
     }, [aggregationSearch]);
-    useEffect(() => {
+    (0, react_1.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 [expandedAggregations, setExpandedAggregations] = react_1.default.useState(() => props.aggregations.types
+        .map(({ columns }, typeIdx) => [
+        `type_${typeIdx}`,
+        columns.map((_, columnIdx) => `type_${typeIdx}_column${columnIdx}`),
+    ])
+        .flat(2));
+    return (react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '32px' } },
+        react_1.default.createElement("div", { className: "feature-space-domain-filters" },
+            react_1.default.createElement("div", { className: "feature-space-domain-header" },
+                react_1.default.createElement(UnfoldLess_1.default, { onClick: () => setExpandedAggregations([]) }),
+                react_1.default.createElement("h4", { className: "" }, "Filters (123)"),
+                react_1.default.createElement(input_1.Input, { style: searchInputStyle, value: filterSearch, placeholder: "Search for filter", onValueChange: setFilterSearch })),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(feature_descriptor_grouped_domain_tree_1.FeatureDescriptorGroupedDomainTree, { groupedDomain: searchedFilters, expanded: expandedAggregations }))),
+        react_1.default.createElement("div", { className: "feature-space-domain-aggregations" },
+            react_1.default.createElement("div", { className: "feature-space-domain-header" },
+                react_1.default.createElement("h4", null, "Aggregations (456)"),
+                react_1.default.createElement(input_1.Input, { style: searchInputStyle, value: aggregationSearch, placeholder: "Search for aggregation", onValueChange: setAggregationSearch })),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(feature_descriptor_grouped_domain_tree_1.FeatureDescriptorGroupedDomainTree, { groupedDomain: searchedAggregation, expanded: expandedAggregations })))));
 };
+exports.FeatureSpaceDomainsDescriptions = FeatureSpaceDomainsDescriptions;
 const isNotEmpty = (arr) => arr.length > 0;
 function filterDomainDescriptions(domains, searchPhrase) {
     return {
@@ -51,3 +85,4 @@ function filterDomainDescriptions(domains, searchPhrase) {
             .filter(({ columns }) => isNotEmpty(columns)),
     };
 }
+//# sourceMappingURL=FeatureSpaceDomainsDescriptions.js.map

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

@@ -1,9 +1,48 @@
-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));
+"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 context_1 = require("../../feature-descriptor/context");
+const domains_descriptors_tree_1 = require("../../feature-descriptor/domains-descriptors-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 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_descriptors_tree_1.DescriptionsTree.appendGroupId(featureSpace.filters, 'f'));
+    }, [featureSpace.filters]);
+    react_1.default.useEffect(() => {
+        setAggregationDescriptionsTree(domains_descriptors_tree_1.DescriptionsTree.appendGroupId(featureSpace.aggregations, 'a'));
+    }, [featureSpace.aggregations]);
+    return (react_1.default.createElement(styles_1.ThemeProvider, { theme: widget_theme_1.theme },
+        react_1.default.createElement("h2", { className: "grey-label" }, "Feature Space Overview:"),
+        react_1.default.createElement(domains_descriptors_tree_1.DomainsDescriptionsTreeItemSelectionContextProvider, { selectedJoinIds: selectedJoinIds },
+            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(context_1.FdDomainsDescriptionsSelectionContext.Provider, { value: selectedFiltersModel },
+                        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(context_1.FdDomainsDescriptionsSelectionContext.Provider, { value: selectedAggregationsModel },
+                        react_1.default.createElement(FeatureDomainsDescriptions_1.FeatureDomainsDescriptions, { domainName: "Aggregations", descriptionsTree: aggregationDescriptionsTree, selectedJoinIds: selectedJoinIds })))))));
+};
+exports.FeatureSpaceView = FeatureSpaceView;
+//# sourceMappingURL=FeatureSpaceView.js.map

package/lib/widgets/index.js

@@ -1,4 +1,21 @@
+"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 });
 // Import the CSS
-import '../../css/widget.css';
-export * from './FeatureLeaderboardWidget';
-export * from './FeatureSpaceWidget';
+require("../../css/widget.css");
+__exportStar(require("./FeatureLeaderboardWidget"), exports);
+__exportStar(require("./FeatureSpaceWidget"), exports);
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dotdata_widgets",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "A dotdata widget",
   "keywords": [
     "dotdata",
@@ -50,11 +50,16 @@
     "watch:labextension": "jupyter labextension watch ."
   },
   "dependencies": {
-    "@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",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@jupyter-widgets/base": "^6.0.2",
+    "@mui/icons-material": "^5.11.9",
+    "@mui/lab": "^5.0.0-alpha.120",
+    "@mui/material": "^5.11.9",
+    "@tanstack/react-virtual": "^3.0.0-beta.48",
+    "lodash": "^4.17.21",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "vega": "^5.22.1"
   },
   "devDependencies": {
@@ -62,41 +67,37 @@
     "@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",
+    "@jupyterlab/builder": "^3.6.1",
+    "@types/jest": "^29.4.0",
+    "@types/react": "17.0.53",
+    "@types/react-dom": "17.0.18",
     "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^3.10.1",
-    "@typescript-eslint/parser": "^3.10.1",
-    "acorn": "^7.4.1",
+    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@typescript-eslint/parser": "^5.52.0",
+    "acorn": "^8.8.2",
     "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",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "file-loader": "^6.2.0",
-    "fs-extra": "^7.0.1",
+    "fs-extra": "^11.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
-    "mkdirp": "^0.5.6",
+    "jest": "^29.4.2",
+    "mkdirp": "^2.1.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.4",
-    "rimraf": "^2.6.3",
-    "source-map-loader": "^1.1.3",
-    "style-loader": "^1.3.0",
-    "ts-jest": "^26.5.6",
-    "ts-loader": "^8.4.0",
+    "rimraf": "^4.1.2",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.1",
+    "ts-jest": "^29.0.5",
+    "ts-loader": "^9.4.2",
     "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"
+    "webpack-cli": "^5.0.1"
   },
   "babel": {
     "presets": [