dotdata_widgets 0.1.10 → 0.2.0

package/lib/utils/crypto.js

@@ -0,0 +1,28 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sha256 = exports.uuid4 = void 0;
+const object_1 = require("./object");
+function uuid4() {
+    return crypto.randomUUID();
+}
+exports.uuid4 = uuid4;
+function sha256(message, length) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const msgUint8 = new TextEncoder().encode(message);
+        const hashBuffer = yield crypto.subtle.digest('SHA-256', msgUint8);
+        const hashArray = Array.from(new Uint8Array(hashBuffer));
+        const hashArray3 = (0, object_1.isSet)(length) ? hashArray.slice(0, length) : hashArray;
+        return hashArray3.map(b => b.toString(16).padStart(2, '0')).join('');
+    });
+}
+exports.sha256 = sha256;
+//# sourceMappingURL=crypto.js.map

package/lib/utils/index.js

@@ -17,4 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./asserations"), exports);
 __exportStar(require("./object"), exports);
 __exportStar(require("./localize"), exports);
+__exportStar(require("./transducer"), exports);
+__exportStar(require("./crypto"), exports);
 //# sourceMappingURL=index.js.map

package/lib/utils/redux/action.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.union = exports.props = exports.createAction = void 0;
+function createAction(type, config) {
+    if (typeof config === 'function') {
+        return defineType(type, (...args) => (Object.assign(Object.assign({}, config(...args)), { type })));
+    }
+    const as = config ? config._as : 'empty';
+    switch (as) {
+        case 'empty':
+            return defineType(type, () => ({ type }));
+        case 'props':
+            return defineType(type, (props) => (Object.assign(Object.assign({}, props), { type })));
+        default:
+            throw new Error('Unexpected config.');
+    }
+}
+exports.createAction = createAction;
+function props() {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return { _as: 'props', _p: undefined };
+}
+exports.props = props;
+function union(creators) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return undefined;
+}
+exports.union = union;
+function defineType(type, creator) {
+    return Object.defineProperty(creator, 'type', {
+        value: type,
+        writable: false,
+    });
+}
+//# sourceMappingURL=action.js.map

package/lib/utils/redux/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.on = exports.createReducer = exports.props = exports.createAction = void 0;
+var action_1 = require("./action");
+Object.defineProperty(exports, "createAction", { enumerable: true, get: function () { return action_1.createAction; } });
+Object.defineProperty(exports, "props", { enumerable: true, get: function () { return action_1.props; } });
+var reducer_1 = require("./reducer");
+Object.defineProperty(exports, "createReducer", { enumerable: true, get: function () { return reducer_1.createReducer; } });
+Object.defineProperty(exports, "on", { enumerable: true, get: function () { return reducer_1.on; } });
+//# sourceMappingURL=index.js.map

package/lib/{feature-descriptor/feature-descriptor-editor/components/field-widgets/widget-interface.js → utils/redux/models.js}

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=widget-interface.js.map
+//# sourceMappingURL=models.js.map

package/lib/utils/redux/reducer.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createReducer = exports.on = void 0;
+function on(...args) {
+    const reducer = args.pop();
+    const types = args.map(creator => creator.type);
+    return { reducer, types };
+}
+exports.on = on;
+function createReducer(...ons) {
+    const map = new Map();
+    for (const on of ons) {
+        for (const type of on.types) {
+            const existingReducer = map.get(type);
+            if (existingReducer) {
+                const newReducer = (state, action) => on.reducer(existingReducer(state, action), action);
+                map.set(type, newReducer);
+            }
+            else {
+                map.set(type, on.reducer);
+            }
+        }
+    }
+    return function (state, action) {
+        const reducer = map.get(action.type);
+        return reducer ? reducer(state, action) : state;
+    };
+}
+exports.createReducer = createReducer;
+//# sourceMappingURL=reducer.js.map

package/lib/{feature-descriptor/feature-descriptor-editor/components/widgets/widget-interface.js → utils/types.js}

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=widget-interface.js.map
+//# sourceMappingURL=types.js.map

package/lib/utils/widget-api.js

@@ -0,0 +1,47 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetApi = void 0;
+const crypto_1 = require("./crypto");
+var WidgetApi;
+(function (WidgetApi) {
+    const events = new Map();
+    function init(modelContext) {
+        return {
+            callMethod: function callApiMethod(method, params) {
+                return __awaiter(this, void 0, void 0, function* () {
+                    const id = (0, crypto_1.uuid4)();
+                    const promise = new Promise((resolve, reject) => {
+                        events.set(id, { resolve, reject });
+                    });
+                    modelContext.send({ id, method, params }, {});
+                    return promise;
+                });
+            },
+        };
+    }
+    WidgetApi.init = init;
+    function handleEvent(event) {
+        const handler = events.get(event.id);
+        if (!handler) {
+            return;
+        }
+        if ('error' in event) {
+            handler.reject(event.error);
+        }
+        else {
+            handler.resolve(event.response);
+        }
+        events.delete(event.id);
+    }
+    WidgetApi.handleEvent = handleEvent;
+})(WidgetApi = exports.WidgetApi || (exports.WidgetApi = {}));
+//# sourceMappingURL=widget-api.js.map

package/lib/widgets/FeatureLeaderboardWidget.js

@@ -9,11 +9,12 @@ exports.FeatureLeaderboardWidgetView = exports.FeatureLeaderboardWidgetModel = v
 const react_1 = __importDefault(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const base_1 = require("@jupyter-widgets/base");
+const widget_model_1 = require("../utils/widget-model");
+const widget_api_1 = require("../utils/widget-api");
 const version_1 = require("../version");
 const FeatureLeaderboardView_1 = require("./feature-leaderboard/FeatureLeaderboardView");
-const widget_model_1 = require("../utils/widget-model");
 const defaultState = {
-    value: { allEntries: [] },
+    value: { allEntries: [], tableColumns: {} },
     confidence: 0.95,
     max_collinearity: 0.95,
     liked_features: [],
@@ -40,6 +41,15 @@ class FeatureLeaderboardWidgetView extends base_1.DOMWidgetView {
             console.error('FeatureSpaceWidgetView', err);
         }
     }
+    events() {
+        return {
+            create_feature: 'create_feature',
+            set_user_explanation: 'set_user_explanation',
+        };
+    }
+    handle_message(event) {
+        widget_api_1.WidgetApi.handleEvent(event);
+    }
 }
 exports.FeatureLeaderboardWidgetView = FeatureLeaderboardWidgetView;
 //# sourceMappingURL=FeatureLeaderboardWidget.js.map

package/lib/widgets/FeatureSpaceWidget.js

@@ -18,6 +18,7 @@ const defaultState = {
         filters: { types: [] },
         aggregations: { types: [] },
     },
+    _selected_joins: [],
     _selected_filters: [],
     _selected_aggregations: [],
     configuration: { selectable: true, disabled: false },

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

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeatureLeaderboardView = void 0;
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
+const column_1 = require("../../models/column");
+const feature_1 = require("../../models/feature");
 const _utils_1 = require("../../utils");
 const widget_theme_1 = require("../../utils/widget-theme");
 const widget_model_1 = require("../../utils/widget-model");
 const transducer_1 = require("../../utils/transducer");
+const FeatureLeaderboardEntryDrawer_1 = require("./leaderboard-entry/FeatureLeaderboardEntryDrawer");
 const FeatureLeaderboardOverview_1 = require("./FeatureLeaderboardOverview");
-const FeatureLeaderboardEntry_1 = require("./leaderboard-entry/FeatureLeaderboardEntry");
-const FeatureLeaderboardEntryRow_1 = require("./leaderboard-entry/FeatureLeaderboardEntryRow");
 const FeatureLeaderboardView = ({ model }) => {
     const [featureLeaderboard] = (0, widget_model_1.useModelState)('value');
     const isAssessed = (0, _utils_1.isNotSet)(featureLeaderboard.isAssessed) || featureLeaderboard.isAssessed;
@@ -20,23 +21,54 @@ const FeatureLeaderboardView = ({ model }) => {
     const [maxCollinearity, setMaxCollinearity] = (0, widget_model_1.useModelState)('max_collinearity');
     const [explanationSearch, setExplanationSearch] = react_1.default.useState(() => '');
     const featureEntries = react_1.default.useMemo(() => filterFeatures(featureLeaderboard, maxCollinearity, confidence, explanationSearch, isAssessed), [maxCollinearity, confidence, explanationSearch, featureLeaderboard]);
+    const tableColumns = react_1.default.useMemo(() => featureLeaderboard.tableColumns
+        ? column_1.TableColumns.fromSimplified(featureLeaderboard.tableColumns)
+        : {}, [featureLeaderboard.tableColumns]);
+    const [copiedFeature, setCopiedFeature] = react_1.default.useState(() => undefined);
     return (react_1.default.createElement(material_1.ThemeProvider, { theme: widget_theme_1.theme },
         react_1.default.createElement(FeatureLeaderboardOverview_1.FeatureLeaderboardOverview, { isAssessed: isAssessed, confidence: confidence, setConfidence: setConfidence, maxCollinearity: maxCollinearity, setMaxCollinearity: setMaxCollinearity, setSearch: setExplanationSearch }),
         react_1.default.createElement("br", null),
-        react_1.default.createElement("div", { style: { display: 'inline-block', minWidth: '100%' } }, isAssessed
-            ? featureEntries.map(featureEntry => (react_1.default.createElement(FeatureLeaderboardEntry_1.FeatureLeaderboardEntry, { key: featureEntry.feature.id, featureEntry: featureEntry })))
-            : featureEntries.map(featureEntry => (react_1.default.createElement("div", { className: "feature-leaderboard-entry-row-wrapper", key: featureEntry.feature.id },
-                react_1.default.createElement(FeatureLeaderboardEntryRow_1.FeatureLeaderboardEntryRow, { feature: featureEntry.feature })))))));
+        react_1.default.createElement("div", { className: "feature-entries-header", style: { display: 'flex' } },
+            react_1.default.createElement("span", { className: "feature-id", style: { marginLeft: isAssessed ? '30px' : 0 } }, "Feature ID"),
+            isAssessed ? react_1.default.createElement("span", { className: "confidence" }, "Confidence") : null,
+            react_1.default.createElement("span", { className: "explanation" }, "Explanation")),
+        react_1.default.createElement("div", { style: { display: 'inline-block', minWidth: '100%' } }, featureEntries.map(featureEntry => (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(FeatureLeaderboardEntryDrawer_1.FeatureLeaderboardEntryDrawer, { key: featureEntry.feature.id, featureEntry: featureEntry, tableColumn: tableColumns, isAssessed: isAssessed, config: {
+                    onSetModel: mode => {
+                        if (mode === FeatureLeaderboardEntryDrawer_1.DrawerMode.Copy) {
+                            const originId = feature_1.FeatureId.getOriginId(featureEntry.feature.id);
+                            (0, _utils_1.sha256)(`${new Date()}_${featureEntry.feature.id}`, 8).then(id => {
+                                const feature = Object.assign(Object.assign({}, featureEntry), { isAssessed: false, feature: Object.assign(Object.assign({}, featureEntry.feature), { id: `${originId}_${id}` }) });
+                                setCopiedFeature({
+                                    feature,
+                                    parentId: featureEntry.feature.id,
+                                });
+                            });
+                        }
+                        return mode !== FeatureLeaderboardEntryDrawer_1.DrawerMode.Copy;
+                    },
+                } }),
+            (copiedFeature === null || copiedFeature === void 0 ? void 0 : copiedFeature.parentId) === featureEntry.feature.id ? (react_1.default.createElement("div", { style: { marginLeft: '30px' } },
+                react_1.default.createElement(FeatureLeaderboardEntryDrawer_1.FeatureLeaderboardEntryDrawer, { featureEntry: copiedFeature.feature, tableColumn: tableColumns, isAssessed: false, config: {
+                        initMode: FeatureLeaderboardEntryDrawer_1.DrawerMode.Copy,
+                        isWithLikes: false,
+                        isWithActions: false,
+                        onCancel: () => setCopiedFeature(undefined),
+                    } }),
+                react_1.default.createElement("br", null))) : null))))));
 };
 exports.FeatureLeaderboardView = FeatureLeaderboardView;
 function filterFeatures(featureLeaderboard, maxCollinearity, confidence, explanationSearchPhrase, isAssessed) {
+    const shouldCheckIsAssessed = (entry) => (0, _utils_1.isSet)(entry.isAssessed) ? entry.isAssessed : true;
     const explanationSearchFilter = (entry) => {
         var _a;
         return !explanationSearchPhrase ||
             ((_a = entry.feature.explanation_str) === null || _a === void 0 ? void 0 : _a.includes(explanationSearchPhrase));
     };
-    const correlationFilter = (entry) => entry.maxAbsCorrelationOfSimplerFeature <= maxCollinearity;
-    const confidenceFilter = (entry) => entry.signalConfidence >= confidence;
+    const correlationFilter = (entry) => shouldCheckIsAssessed(entry)
+        ? entry.maxAbsCorrelationOfSimplerFeature <= maxCollinearity
+        : true;
+    const confidenceFilter = (entry) => shouldCheckIsAssessed(entry) ? entry.signalConfidence >= confidence : true;
     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));

package/lib/widgets/feature-leaderboard/components/{leaderboard-feature-likes.js → LeaderboardFeatureLikes.js}

@@ -3,12 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LeaderBoardFeatureLikes = void 0;
+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 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);
@@ -46,5 +46,5 @@ const LeaderBoardFeatureLikes = ({ 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
+exports.LeaderboardFeatureLikes = LeaderboardFeatureLikes;
+//# sourceMappingURL=LeaderboardFeatureLikes.js.map

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

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureLeaderboardEntryDrawer = exports.DrawerMode = void 0;
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const Code_1 = __importDefault(require("@mui/icons-material/Code"));
+const ModeEdit_1 = __importDefault(require("@mui/icons-material/ModeEdit"));
+const CopyAll_1 = __importDefault(require("@mui/icons-material/CopyAll"));
+const _utils_1 = require("../../../utils");
+const LeaderboardFeatureLikes_1 = require("../components/LeaderboardFeatureLikes");
+const FeatureLeaderboardEntryDetails_1 = require("./FeatureLeaderboardEntryDetails");
+const FeatureLeaderboardEntryFeatureEditor_1 = require("./FeatureLeaderboardEntryFeatureEditor");
+const FeatureLeaderboardEntryHeader_1 = require("./FeatureLeaderboardEntryHeader");
+const DetailsToggle = (props) => (react_1.default.createElement("span", { className: "details-toggle", onClick: props.onClick },
+    react_1.default.createElement("span", null, "\u25B6")));
+const FeatureLabel = (props) => (react_1.default.createElement("span", { className: "feature-name-label label-bold" },
+    react_1.default.createElement(material_1.Tooltip, { title: props.featureEntry.feature.id, placement: "bottom" },
+        react_1.default.createElement("span", null, props.featureEntry.feature.id))));
+const FeatureActions = (props) => {
+    var _a, _b;
+    const isWithActions = (_a = props.isWithActions) !== null && _a !== void 0 ? _a : true;
+    const isWithLikes = (_b = props.isWithLikes) !== null && _b !== void 0 ? _b : true;
+    return (react_1.default.createElement("div", { style: { marginLeft: 'auto', display: 'flex', gap: '5px' } },
+        isWithActions ? (react_1.default.createElement("div", { className: "fl-entry-row-actions" },
+            react_1.default.createElement("div", { className: "fl-entry-row-hidden-actions" },
+                react_1.default.createElement(material_1.IconButton, { color: "primary", size: "small", onClick: () => props.setMode(DrawerMode.Edit) },
+                    react_1.default.createElement(ModeEdit_1.default, { className: "action-btn" })),
+                react_1.default.createElement(material_1.IconButton, { color: "primary", size: "small", onClick: () => props.setMode(DrawerMode.Copy) },
+                    react_1.default.createElement(CopyAll_1.default, { className: "action-btn" })),
+                react_1.default.createElement(material_1.IconButton, { color: "primary", size: "small", onClick: () => props.setMode(DrawerMode.Code) },
+                    react_1.default.createElement(Code_1.default, { className: "action-btn" }))))) : null,
+        isWithLikes ? (react_1.default.createElement(LeaderboardFeatureLikes_1.LeaderboardFeatureLikes, { featureId: props.featureEntry.feature.id })) : null));
+};
+var DrawerMode;
+(function (DrawerMode) {
+    DrawerMode["None"] = "none";
+    DrawerMode["Edit"] = "edit";
+    DrawerMode["Copy"] = "copy";
+    DrawerMode["Code"] = "code";
+    DrawerMode["Details"] = "details";
+})(DrawerMode = exports.DrawerMode || (exports.DrawerMode = {}));
+const FeatureLeaderboardEntryDrawer = props => {
+    var _a;
+    const [mode, setMode] = react_1.default.useState(() => { var _a, _b; return (_b = (_a = props.config) === null || _a === void 0 ? void 0 : _a.initMode) !== null && _b !== void 0 ? _b : DrawerMode.None; });
+    const isExpanded = mode === DrawerMode.Code || mode === DrawerMode.Details;
+    const isWithAssessment = props.isAssessed;
+    const isAssessed = (_a = props.featureEntry.isAssessed) !== null && _a !== void 0 ? _a : props.isAssessed;
+    const toggleModel = (toggledMode) => {
+        return () => onSetModel(mode === toggledMode ? DrawerMode.None : toggledMode);
+    };
+    const onSetModel = (mode) => {
+        var _a, _b;
+        if ((_a = props.config) === null || _a === void 0 ? void 0 : _a.onSetModel) {
+            const setInlineMode = (_b = props.config.onSetModel(mode)) !== null && _b !== void 0 ? _b : true;
+            if (setInlineMode) {
+                setMode(mode);
+            }
+        }
+        else {
+            setMode(mode);
+        }
+    };
+    const onCancel = () => {
+        var _a, _b;
+        setMode(DrawerMode.None);
+        (_b = (_a = props.config) === null || _a === void 0 ? void 0 : _a.onCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    return (react_1.default.createElement("div", { className: `feature-leaderboard-entry-drawer ${isExpanded ? 'expanded' : ''}` },
+        react_1.default.createElement("div", { className: "feature-leaderboard-entry-drawer-header", style: { display: 'flex' } },
+            isAssessed && isWithAssessment ? (react_1.default.createElement(DetailsToggle, { onClick: toggleModel(DrawerMode.Details) })) : isWithAssessment ? (react_1.default.createElement("span", { style: { width: '30px', display: 'inline-block' } })) : null,
+            react_1.default.createElement(FeatureLabel, { featureEntry: props.featureEntry }),
+            isWithAssessment ? (react_1.default.createElement("span", { className: "confidence-label", style: {
+                    '--fill': `${props.featureEntry.signalConfidence * 100}%`,
+                } }, _utils_1.Localize.formatNumber(props.featureEntry.signalConfidence))) : null,
+            react_1.default.createElement(FeatureLeaderboardEntryHeader_1.FeatureLeaderboardEntryHeader, { feature: props.featureEntry.feature, isEdited: mode === DrawerMode.Edit, onClose: onCancel }),
+            react_1.default.createElement(FeatureActions, Object.assign({ mode: mode, setMode: onSetModel, featureEntry: props.featureEntry }, props === null || props === void 0 ? void 0 : props.config))),
+        react_1.default.createElement("div", { className: "feature-leaderboard-entry-drawer-details" },
+            react_1.default.createElement(material_1.Collapse, { in: mode === DrawerMode.Code || mode === DrawerMode.Copy, unmountOnExit: true },
+                react_1.default.createElement("br", null),
+                react_1.default.createElement(FeatureLeaderboardEntryFeatureEditor_1.FeatureLeaderboardEntryFeatureEditor, { featureId: props.featureEntry.feature.id, featureDescriptor: props.featureEntry.featureDescriptor, tableColumns: props.tableColumn, onClose: onCancel })),
+            react_1.default.createElement(material_1.Collapse, { in: mode === DrawerMode.Details, unmountOnExit: true },
+                react_1.default.createElement(FeatureLeaderboardEntryDetails_1.FeatureLeaderboardEntryDetails, { entry: props.featureEntry })))));
+};
+exports.FeatureLeaderboardEntryDrawer = FeatureLeaderboardEntryDrawer;
+//# sourceMappingURL=FeatureLeaderboardEntryDrawer.js.map

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureLeaderboardEntryFeatureEditor = void 0;
+const react_1 = __importDefault(require("react"));
+const widget_model_1 = require("../../../utils/widget-model");
+const widget_api_1 = require("../../../utils/widget-api");
+const ActionFooter_1 = require("../../../components/ActionFooter");
+const feature_descriptor_editor_1 = require("../../../feature-descriptor/feature-descriptor-editor");
+const Footer = (props) => {
+    const Widget = widget_api_1.WidgetApi.init((0, widget_model_1.useWidgetModelContext)());
+    const [editor] = (0, feature_descriptor_editor_1.useFeatureDescriptorEditorContext)();
+    const validatedDraft = react_1.default.useMemo(() => feature_descriptor_editor_1.FeatureDescriptorDraft.validate(editor), [editor]);
+    return (react_1.default.createElement(ActionFooter_1.ActionFooter, { primaryButton: { label: 'Save', isDisabled: !validatedDraft.success }, tertiaryButton: { label: 'Cancel' }, onTertiaryButtonClick: props.onClose, onPrimaryButtonClick: () => {
+            Widget.callMethod('save_feature', {
+                id: props.featureId,
+                descriptor: validatedDraft.data,
+            })
+                .then(() => props.onClose())
+                .catch(e => console.error(e));
+        } }));
+};
+const FeatureLeaderboardEntryFeatureEditor = (props) => {
+    return (react_1.default.createElement(feature_descriptor_editor_1.FeatureDescriptorEditorContextProvider, { initFeatureDescriptor: props.featureDescriptor, tableColumns: props.tableColumns },
+        react_1.default.createElement(feature_descriptor_editor_1.FeatureDescriptorEditor, { featureDescriptor: props.featureDescriptor, tableColumns: props.tableColumns }),
+        react_1.default.createElement(Footer, { featureId: props.featureId, onClose: props.onClose })));
+};
+exports.FeatureLeaderboardEntryFeatureEditor = FeatureLeaderboardEntryFeatureEditor;
+//# sourceMappingURL=FeatureLeaderboardEntryFeatureEditor.js.map

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

@@ -0,0 +1,15 @@
+"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 feature_user_explanation_1 = require("../../../feature/feature-user-explanation");
+const FeatureExplanation_1 = require("../../../feature/feature-explanation/FeatureExplanation");
+const FeatureLeaderboardUserExplanation_1 = require("./FeatureLeaderboardUserExplanation");
+const FeatureLeaderboardEntryHeader = (props) => {
+    return (react_1.default.createElement("div", { style: { flex: '1 0 auto' } }, props.isEdited ? (react_1.default.createElement(FeatureLeaderboardUserExplanation_1.FeatureLeaderboardUserExplanation, { feature: props.feature, onClose: props.onClose })) : props.feature.user_explanation ? (react_1.default.createElement(feature_user_explanation_1.FeatureUserExplanationDisplay, { userExplanation: props.feature.user_explanation })) : (react_1.default.createElement(FeatureExplanation_1.FeatureExplanation, { explanationBlocks: props.feature.explanation.tokens }))));
+};
+exports.FeatureLeaderboardEntryHeader = FeatureLeaderboardEntryHeader;
+//# sourceMappingURL=FeatureLeaderboardEntryHeader.js.map

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

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureLeaderboardUserExplanation = void 0;
+const react_1 = __importDefault(require("react"));
+const widget_api_1 = require("../../../utils/widget-api");
+const widget_model_1 = require("../../../utils/widget-model");
+const ActionFooter_1 = require("../../../components/ActionFooter");
+const feature_user_explanation_1 = require("../../../feature/feature-user-explanation");
+const FeatureLeaderboardUserExplanation = (props) => {
+    const Widget = widget_api_1.WidgetApi.init((0, widget_model_1.useWidgetModelContext)());
+    const [userExplanation, setUserExplanation] = react_1.default.useState(props.feature.user_explanation ||
+        (0, feature_user_explanation_1.explanationToUserExplanation)(props.feature.explanation.tokens));
+    return (react_1.default.createElement("div", { style: { display: 'flex' } },
+        react_1.default.createElement(feature_user_explanation_1.FeatureUserExplanation, { userExplanation: userExplanation, onUserExplanationChange: setUserExplanation }),
+        react_1.default.createElement(ActionFooter_1.ActionFooter, { primaryButton: { label: 'Save' }, tertiaryButton: { label: 'Cancel' }, onTertiaryButtonClick: props.onClose, onPrimaryButtonClick: () => {
+                Widget.callMethod('set_user_explanation', {
+                    id: props.feature.id,
+                    user_explanation: userExplanation,
+                })
+                    .then(() => props.onClose())
+                    .catch(e => console.error(e));
+            } })));
+};
+exports.FeatureLeaderboardUserExplanation = FeatureLeaderboardUserExplanation;
+//# sourceMappingURL=FeatureLeaderboardUserExplanation.js.map

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

@@ -20,16 +20,16 @@ const Divider = () => (react_1.default.createElement("div", { style: {
 const FeatureSpaceView = props => {
     const [featureSpace] = (0, widget_model_1.useModelState)('value');
     const [configuration] = (0, widget_model_1.useModelState)('configuration');
+    const selectedJoinsModel = (0, widget_model_1.useModelState)('_selected_joins');
     const selectedFiltersModel = (0, widget_model_1.useModelState)('_selected_filters');
     const selectedAggregationsModel = (0, widget_model_1.useModelState)('_selected_aggregations');
-    const [selectedJoinIds, setSelectedJoinIds] = react_1.default.useState(() => []);
     const [filterDescriptionsTree, setFilterDescriptionsTree] = react_1.default.useState(() => ({ types: [] }));
     const [aggregationDescriptionsTree, setAggregationDescriptionsTree] = react_1.default.useState(() => ({ types: [] }));
     react_1.default.useEffect(() => {
-        setFilterDescriptionsTree(domains_descriptions_tree_1.DescriptionsTree.appendGroupId(featureSpace.filters, 'f'));
+        setFilterDescriptionsTree(domains_descriptions_tree_1.DescriptionsTree.appendNodeId(featureSpace.filters, 'f'));
     }, [featureSpace.filters]);
     react_1.default.useEffect(() => {
-        setAggregationDescriptionsTree(domains_descriptions_tree_1.DescriptionsTree.appendGroupId(featureSpace.aggregations, 'a'));
+        setAggregationDescriptionsTree(domains_descriptions_tree_1.DescriptionsTree.appendNodeId(featureSpace.aggregations, 'a'));
     }, [featureSpace.aggregations]);
     const descriptionTreeConfig = react_1.default.useMemo(() => ({
         isWithCheckboxes: configuration.selectable,
@@ -38,15 +38,15 @@ const FeatureSpaceView = props => {
     return (react_1.default.createElement(styles_1.ThemeProvider, { theme: widget_theme_1.theme },
         react_1.default.createElement(domains_descriptions_tree_1.DomainsDescriptionsTreeConfigContextProvider, { configuration: descriptionTreeConfig },
             react_1.default.createElement(domains_descriptions_tree_1.DomainsDescriptionsTreeItemSelectionContextProvider, null,
-                react_1.default.createElement(FeatureExplorationPaths_1.FeatureExplorationPaths, { explorationPaths: featureSpace.explorationPaths, selectedJoinIds: selectedJoinIds, setSelectedJoinIds: setSelectedJoinIds }),
+                react_1.default.createElement(FeatureExplorationPaths_1.FeatureExplorationPaths, { explorationPaths: featureSpace.explorationPaths, selectedJoinIds: selectedJoinsModel[0], setSelectedJoinIds: selectedJoinsModel[1] }),
                 react_1.default.createElement(Divider, null),
                 react_1.default.createElement(material_1.Grid, { container: true, spacing: 6 },
                     react_1.default.createElement(material_1.Grid, { item: true, xs: 6 },
                         react_1.default.createElement(domains_descriptions_tree_1.DomainsDescriptionsSelectionContextProvider, { selectedDomainDescriptionIds: selectedFiltersModel[0], setSelectedDomainDescriptionIds: selectedFiltersModel[1] },
-                            react_1.default.createElement(FeatureDomainsDescriptions_1.FeatureDomainsDescriptions, { domainName: "Filters", descriptionsTree: filterDescriptionsTree, selectedJoinIds: selectedJoinIds }))),
+                            react_1.default.createElement(FeatureDomainsDescriptions_1.FeatureDomainsDescriptions, { domainName: "Filters", descriptionsTree: filterDescriptionsTree, selectedJoinIds: selectedJoinsModel[0] }))),
                     react_1.default.createElement(material_1.Grid, { item: true, xs: 6, sx: { overflow: 'hidden' } },
                         react_1.default.createElement(domains_descriptions_tree_1.DomainsDescriptionsSelectionContextProvider, { selectedDomainDescriptionIds: selectedAggregationsModel[0], setSelectedDomainDescriptionIds: selectedAggregationsModel[1] },
-                            react_1.default.createElement(FeatureDomainsDescriptions_1.FeatureDomainsDescriptions, { domainName: "Aggregations", descriptionsTree: aggregationDescriptionsTree, selectedJoinIds: selectedJoinIds }))))))));
+                            react_1.default.createElement(FeatureDomainsDescriptions_1.FeatureDomainsDescriptions, { domainName: "Aggregations", descriptionsTree: aggregationDescriptionsTree, selectedJoinIds: selectedJoinsModel[0] }))))))));
 };
 exports.FeatureSpaceView = FeatureSpaceView;
 //# sourceMappingURL=FeatureSpaceView.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dotdata_widgets",
-  "version": "0.1.10",
+  "version": "0.2.0",
   "description": "A dotdata widget",
   "keywords": [
     "dotdata",
@@ -33,7 +33,7 @@
   "scripts": {
     "build": "yarn run build:lib && yarn run build:nbextension && yarn run build:labextension:dev",
     "build:prod": "yarn run build:lib && yarn run build:nbextension && yarn run build:labextension",
-    "build:labextension": "jupyter labextension build .",
+    "build:labextension": "jupyter labextension build . && touch dotdata_widgets/labextension/static/__init__.py && touch dotdata_widgets/labextension/__init__.py",
     "build:labextension:dev": "jupyter labextension build --development True .",
     "build:lib": "tsc && tsc-alias",
     "build:nbextension": "webpack",
@@ -58,10 +58,13 @@
     "@mui/lab": "^5.0.0-alpha.120",
     "@mui/material": "^5.11.9",
     "@tanstack/react-virtual": "^3.0.0-beta.48",
+    "dompurify": "^3.0.1",
     "lodash": "^4.17.21",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "vega": "^5.22.1"
+    "ts-pattern": "^4.2.2",
+    "vega": "^5.22.1",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -69,6 +72,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@jupyterlab/builder": "^3.6.1",
+    "@types/dompurify": "^3.0.0",
     "@types/jest": "^29.4.0",
     "@types/react": "17.0.53",
     "@types/react-dom": "17.0.18",
@@ -109,12 +113,6 @@
   },
   "jupyterlab": {
     "extension": "lib/plugin",
-    "outputDir": "dotdata_widgets/labextension/",
-    "sharedPackages": {
-      "@jupyter-widgets/base": {
-        "bundled": false,
-        "singleton": true
-      }
-    }
+    "outputDir": "dotdata_widgets/labextension/"
   }
 }

package/lib/components/input/input.js

@@ -1,14 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
-const react_1 = __importDefault(require("react"));
-function Input(props) {
-    const { onValueChange, inputSize, ...restProps } = props;
-    const isSmall = inputSize === 'small';
-    return (react_1.default.createElement("input", { type: "text", ...restProps, className: `dd-input ${restProps.className ?? ''}  ${isSmall ? 'small' : ''}`, onChange: event => onValueChange(event.target.value) }));
-}
-exports.Input = Input;
-//# sourceMappingURL=input.js.map