dotdata_widgets 0.1.3 → 0.1.4

package/lib/components/accordion/Accordion.js

@@ -34,8 +34,8 @@ exports.AccordionDetails = AccordionDetails;
 exports.Accordion = (0, react_1.forwardRef)(({ children, expandedDetailsStyle, collapsedDetailsStyle, expandedHeaderStyle, collapsedHeaderStyle, toggleStyle, initialState, }, ref) => {
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(() => initialState ?? false);
     const components = react_1.default.Children.toArray(children).filter(react_1.default.isValidElement);
-    const Header = components.find(child => child.type?.name === exports.AccordionHeader.name);
-    const Details = components.find(child => child.type?.name === exports.AccordionDetails.name);
+    const Header = components.find(child => child?.type === exports.AccordionHeader);
+    const Details = components.find(child => child?.type === exports.AccordionDetails);
     (0, react_1.useImperativeHandle)(ref, () => ({
         collapse() {
             setIsExpanded(false);

package/lib/feature/feature-likes/feature-likes.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureLikes = exports.FeatureLike = void 0;
+const react_1 = __importDefault(require("react"));
+const ThumbUpOffAlt_1 = __importDefault(require("@mui/icons-material/ThumbUpOffAlt"));
+const ThumbDownOffAlt_1 = __importDefault(require("@mui/icons-material/ThumbDownOffAlt"));
+var FeatureLike;
+(function (FeatureLike) {
+    FeatureLike[FeatureLike["Neutral"] = 0] = "Neutral";
+    FeatureLike[FeatureLike["Liked"] = 1] = "Liked";
+    FeatureLike[FeatureLike["Disliked"] = 2] = "Disliked";
+})(FeatureLike = exports.FeatureLike || (exports.FeatureLike = {}));
+const FeatureLikes = ({ liked, toggleIsLiked, toggleIsDisliked }) => {
+    return (react_1.default.createElement("span", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        } },
+        react_1.default.createElement(ThumbUpOffAlt_1.default, { onClick: toggleIsLiked, sx: {
+                cursor: 'pointer',
+                fontSize: '18px',
+                color: liked === FeatureLike.Liked
+                    ? 'var( --c-green-600)'
+                    : 'var(  --c-grey-600)',
+            } }),
+        react_1.default.createElement(ThumbDownOffAlt_1.default, { onClick: toggleIsDisliked, sx: {
+                cursor: 'pointer',
+                fontSize: '18px',
+                color: liked === FeatureLike.Disliked
+                    ? 'var(--c-red-600)'
+                    : 'var(  --c-grey-600)',
+            } })));
+};
+exports.FeatureLikes = FeatureLikes;
+//# sourceMappingURL=feature-likes.js.map

package/lib/feature/feature-likes/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("./feature-likes"), exports);
+//# sourceMappingURL=index.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/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/feature-leaderboard/FeatureLeaderboardView.js

@@ -7,7 +7,8 @@ exports.FeatureLeaderboardView = void 0;
 const react_1 = __importDefault(require("react"));
 const widget_model_1 = require("../../utils/widget-model");
 const FeatureLeaderboardOverview_1 = require("./FeatureLeaderboardOverview");
-const FeatureLeaderboardEntryItem_1 = require("./entry-item/FeatureLeaderboardEntryItem");
+const 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 [confidence, setConfidence] = (0, widget_model_1.useModelState)('confidence');
@@ -17,7 +18,10 @@ const FeatureLeaderboardView = ({ model }) => {
         react_1.default.createElement("h2", { className: "grey-label" }, "Feature Pipeline Overview:"),
         react_1.default.createElement(FeatureLeaderboardOverview_1.FeatureLeaderboardOverview, { confidence: confidence, setConfidence: setConfidence, maxCollinearity: maxCollinearity, setMaxCollinearity: setMaxCollinearity }),
         react_1.default.createElement("br", null),
-        featureEntries.map(featureEntry => (react_1.default.createElement(FeatureLeaderboardEntryItem_1.FeatureLeaderboardEntryItem, { key: featureEntry.feature.id, featureEntry: featureEntry })))));
+        featureLeaderboard.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) {

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,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dotdata_widgets",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A dotdata widget",
   "keywords": [
     "dotdata",