dotdata_widgets 0.1.3 → 0.1.5

package/lib/feature-descriptor/domains-descriptions-tree/models/index.js

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

package/lib/feature-descriptor/domains-descriptions-tree/utils/create-domain-predicate.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDomainPredicate = void 0;
+function createDomainPredicate(selectedDomains, selectedJoinIds) {
+    const joinIds = new Set(selectedJoinIds);
+    const domainIds = Object.values(selectedDomains).flatMap(d => d.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;
+    };
+}
+exports.createDomainPredicate = createDomainPredicate;
+//# sourceMappingURL=create-domain-predicate.js.map

package/lib/feature-descriptor/domains-descriptions-tree/utils/filter-domains-descriptions-tree.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterDomainsDescriptionsTree = void 0;
+const isNotEmpty = (arr) => arr.length > 0;
+function filterDomainsDescriptionsTree(domains, predicateFn) {
+    return {
+        types: domains.types
+            .map(({ summary, columns, nodeId }) => ({
+            summary,
+            nodeId,
+            columns: columns
+                .map(column => ({
+                summary: column.summary,
+                nodeId: column.nodeId,
+                descriptions: column.descriptions.filter(predicateFn),
+            }))
+                .filter(({ descriptions }) => isNotEmpty(descriptions)),
+        }))
+            .filter(({ columns }) => isNotEmpty(columns)),
+    };
+}
+exports.filterDomainsDescriptionsTree = filterDomainsDescriptionsTree;
+//# sourceMappingURL=filter-domains-descriptions-tree.js.map

package/lib/feature-descriptor/domains-descriptions-tree/utils/index.js

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

package/lib/feature-descriptor/domains-descriptors-tree/config/index.js

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

package/lib/feature-descriptor/domains-descriptors-tree/context/domains-descriptions-tree-config-context.js

@@ -0,0 +1,43 @@
+"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.DomainsDescriptionsTreeConfigContextProvider = exports.useDomainsDescriptionsTreeConfig = exports.DomainsDescriptionsTreeConfigContext = void 0;
+const React = __importStar(require("react"));
+exports.DomainsDescriptionsTreeConfigContext = React.createContext({
+    isSelectable: true,
+});
+function useDomainsDescriptionsTreeConfig() {
+    const context = React.useContext(exports.DomainsDescriptionsTreeConfigContext);
+    if (context === undefined) {
+        throw new Error('useDomainsDescriptionsTreeConfig must be used within a DomainsDescriptionsTreeConfigContext');
+    }
+    return context;
+}
+exports.useDomainsDescriptionsTreeConfig = useDomainsDescriptionsTreeConfig;
+function DomainsDescriptionsTreeConfigContextProvider(props) {
+    return (React.createElement(exports.DomainsDescriptionsTreeConfigContext.Provider, { value: props.configuration, ...props }));
+}
+exports.DomainsDescriptionsTreeConfigContextProvider = DomainsDescriptionsTreeConfigContextProvider;
+//# sourceMappingURL=domains-descriptions-tree-config-context.js.map

package/lib/feature-descriptor/domains-descriptors-tree/context/domains-descriptions-tree-context-provider.js

@@ -0,0 +1,53 @@
+"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.DomainsDescriptionsTreeItemSelectionContextProvider = void 0;
+const React = __importStar(require("react"));
+const _utils_1 = require("../../../utils");
+const lodash_1 = require("lodash");
+const domains_descriptions_tree_item_selection_context_1 = require("./domains-descriptions-tree-item-selection-context");
+const domains_descriptions_tree_config_context_1 = require("./domains-descriptions-tree-config-context");
+function DomainsDescriptionsTreeItemSelectionContextProvider(
+// props: React.PropsWithChildren<Record<'selectedJoinIds', JoinDescriptionId[]>>
+props) {
+    const { configuration, ...restProps } = props;
+    const [selectedTreeItems, setSelectedTreeItems] = React.useState(() => ({}));
+    function toggleTreeItemSelection(nodeId, domains) {
+        if ((0, _utils_1.isSet)(selectedTreeItems[nodeId])) {
+            const { [nodeId]: _remove, ...rest } = selectedTreeItems;
+            setSelectedTreeItems(rest);
+        }
+        else {
+            setSelectedTreeItems({
+                ...selectedTreeItems,
+                [nodeId]: (0, lodash_1.uniqBy)(domains, JSON.stringify),
+            });
+        }
+    }
+    return (React.createElement(domains_descriptions_tree_config_context_1.DomainsDescriptionsTreeConfigContext.Provider, { value: configuration },
+        React.createElement(domains_descriptions_tree_item_selection_context_1.DomainsDescriptionsTreeItemSelectionContext.Provider, { value: [selectedTreeItems, { toggleTreeItemSelection }], ...restProps })));
+}
+exports.DomainsDescriptionsTreeItemSelectionContextProvider = DomainsDescriptionsTreeItemSelectionContextProvider;
+//# sourceMappingURL=domains-descriptions-tree-context-provider.js.map

package/lib/feature-descriptor/domains-descriptors-tree/context/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./domains-descriptions-tree-item-selection-context"), exports);
+__exportStar(require("./domains-descriptions-tree-config-context"), exports);
 //# sourceMappingURL=index.js.map

package/lib/models/feature-descriptor-domain/fd-domains-description.js

@@ -1,3 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DomainsDescriptionId = void 0;
+var DomainsDescriptionId;
+(function (DomainsDescriptionId) {
+    function toString(id) {
+        return `${id.joinId}_${id.domainIdx}_${id.opIdx}`;
+    }
+    DomainsDescriptionId.toString = toString;
+    function listToMap(list) {
+        return new Map(list.map(el => [DomainsDescriptionId.toString(el), el]));
+    }
+    DomainsDescriptionId.listToMap = listToMap;
+})(DomainsDescriptionId = exports.DomainsDescriptionId || (exports.DomainsDescriptionId = {}));
 //# sourceMappingURL=fd-domains-description.js.map

package/lib/utils/model-transform-hook.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModelTransform = void 0;
+const react_1 = __importDefault(require("react"));
+function useModelTransform(model, setModel, transform, revTransform, defaultState) {
+    const [transformedModel, setTransformedModel] = react_1.default.useState(() => defaultState);
+    react_1.default.useEffect(() => {
+        setTransformedModel(transform(model));
+    }, [model]);
+    return [
+        transformedModel,
+        (s) => {
+            setModel(revTransform(s));
+        },
+    ];
+}
+exports.useModelTransform = useModelTransform;
+//# sourceMappingURL=model-transform-hook.js.map

package/lib/utils/set.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggleSetItem = void 0;
+function toggleSetItem(collection, item) {
+    if (collection.has(item)) {
+        collection.delete(item);
+    }
+    else {
+        collection.add(item);
+    }
+    return new Set(collection);
+}
+exports.toggleSetItem = toggleSetItem;
+//# sourceMappingURL=set.js.map

package/lib/utils/transducer.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filter = exports.map = exports.compose = void 0;
+function compose(...fns) {
+    return (x) => fns.reduce((y, f) => f(y), x);
+}
+exports.compose = compose;
+function map(transformFn) {
+    return (step) => (a, c) => step(a, transformFn(c));
+}
+exports.map = map;
+function filter(predicate) {
+    return (step) => (a, c) => predicate(c) ? step(a, c) : a;
+}
+exports.filter = filter;
+//# sourceMappingURL=transducer.js.map

package/lib/widgets/FeatureLeaderboardWidget.js

@@ -16,6 +16,8 @@ const defaultState = {
     value: { allEntries: [] },
     confidence: 0.95,
     max_collinearity: 0.95,
+    liked_features: [],
+    disliked_features: [],
 };
 class FeatureLeaderboardWidgetModel extends base_1.DOMWidgetModel {
     defaults() {

package/lib/widgets/FeatureSpaceWidget.js

@@ -18,8 +18,9 @@ const defaultState = {
         filters: { types: [] },
         aggregations: { types: [] },
     },
-    selected_filters: [],
-    selected_aggregations: [],
+    _selected_filters: [],
+    _selected_aggregations: [],
+    configuration: { selectable: true },
 };
 class FeatureSpaceWidgetModel extends base_1.DOMWidgetModel {
     defaults() {

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

@@ -6,12 +6,20 @@ 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 = ({ confidence, setConfidence, maxCollinearity, setMaxCollinearity }) => {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(overview_slider_1.OverviewSlider, { value: maxCollinearity, setValue: setMaxCollinearity, label: "Max collinearity:", labelTooltip: MAX_COLLINEARITY_TOOLTIP }),
-        react_1.default.createElement(overview_slider_1.OverviewSlider, { value: confidence, setValue: setConfidence, label: "Confidence:", labelTooltip: CONFIDENCE_TOOLTIP })));
+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

@@ -6,26 +6,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeatureLeaderboardView = void 0;
 const react_1 = __importDefault(require("react"));
 const widget_model_1 = require("../../utils/widget-model");
+const transducer_1 = require("../../utils/transducer");
+const _utils_1 = require("../../utils");
 const FeatureLeaderboardOverview_1 = require("./FeatureLeaderboardOverview");
-const FeatureLeaderboardEntryItem_1 = require("./entry-item/FeatureLeaderboardEntryItem");
+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 featureEntries = react_1.default.useMemo(() => filterFeatures(featureLeaderboard, maxCollinearity, confidence), [maxCollinearity, confidence, featureLeaderboard]);
+    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(react_1.default.Fragment, null,
         react_1.default.createElement("h2", { className: "grey-label" }, "Feature Pipeline Overview:"),
-        react_1.default.createElement(FeatureLeaderboardOverview_1.FeatureLeaderboardOverview, { confidence: confidence, setConfidence: setConfidence, maxCollinearity: maxCollinearity, setMaxCollinearity: setMaxCollinearity }),
+        react_1.default.createElement(FeatureLeaderboardOverview_1.FeatureLeaderboardOverview, { isAssessed: isAssessed, confidence: confidence, setConfidence: setConfidence, maxCollinearity: maxCollinearity, setMaxCollinearity: setMaxCollinearity, setSearch: setExplanationSearch }),
         react_1.default.createElement("br", null),
-        featureEntries.map(featureEntry => (react_1.default.createElement(FeatureLeaderboardEntryItem_1.FeatureLeaderboardEntryItem, { key: featureEntry.feature.id, featureEntry: featureEntry })))));
+        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) {
-    const fulfillCollinearity = (entry) => entry.maxAbsCorrelationOfSimplerFeature < maxCollinearity;
-    const fulfillNoise = (entry) => entry.signalConfidence >= confidence;
+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()
-        .filter(fulfillCollinearity)
-        .filter(fulfillNoise);
+        .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)(likedFeatures, 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)(likedFeatures, featureId));
+        }
+        if (liked === feature_likes_1.FeatureLike.Liked) {
+            setLikedFeatures((0, lodash_1.without)(likedFeatures, featureId));
+            setDislikedFeatures([...likedFeatures, 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/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

@@ -6,21 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeatureLeaderboardEntryItem = void 0;
 const react_1 = __importDefault(require("react"));
 const accordion_1 = require("../../../components/accordion");
-const FeatureExplanation_1 = require("../../../feature/feature-explanation/FeatureExplanation");
 const FeatureLeaderboardEntryDetails_1 = require("./FeatureLeaderboardEntryDetails");
-const featureNameLabelStyle = {
-    color: 'var(--c-grey-600)',
-    display: 'inline-block',
-    minWidth: '5rem',
-};
+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_1.default.createElement(accordion_1.AccordionHeader, null,
-            react_1.default.createElement("span", { className: "label-bold", style: featureNameLabelStyle }, featureEntry.feature.id),
-            react_1.default.createElement(FeatureExplanation_1.FeatureExplanation, { key: featureEntry.feature.id, explanationBlocks: featureEntry.feature.explanation.tokens })),
+            react_1.default.createElement(FeatureLeaderboardEntryHeader_1.FeatureLeaderboardEntryHeader, { feature: featureEntry.feature })),
         react_1.default.createElement(accordion_1.AccordionDetails, null,
             react_1.default.createElement(FeatureLeaderboardEntryDetails_1.FeatureLeaderboardEntryDetails, { entry: featureEntry }))));
 };

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

@@ -57,6 +57,6 @@ const OverviewSlider = ({ value, setValue, label, labelTooltip, }) => {
 };
 exports.OverviewSlider = OverviewSlider;
 function sliderValue(value) {
-    return typeof value === 'number' ? value : 0;
+    return Number(value);
 }
 //# sourceMappingURL=overview-slider.js.map

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

@@ -25,23 +25,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
 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 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 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 [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);
@@ -49,8 +42,8 @@ const FeatureDomainsDescriptions = props => {
         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
+        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));
@@ -61,16 +54,15 @@ const FeatureDomainsDescriptions = props => {
         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,
+    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", null,
+                react_1.default.createElement("h4", { style: { margin: 0 } },
                     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 }))))));
+                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) {