dotdata_widgets 0.1.9 → 0.2.0

package/lib/components/ActionFooter.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.ActionFooter = void 0;
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const ActionFooter = (props) => {
+    return (react_1.default.createElement("div", { className: "action-footer", style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'end',
+            gap: '10px',
+        } },
+        props.tertiaryButton && (react_1.default.createElement(material_1.Button, { variant: "text", disabled: props.tertiaryButton.isDisabled, onClick: () => { var _a; return (_a = props.onTertiaryButtonClick) === null || _a === void 0 ? void 0 : _a.call(props); } }, props.tertiaryButton.label)),
+        props.secondaryButton && (react_1.default.createElement(material_1.Button, { variant: "outlined", disabled: props.secondaryButton.isDisabled, onClick: () => { var _a; return (_a = props.onSecondaryButtonClick) === null || _a === void 0 ? void 0 : _a.call(props); } }, props.secondaryButton.label)),
+        props.primaryButton && (react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", disabled: props.primaryButton.isDisabled, onClick: () => { var _a; return (_a = props.onPrimaryButtonClick) === null || _a === void 0 ? void 0 : _a.call(props); } }, props.primaryButton.label))));
+};
+exports.ActionFooter = ActionFooter;
+//# sourceMappingURL=ActionFooter.js.map

package/lib/components/WithLabel.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithLabel = void 0;
+const react_1 = __importDefault(require("react"));
+const WithLabel = (props) => {
+    const isString = typeof props.label === 'string';
+    return (react_1.default.createElement("div", null,
+        isString ? (react_1.default.createElement("p", { style: {
+                fontWeight: 'bold',
+                fontSize: '13px',
+                height: '16px',
+                whiteSpace: 'nowrap',
+            } }, props.label)) : (react_1.default.createElement("p", null, props.label)),
+        react_1.default.createElement("div", null, props.children)));
+};
+exports.WithLabel = WithLabel;
+//# sourceMappingURL=WithLabel.js.map

package/lib/components/accordion/Accordion.js

@@ -32,17 +32,17 @@ exports.AccordionHeader = AccordionHeader;
 const AccordionDetails = ({ children, }) => react_1.default.createElement(react_1.default.Fragment, null, children);
 exports.AccordionDetails = AccordionDetails;
 exports.Accordion = (0, react_1.forwardRef)(({ children, initialState, className }, ref) => {
-    const [isExpanded, setIsExpanded] = (0, react_1.useState)(() => initialState ?? false);
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(() => initialState !== null && initialState !== void 0 ? initialState : false);
     const components = react_1.default.Children.toArray(children).filter(react_1.default.isValidElement);
-    const Header = components.find(child => child?.type === exports.AccordionHeader);
-    const Details = components.find(child => child?.type === exports.AccordionDetails);
+    const Header = components.find(child => (child === null || child === void 0 ? void 0 : child.type) === exports.AccordionHeader);
+    const Details = components.find(child => (child === null || child === void 0 ? void 0 : child.type) === exports.AccordionDetails);
     (0, react_1.useImperativeHandle)(ref, () => ({
         collapse() {
             setIsExpanded(false);
         },
     }));
     const accordionClasses = (defaultClassNames) => `${defaultClassNames} ${isExpanded ? 'expanded' : 'collapsed'}`;
-    return (react_1.default.createElement("div", { className: accordionClasses(`dotdata-accordion ${className ?? ''}`) },
+    return (react_1.default.createElement("div", { className: accordionClasses(`dotdata-accordion ${className !== null && className !== void 0 ? className : ''}`) },
         react_1.default.createElement("div", { className: accordionClasses('dotdata-accordion-header') },
             react_1.default.createElement("div", { className: accordionClasses('dotdata-accordion-header-toggle'), onClick: () => setIsExpanded(!isExpanded) }, "\u25B6"),
             Header),

package/lib/components/column-analytic-type-icons/analytic-type-category.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnalyticTypeCategory = void 0;
+const react_1 = __importDefault(require("react"));
+const AnalyticTypeCategory = (props = { size: 24 }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size, height: props.size, viewBox: "0 0 24 24" },
+    react_1.default.createElement("g", { fill: "none", "fill-rule": "evenodd" },
+        react_1.default.createElement("rect", { width: "24", height: "24", fill: "#3663C1", rx: "2" }),
+        react_1.default.createElement("path", { fill: "#FFF", d: "M8.632 14.24v.704c0 .352-.067.685-.2 1a2.766 2.766 0 0 1-.552.84c-.235.245-.51.44-.824.584a2.412 2.412 0 0 1-1.016.216c-.31 0-.624-.043-.944-.128a2.233 2.233 0 0 1-.864-.448 2.477 2.477 0 0 1-.632-.824c-.165-.336-.248-.765-.248-1.288V8.624c0-.373.064-.72.192-1.04A2.448 2.448 0 0 1 4.928 6.2c.325-.133.685-.2 1.08-.2.768 0 1.392.25 1.872.752.235.245.419.536.552.872.133.336.2.701.2 1.096v.64H7v-.544c0-.32-.09-.597-.272-.832a.881.881 0 0 0-.736-.352c-.405 0-.675.125-.808.376-.133.25-.2.568-.2.952v5.824c0 .33.072.608.216.832.144.224.403.336.776.336.107 0 .221-.019.344-.056.123-.037.237-.099.344-.184a.976.976 0 0 0 .24-.352c.064-.15.096-.336.096-.56v-.56h1.632zm2.4 3.248V7.632H9.144V6.096h5.408v1.536h-1.888v9.856h-1.632zm4.144-8.704c0-.459.08-.864.24-1.216a2.57 2.57 0 0 1 1.512-1.392c.325-.117.653-.176.984-.176.33 0 .659.059.984.176a2.9 2.9 0 0 1 .888.512c.256.235.464.528.624.88.16.352.24.757.24 1.216v.576h-1.632v-.576c0-.395-.11-.685-.328-.872a1.157 1.157 0 0 0-.776-.28c-.299 0-.557.093-.776.28-.219.187-.328.477-.328.872V14.8c0 .395.11.685.328.872.219.187.477.28.776.28.299 0 .557-.093.776-.28.219-.187.328-.477.328-.872v-2.144H17.72v-1.44h2.928V14.8c0 .48-.08.89-.24 1.232-.16.341-.368.624-.624.848-.267.235-.563.41-.888.528a2.882 2.882 0 0 1-.984.176c-.33 0-.659-.059-.984-.176a2.567 2.567 0 0 1-.872-.528 2.443 2.443 0 0 1-.64-.848c-.16-.341-.24-.752-.24-1.232V8.784z" }))));
+exports.AnalyticTypeCategory = AnalyticTypeCategory;
+//# sourceMappingURL=analytic-type-category.js.map

package/lib/components/column-analytic-type-icons/analytic-type-datatime.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnalyticTypeDatatime = void 0;
+const react_1 = __importDefault(require("react"));
+const AnalyticTypeDatatime = (props = { size: 24 }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size, height: props.size, viewBox: "0 0 24 24" },
+    react_1.default.createElement("g", { fill: "none", "fill-rule": "evenodd" },
+        react_1.default.createElement("rect", { width: "24", height: "24", fill: "#3663C1", rx: "2" }),
+        react_1.default.createElement("path", { fill: "#FFF", d: "M6.704 17.392V6H9.12c.939 0 1.65.256 2.136.768.485.512.728 1.237.728 2.176v5.328c0 1.067-.259 1.853-.776 2.36-.517.507-1.261.76-2.232.76H6.704zm1.632-9.856v8.32h.752c.459 0 .784-.115.976-.344.192-.23.288-.59.288-1.08V8.944c0-.448-.09-.795-.272-1.04-.181-.245-.512-.368-.992-.368h-.752zm6.256 9.856V7.536h-1.888V6h5.408v1.536h-1.888v9.856h-1.632z" }))));
+exports.AnalyticTypeDatatime = AnalyticTypeDatatime;
+//# sourceMappingURL=analytic-type-datatime.js.map

package/lib/components/column-analytic-type-icons/analytic-type-geo-latitude.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnalyticTypeGeoLatitude = void 0;
+const react_1 = __importDefault(require("react"));
+const AnalyticTypeGeoLatitude = (props = { size: 24 }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size, height: props.size, viewBox: "0 0 24 24" },
+    react_1.default.createElement("g", { fill: "none", "fill-rule": "evenodd" },
+        react_1.default.createElement("rect", { width: "24", height: "24", fill: "#3663C1", rx: "2" }),
+        react_1.default.createElement("path", { fill: "#FFF", d: "M6.304 8.784c0-.459.08-.864.24-1.216a2.57 2.57 0 0 1 1.512-1.392C8.381 6.059 8.709 6 9.04 6c.33 0 .659.059.984.176a2.9 2.9 0 0 1 .888.512c.256.235.464.528.624.88.16.352.24.757.24 1.216v.576h-1.632v-.576c0-.395-.11-.685-.328-.872a1.157 1.157 0 0 0-.776-.28c-.299 0-.557.093-.776.28-.219.187-.328.477-.328.872V14.8c0 .395.11.685.328.872.219.187.477.28.776.28.299 0 .557-.093.776-.28.219-.187.328-.477.328-.872v-2.144H8.848v-1.44h2.928V14.8c0 .48-.08.89-.24 1.232-.16.341-.368.624-.624.848-.267.235-.563.41-.888.528a2.882 2.882 0 0 1-.984.176c-.33 0-.659-.059-.984-.176a2.567 2.567 0 0 1-.872-.528 2.443 2.443 0 0 1-.64-.848c-.16-.341-.24-.752-.24-1.232V8.784zm6.912 8.704V6.096h1.632v9.76h3.232v1.632h-4.864z" }))));
+exports.AnalyticTypeGeoLatitude = AnalyticTypeGeoLatitude;
+//# sourceMappingURL=analytic-type-geo-latitude.js.map

package/lib/components/column-analytic-type-icons/analytic-type-geo-longitude.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnalyticTypeGeoLongitude = void 0;
+const react_1 = __importDefault(require("react"));
+const AnalyticTypeGeoLongitude = (props = { size: 24 }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size, height: props.size, viewBox: "0 0 24 24" },
+    react_1.default.createElement("g", { fill: "none", "fill-rule": "evenodd" },
+        react_1.default.createElement("rect", { width: "24", height: "24", fill: "#3663C1", rx: "2" }),
+        react_1.default.createElement("path", { fill: "#FFF", d: "M6.304 8.784c0-.459.08-.864.24-1.216a2.57 2.57 0 0 1 1.512-1.392C8.381 6.059 8.709 6 9.04 6c.33 0 .659.059.984.176a2.9 2.9 0 0 1 .888.512c.256.235.464.528.624.88.16.352.24.757.24 1.216v.576h-1.632v-.576c0-.395-.11-.685-.328-.872a1.157 1.157 0 0 0-.776-.28c-.299 0-.557.093-.776.28-.219.187-.328.477-.328.872V14.8c0 .395.11.685.328.872.219.187.477.28.776.28.299 0 .557-.093.776-.28.219-.187.328-.477.328-.872v-2.144H8.848v-1.44h2.928V14.8c0 .48-.08.89-.24 1.232-.16.341-.368.624-.624.848-.267.235-.563.41-.888.528a2.882 2.882 0 0 1-.984.176c-.33 0-.659-.059-.984-.176a2.567 2.567 0 0 1-.872-.528 2.443 2.443 0 0 1-.64-.848c-.16-.341-.24-.752-.24-1.232V8.784zm6.912 8.704V6.096h1.632v9.76h3.232v1.632h-4.864z" }))));
+exports.AnalyticTypeGeoLongitude = AnalyticTypeGeoLongitude;
+//# sourceMappingURL=analytic-type-geo-longitude.js.map

package/lib/components/column-analytic-type-icons/analytic-type-numeric.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnalyticTypeNumeric = void 0;
+const react_1 = __importDefault(require("react"));
+const AnalyticTypeNumeric = (props = { size: 24 }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size, height: props.size, viewBox: "0 0 24 24" },
+    react_1.default.createElement("g", { fill: "none", "fill-rule": "evenodd" },
+        react_1.default.createElement("rect", { width: "24", height: "24", fill: "#3663C1", rx: "2" }),
+        react_1.default.createElement("path", { fill: "#FFF", d: "M1.296 17.392V6h1.568l2.464 6.864h.032V6h1.632v11.392H5.456L2.96 10.544h-.032v6.848H1.296zM13.744 6v8.832c0 .373-.067.717-.2 1.032a2.715 2.715 0 0 1-1.416 1.416c-.32.139-.661.208-1.024.208s-.701-.07-1.016-.208a2.743 2.743 0 0 1-.84-.576 2.743 2.743 0 0 1-.576-.84 2.53 2.53 0 0 1-.208-1.032V6h1.632v8.672c0 .405.096.704.288.896a.977.977 0 0 0 .72.288.977.977 0 0 0 .72-.288c.192-.192.288-.49.288-.896V6h1.632zm1.536 11.392V6h1.568l2.096 6.032h.032L21.056 6h1.584v11.392h-1.632v-6.928h-.032L19.36 15.36h-.816l-1.6-4.896h-.032v6.928H15.28z" }))));
+exports.AnalyticTypeNumeric = AnalyticTypeNumeric;
+//# sourceMappingURL=analytic-type-numeric.js.map

package/lib/components/column-analytic-type-icons/index.js

@@ -0,0 +1,22 @@
+"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("./analytic-type-category"), exports);
+__exportStar(require("./analytic-type-datatime"), exports);
+__exportStar(require("./analytic-type-geo-latitude"), exports);
+__exportStar(require("./analytic-type-geo-longitude"), exports);
+__exportStar(require("./analytic-type-numeric"), exports);
+//# sourceMappingURL=index.js.map

package/lib/{feature-descriptor/domains-descriptors-tree/components → components/column-source-type-icons}/index.js

@@ -14,5 +14,5 @@ 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("./type-tree-item"), exports);
+__exportStar(require("./source-type-int"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/column-source-type-icons/source-type-int.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SourceTypeInt = void 0;
+const react_1 = __importDefault(require("react"));
+const SourceTypeInt = (props = { size: 24 }) => (react_1.default.createElement("svg", { viewBox: "0 0 24 24", width: props.size, height: props.size },
+    react_1.default.createElement("g", null,
+        react_1.default.createElement("rect", { width: "24", height: "24", fill: "#575757", rx: "3", x: "0", y: "0" }),
+        react_1.default.createElement("text", { fill: "rgb(255, 255, 255)", style: {
+                fontSize: '11px',
+                fontWeight: '700'
+            }, x: "3", y: "16" }))));
+exports.SourceTypeInt = SourceTypeInt;
+//# sourceMappingURL=source-type-int.js.map

package/lib/{components/input/index.js → embed.js}

@@ -14,5 +14,5 @@ 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("./input"), exports);
-//# sourceMappingURL=index.js.map
+__exportStar(require("./index"), exports);
+//# sourceMappingURL=embed.js.map

package/lib/extension.js

@@ -1,21 +1,8 @@
 "use strict";
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-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 });
+exports.load_ipython_extension = void 0;
 // Entry point for the notebook bundle containing custom model definitions.
 //
 // Setup notebook base URL
@@ -23,9 +10,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Some static assets may be required by the custom widget javascript. The base
 // url for the notebook is not known at build time and is therefore computed
 // dynamically.
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-window.__webpack_public_path__ =
-    document.querySelector('body').getAttribute('data-base-url') +
-        'nbextensions/dotdata_widgets';
-__exportStar(require("./index"), exports);
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+if (window.require) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window.require.config({
+        map: {
+            '*': {
+                // prettier-ignore
+                'dotdata_widgets': 'nbextensions/dotdata_widgets/index',
+            },
+        },
+    });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window.requirejs.config({
+        map: {
+            '*': {
+                // prettier-ignore
+                'dotdata_widgets': 'nbextensions/dotdata_widgets/index',
+            },
+        },
+    });
+}
+exports.default = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    load_ipython_extension: function () { },
+};
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function load_ipython_extension() { }
+exports.load_ipython_extension = load_ipython_extension;
 //# sourceMappingURL=extension.js.map

package/lib/feature/feature-details/FeatureCorrelatedFeaturesTable.js

@@ -10,7 +10,7 @@ const _utils_1 = require("../../utils");
 const FeatureCorrelatedFeaturesTable = ({ correlatedFeatures }) => {
     return (react_1.default.createElement("table", { className: "table", style: { width: '100%' } },
         react_1.default.createElement("tr", null,
-            react_1.default.createElement("th", { className: "label-bold" }, "Name"),
+            react_1.default.createElement("th", { className: "label-bold" }, "Feature ID"),
             react_1.default.createElement("th", { className: "label-bold" }, "Correlation"),
             react_1.default.createElement("th", { className: "label-bold" }, "Explanation")),
         correlatedFeatures.map(([{ id, explanation }, correlation]) => (react_1.default.createElement("tr", null,

package/lib/feature/feature-details/FeatureDistributionChart.js

@@ -36,12 +36,7 @@ const FeatureDistributionChart = ({ histogram }) => {
         const histogramSpec = feature_1.ContinuousHistogram.isTypeOf(histogram)
             ? createContinuousHistogramSpec(histogram)
             : createDiscreteHistogramSpec(histogram);
-        const view = new vega.View(vega.parse({
-            width: elemRef.current.clientWidth,
-            height: 140,
-            padding: 5,
-            ...histogramSpec,
-        }), {
+        const view = new vega.View(vega.parse(Object.assign({ width: elemRef.current.clientWidth, height: 140, padding: 5 }, histogramSpec)), {
             renderer: 'canvas',
             hover: true,
             container: elemRef.current,

package/lib/feature/feature-explanation/FeatureExplanation.js

@@ -16,31 +16,28 @@ const UnknownExplanationBlock_1 = require("./components/UnknownExplanationBlock"
 const FeatureExplanationInternal = ({ explanationBlocks, }) => {
     return (react_1.default.createElement(react_1.default.Fragment, null, explanationBlocks.map(block => {
         if (feature_explanation_1.FeatureExplanationBlock.isTextExplanationBlock(block)) {
-            return react_1.default.createElement(TextExplanationBlock_1.TextExplanationBlock, { ...block });
+            return react_1.default.createElement(TextExplanationBlock_1.TextExplanationBlock, Object.assign({}, block));
         }
         else if (feature_explanation_1.FeatureExplanationBlock.isColumnExplanationBlock(block)) {
-            return react_1.default.createElement(ColumnExplanationBlock_1.ColumnExplanationBlock, { ...block });
+            return react_1.default.createElement(ColumnExplanationBlock_1.ColumnExplanationBlock, Object.assign({}, block));
         }
         else if (feature_explanation_1.FeatureExplanationBlock.isDataSlotExplanationBlock(block)) {
-            return react_1.default.createElement(DataSlotExplanationBlock_1.DataSlotExplanationBlock, { ...block });
+            return react_1.default.createElement(DataSlotExplanationBlock_1.DataSlotExplanationBlock, Object.assign({}, block));
         }
         else if (feature_explanation_1.FeatureExplanationBlock.isPetExplanationBlock(block)) {
-            return react_1.default.createElement(PetExplanationBlock_1.PetExplanationBlock, { ...block });
+            return react_1.default.createElement(PetExplanationBlock_1.PetExplanationBlock, Object.assign({}, block));
         }
         else if (feature_explanation_1.FeatureExplanationBlock.isTextWithDataSlotContextExplanationBlock(block)) {
-            return react_1.default.createElement(TextWithDataSlotContextExplanationBlock_1.TextWithDataSlotContextExplanationBlock, { ...block });
+            return react_1.default.createElement(TextWithDataSlotContextExplanationBlock_1.TextWithDataSlotContextExplanationBlock, Object.assign({}, block));
         }
         else if (feature_explanation_1.FeatureExplanationBlock.isTopicExplanationBlock(block)) {
-            return react_1.default.createElement(TopicExplanationBlock_1.TopicExplanationBlock, { ...block });
+            return react_1.default.createElement(TopicExplanationBlock_1.TopicExplanationBlock, Object.assign({}, block));
         }
         else if (feature_explanation_1.FeatureExplanationBlock.isOperatorExplanationBlock(block)) {
-            return (react_1.default.createElement(FeatureExplanationInternal, { explanationBlocks: block.tokens.map(token => ({
-                    ...token,
-                    pathType: block.type,
-                })) }));
+            return (react_1.default.createElement(FeatureExplanationInternal, { explanationBlocks: block.tokens.map(token => (Object.assign(Object.assign({}, token), { pathType: block.type }))) }));
         }
         else {
-            return react_1.default.createElement(UnknownExplanationBlock_1.UnknownExplanationBlock, { ...block });
+            return react_1.default.createElement(UnknownExplanationBlock_1.UnknownExplanationBlock, Object.assign({}, block));
         }
     })));
 };

package/lib/feature/feature-likes/{feature-likes.js → FeatureLikes.js}

@@ -17,17 +17,14 @@ var FeatureLike;
     FeatureLike[FeatureLike["Disliked"] = 2] = "Disliked";
 })(FeatureLike = exports.FeatureLike || (exports.FeatureLike = {}));
 const neutralStyle = {
-    cursor: 'pointer',
     fontSize: '18px',
-    color: 'var(  --c-grey-600)',
+    color: 'var(--c-grey-600)',
 };
 const likedStyle = {
-    cursor: 'pointer',
     fontSize: '18px',
-    color: 'var( --c-green-600)',
+    color: 'var(--c-green-600)',
 };
 const dislikedStyle = {
-    cursor: 'pointer',
     fontSize: '18px',
     color: 'var(--c-red-600)',
 };
@@ -41,4 +38,4 @@ const FeatureLikes = ({ liked, toggleIsLiked, toggleIsDisliked }) => {
         react_1.default.createElement(material_1.IconButton, { color: "primary", size: "small", onClick: toggleIsDisliked }, [FeatureLike.Neutral, FeatureLike.Liked].includes(liked) ? (react_1.default.createElement(ThumbDownOffAlt_1.default, { sx: neutralStyle })) : (react_1.default.createElement(ThumbDownAlt_1.default, { sx: dislikedStyle })))));
 };
 exports.FeatureLikes = FeatureLikes;
-//# sourceMappingURL=feature-likes.js.map
+//# sourceMappingURL=FeatureLikes.js.map

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

@@ -14,5 +14,5 @@ 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);
+__exportStar(require("./FeatureLikes"), exports);
 //# sourceMappingURL=index.js.map

package/lib/feature/feature-user-explanation/FeatureUserExplanation.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureUserExplanation = void 0;
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const FeatureUserExplanation = (props) => {
+    return (react_1.default.createElement(material_1.FormControl, { style: { width: '100%' } },
+        react_1.default.createElement(material_1.TextField, { hiddenLabel: true, margin: "dense", placeholder: "User explanation", style: { width: '100%', marginTop: 0 }, value: props.userExplanation, variant: "standard", size: "small", onChange: e => props.onUserExplanationChange(e.target.value) })));
+};
+exports.FeatureUserExplanation = FeatureUserExplanation;
+//# sourceMappingURL=FeatureUserExplanation.js.map

package/lib/feature/feature-user-explanation/FeatureUserExplanationDisplay.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.FeatureUserExplanationDisplay = exports.UserExplanationSeparator = void 0;
+const react_1 = __importDefault(require("react"));
+const dompurify_1 = __importDefault(require("dompurify"));
+exports.UserExplanationSeparator = '**';
+const separator = exports.UserExplanationSeparator.split('')
+    .map(x => `\\${x}`)
+    .join('');
+const FeatureUserExplanationDisplay = (props) => {
+    const html = react_1.default.useMemo(() => {
+        const styledText = props.userExplanation.replaceAll(new RegExp(`${separator}(.*?)${separator}`, 'gm'), x => `<span style="color: var(--c-blue-700); font-weight: 500;">${x.replaceAll(exports.UserExplanationSeparator, '')}</span>`);
+        return dompurify_1.default.sanitize(styledText);
+    }, [props.userExplanation]);
+    return (react_1.default.createElement("span", { dangerouslySetInnerHTML: {
+            __html: html,
+        } }));
+};
+exports.FeatureUserExplanationDisplay = FeatureUserExplanationDisplay;
+//# sourceMappingURL=FeatureUserExplanationDisplay.js.map

package/lib/feature/feature-user-explanation/explanation-to-user-explanation.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.explanationToUserExplanation = void 0;
+const feature_explanation_1 = require("../../models/feature-explanation");
+const FeatureUserExplanationDisplay_1 = require("./FeatureUserExplanationDisplay");
+function explanationToUserExplanation(tokens) {
+    return explanationBlockToString(tokens).flat(Infinity).join('');
+}
+exports.explanationToUserExplanation = explanationToUserExplanation;
+function explanationBlockToString(tokens) {
+    return tokens.map(block => {
+        const textWrapper = ColorizeUserExplanation(block);
+        if (feature_explanation_1.FeatureExplanationBlock.isTextExplanationBlock(block)) {
+            return textWrapper(block.text);
+        }
+        else if (feature_explanation_1.FeatureExplanationBlock.isColumnExplanationBlock(block)) {
+            return textWrapper(block.columnName);
+        }
+        else if (feature_explanation_1.FeatureExplanationBlock.isDataSlotExplanationBlock(block)) {
+            return textWrapper(block.dataSlotName);
+        }
+        else if (feature_explanation_1.FeatureExplanationBlock.isPetExplanationBlock(block)) {
+            return textWrapper(block.stringRepresentation);
+        }
+        else if (feature_explanation_1.FeatureExplanationBlock.isTextWithDataSlotContextExplanationBlock(block)) {
+            return textWrapper(block.text);
+        }
+        else if (feature_explanation_1.FeatureExplanationBlock.isTopicExplanationBlock(block)) {
+            return textWrapper(block.name);
+        }
+        else if (feature_explanation_1.FeatureExplanationBlock.isOperatorExplanationBlock(block)) {
+            return explanationBlockToString(block.tokens.map(token => (Object.assign(Object.assign({}, token), { pathType: block.type }))));
+        }
+        else {
+            return '...';
+        }
+    });
+}
+function ColorizeUserExplanation(block) {
+    const wrap = (text) => `${FeatureUserExplanationDisplay_1.UserExplanationSeparator}` + text + `${FeatureUserExplanationDisplay_1.UserExplanationSeparator}`;
+    return (text) => {
+        if (block.type === feature_explanation_1.FeatureExplanationBlock.Type.DataSlot) {
+            return wrap(text);
+        }
+        else if (block.type === feature_explanation_1.FeatureExplanationBlock.Type.Column ||
+            block.type === feature_explanation_1.FeatureExplanationBlock.Type.PredictionExecutionTime) {
+            const pathType = block.pathType;
+            if ([
+                feature_explanation_1.FeatureExplanationBlock.Type.Filter,
+                feature_explanation_1.FeatureExplanationBlock.Type.Reduce,
+            ].includes(pathType)) {
+                return wrap(text);
+            }
+        }
+        return text;
+    };
+}
+//# sourceMappingURL=explanation-to-user-explanation.js.map

package/lib/{feature-descriptor/domains-descriptors-tree/context → feature/feature-user-explanation}/index.js

@@ -14,6 +14,7 @@ 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-item-selection-context"), exports);
-__exportStar(require("./domains-descriptions-tree-config-context"), exports);
+__exportStar(require("./FeatureUserExplanation"), exports);
+__exportStar(require("./FeatureUserExplanationDisplay"), exports);
+__exportStar(require("./explanation-to-user-explanation"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -48,7 +48,7 @@ function DomainsDescriptionsSelectionContextProvider(props) {
         });
         props.setSelectedDomainDescriptionIds(Array.from(selectedDomainDescriptionsIds.values()));
     }
-    return (React.createElement(exports.DomainsDescriptionsSelectionContext.Provider, { value: [selectedDomainDescriptionsIds, { toggleSelection }], ...props }));
+    return (React.createElement(exports.DomainsDescriptionsSelectionContext.Provider, Object.assign({ value: [selectedDomainDescriptionsIds, { toggleSelection }] }, props)));
 }
 exports.DomainsDescriptionsSelectionContextProvider = DomainsDescriptionsSelectionContextProvider;
 //# sourceMappingURL=domains-descriptions-selection-context.js.map

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

@@ -36,7 +36,8 @@ function useDomainsDescriptionsTreeConfig() {
 }
 exports.useDomainsDescriptionsTreeConfig = useDomainsDescriptionsTreeConfig;
 function DomainsDescriptionsTreeConfigContextProvider(props) {
-    return (React.createElement(exports.DomainsDescriptionsTreeConfigContext.Provider, { value: props.configuration ?? config_1.DomainsDescriptionsTreeConfig.DEFAULT, ...props }));
+    var _a;
+    return (React.createElement(exports.DomainsDescriptionsTreeConfigContext.Provider, Object.assign({ value: (_a = props.configuration) !== null && _a !== void 0 ? _a : config_1.DomainsDescriptionsTreeConfig.DEFAULT }, props)));
 }
 exports.DomainsDescriptionsTreeConfigContextProvider = DomainsDescriptionsTreeConfigContextProvider;
 //# sourceMappingURL=domains-descriptions-tree-config-context.js.map

package/lib/feature-descriptor/domains-descriptions-tree/context/domains-descriptions-tree-item-selection-context.js

@@ -22,6 +22,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DomainsDescriptionsTreeItemSelectionContextProvider = exports.useDomainsDescriptionsTreeItemSelection = exports.DomainsDescriptionsTreeItemSelectionContext = void 0;
 const lodash_1 = require("lodash");
@@ -40,17 +51,14 @@ function DomainsDescriptionsTreeItemSelectionContextProvider(props) {
     const [selectedTreeItems, setSelectedTreeItems] = React.useState(() => ({}));
     function toggleTreeItemSelection(nodeId, domains) {
         if ((0, _utils_1.isSet)(selectedTreeItems[nodeId])) {
-            const { [nodeId]: _remove, ...rest } = selectedTreeItems;
+            const _a = selectedTreeItems, _b = nodeId, _remove = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
             setSelectedTreeItems(rest);
         }
         else {
-            setSelectedTreeItems({
-                ...selectedTreeItems,
-                [nodeId]: (0, lodash_1.uniqBy)(domains, JSON.stringify),
-            });
+            setSelectedTreeItems(Object.assign(Object.assign({}, selectedTreeItems), { [nodeId]: (0, lodash_1.uniqBy)(domains, JSON.stringify) }));
         }
     }
-    return (React.createElement(exports.DomainsDescriptionsTreeItemSelectionContext.Provider, { value: [selectedTreeItems, { toggleTreeItemSelection }], ...props }));
+    return (React.createElement(exports.DomainsDescriptionsTreeItemSelectionContext.Provider, Object.assign({ value: [selectedTreeItems, { toggleTreeItemSelection }] }, props)));
 }
 exports.DomainsDescriptionsTreeItemSelectionContextProvider = DomainsDescriptionsTreeItemSelectionContextProvider;
 //# sourceMappingURL=domains-descriptions-tree-item-selection-context.js.map

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

@@ -28,7 +28,7 @@ const DomainsDescriptionsTree = ({ descriptionsTree, children }) => {
             react_1.default.createElement(material_1.Button, { className: "toggle-all-nodes-btn", variant: "outlined", startIcon: react_1.default.createElement(ToggleIcon, { allNodeIds: allNodeIds, expandedNodes: expandedNodes }), onClick: () => setExpandedNodes((0, lodash_1.isEmpty)(expandedNodes) ? allNodeIds : []) }),
             react_1.default.Children.toArray(children)
                 .filter(react_1.default.isValidElement)
-                .filter(child => child?.type === exports.FeatureDomainDescriptionsTreeHeader)),
+                .filter(child => (child === null || child === void 0 ? void 0 : child.type) === exports.FeatureDomainDescriptionsTreeHeader)),
         react_1.default.createElement("div", null,
             react_1.default.createElement(TreeView_1.default, { defaultCollapseIcon: react_1.default.createElement(ExpandMore_1.default, null), defaultExpandIcon: react_1.default.createElement(ChevronRight_1.default, null), disabledItemsFocusable: false, multiSelect: true, expanded: expandedNodes, onNodeToggle: (_, nodeIds) => setExpandedNodes(nodeIds) }, descriptionsTree.types.map(type => (react_1.default.createElement(components_1.TypeTreeItem, { key: type.nodeId, type: type })))))));
 };

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

@@ -18,4 +18,5 @@ __exportStar(require("./domains-descriptions-tree"), exports);
 __exportStar(require("./models"), exports);
 __exportStar(require("./context"), exports);
 __exportStar(require("./utils"), exports);
+__exportStar(require("./config"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -4,7 +4,7 @@ exports.DescriptionsTree = void 0;
 const _utils_1 = require("../../../utils");
 var DescriptionsTree;
 (function (DescriptionsTree) {
-    function appendGroupId(groups, prefix) {
+    function appendNodeId(groups, prefix) {
         const id = DescriptionsTree.createGroupId(prefix);
         return {
             types: groups.types.map((type, typeIdx) => {
@@ -14,16 +14,13 @@ var DescriptionsTree;
                     columns: type.columns.map((column, columnIdx) => ({
                         nodeId: id({ typeIdx, columnIdx }),
                         summary: column.summary,
-                        descriptions: column.descriptions.map((description, descriptionIdx) => ({
-                            ...description,
-                            nodeId: id({ typeIdx, columnIdx, descriptionIdx }),
-                        })),
+                        descriptions: column.descriptions.map((description, descriptionIdx) => (Object.assign(Object.assign({}, description), { nodeId: id({ typeIdx, columnIdx, descriptionIdx }) }))),
                     })),
                 };
             }),
         };
     }
-    DescriptionsTree.appendGroupId = appendGroupId;
+    DescriptionsTree.appendNodeId = appendNodeId;
     function createGroupId(prefix) {
         return (props) => {
             return [