dotdata_widgets 0.1.2 → 0.1.4

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/FeatureLeaderboardEntryHeader.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureLeaderboardEntryHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const lodash_1 = require("lodash");
+const widget_model_1 = require("../../../utils/widget-model");
+const FeatureExplanation_1 = require("../../../feature/feature-explanation/FeatureExplanation");
+const feature_likes_1 = require("../../../feature/feature-likes");
+const featureNameLabelStyle = {
+    color: 'var(--c-grey-600)',
+    display: 'inline-block',
+    marginLeft: '10px',
+    minWidth: '5rem',
+};
+const FeatureLeaderboardEntryHeader = ({ feature }) => {
+    const [likedFeatures, setLikedFeatures] = (0, widget_model_1.useModelState)('liked_features');
+    const [isLiked, setIsLiked] = react_1.default.useState(() => false);
+    react_1.default.useEffect(() => {
+        setIsLiked(likedFeatures.includes(feature.id));
+    }, [likedFeatures]);
+    function toggleIsLiked() {
+        setLikedFeatures(isLiked
+            ? (0, lodash_1.without)(likedFeatures, feature.id)
+            : [...likedFeatures, feature.id]);
+    }
+    return (react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+        react_1.default.createElement(feature_likes_1.FeatureLikes, { isLiked: isLiked, toggleIsLiked: toggleIsLiked }),
+        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 })));
+};
+exports.FeatureLeaderboardEntryHeader = FeatureLeaderboardEntryHeader;
+//# sourceMappingURL=FeatureLeaderboardEntryHeader.js.map

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

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

@@ -0,0 +1,22 @@
+"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, { expandedDetailsStyle: {
+            borderBottom: '1px solid var(--c-grey-500)',
+            paddingBlockEnd: '30px',
+        } },
+        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,29 @@
+"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',
+    marginLeft: '10px',
+    minWidth: '5rem',
+};
+const FeatureLeaderboardEntryRow = ({ feature }) => {
+    return (react_1.default.createElement("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            position: 'relative',
+            width: '100%',
+        } },
+        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' } },
+            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-metric-slider.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=overview-metric-slider.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" }, 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