dotdata_widgets 0.1.2 → 0.1.3

package/lib/components/accordion/Accordion.js

@@ -1,18 +1,52 @@
-import React, { useState } from 'react';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = exports.AccordionDetails = exports.AccordionHeader = void 0;
+const react_1 = __importStar(require("react"));
 // eslint-disable-next-line @typescript-eslint/ban-types
-export const AccordionHeader = ({ children, }) => React.createElement(React.Fragment, null, children);
+const AccordionHeader = ({ children, }) => react_1.default.createElement(react_1.default.Fragment, null, children);
+exports.AccordionHeader = AccordionHeader;
 // eslint-disable-next-line @typescript-eslint/ban-types
-export const AccordionDetails = ({ children, }) => React.createElement(React.Fragment, null, children);
-export const Accordion = ({ children, expandedDetailsStyle, collapsedDetailsStyle, expandedHeaderStyle, collapsedHeaderStyle, toggleStyle, initialState, }) => {
-    const [isExpanded, setIsExpanded] = useState(() => initialState ?? false);
-    const components = React.Children.toArray(children).filter(React.isValidElement);
-    const Header = components.find(child => child.type?.name === AccordionHeader.name);
-    const Details = components.find(child => child.type?.name === AccordionDetails.name);
-    return (React.createElement("div", { className: `dotdata-accordion ${isExpanded
+const AccordionDetails = ({ children, }) => react_1.default.createElement(react_1.default.Fragment, null, children);
+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);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        collapse() {
+            setIsExpanded(false);
+        },
+    }));
+    return (react_1.default.createElement("div", { className: `dotdata-accordion ${isExpanded
             ? 'dotdata-accordion-expanded'
             : 'dotdata-accordion-collapsed'}` },
-        React.createElement("div", { style: isExpanded ? expandedHeaderStyle : collapsedHeaderStyle, className: "dotdata-accordion-header" },
-            React.createElement("div", { className: `dotdata-accordion-header-toggle ${isExpanded ? 'expanded' : ''}`, style: toggleStyle, onClick: () => setIsExpanded(!isExpanded) }, "\u25B6"),
+        react_1.default.createElement("div", { style: isExpanded ? expandedHeaderStyle : collapsedHeaderStyle, className: "dotdata-accordion-header" },
+            react_1.default.createElement("div", { className: `dotdata-accordion-header-toggle ${isExpanded ? 'expanded' : ''}`, style: toggleStyle, onClick: () => setIsExpanded(!isExpanded) }, "\u25B6"),
             Header),
-        isExpanded && (React.createElement("div", { style: isExpanded ? expandedDetailsStyle : collapsedDetailsStyle, className: "dotdata-accordion-details" }, Details))));
-};
+        isExpanded && (react_1.default.createElement("div", { style: isExpanded ? expandedDetailsStyle : collapsedDetailsStyle, className: "dotdata-accordion-details" }, Details))));
+});
+//# sourceMappingURL=Accordion.js.map

package/lib/components/accordion/index.js

@@ -1 +1,18 @@
-export * from './Accordion';
+"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("./Accordion"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/input/index.js

@@ -1 +1,18 @@
-export * from './input';
+"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("./input"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/input/input.js

@@ -1,6 +1,14 @@
-import React from 'react';
-export function Input(props) {
+"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.createElement("input", { type: "text", ...restProps, className: `dd-input ${restProps.className ?? ''}  ${isSmall ? 'small' : ''}`, onChange: event => onValueChange(event.target.value) }));
+    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

package/lib/extension.js

@@ -1,5 +1,21 @@
+"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 });
 // Entry point for the notebook bundle containing custom model definitions.
 //
 // Setup notebook base URL
@@ -11,4 +27,5 @@
 window.__webpack_public_path__ =
     document.querySelector('body').getAttribute('data-base-url') +
         'nbextensions/dotdata_widgets';
-export * from './index';
+__exportStar(require("./index"), exports);
+//# sourceMappingURL=extension.js.map

package/lib/feature/feature-details/FeatureCorrelatedFeaturesTable.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.FeatureCorrelatedFeaturesTable = void 0;
+const react_1 = __importDefault(require("react"));
+const FeatureExplanation_1 = require("../feature-explanation/FeatureExplanation");
+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" }, "Correlation"),
+            react_1.default.createElement("th", { className: "label-bold" }, "Explanation")),
+        correlatedFeatures.map(([{ id, explanation }, correlation]) => (react_1.default.createElement("tr", null,
+            react_1.default.createElement("td", null, id),
+            react_1.default.createElement("td", null, _utils_1.Localize.formatNumber(correlation)),
+            react_1.default.createElement("td", null, react_1.default.createElement(FeatureExplanation_1.FeatureExplanation, { explanationBlocks: explanation.tokens })))))));
+};
+exports.FeatureCorrelatedFeaturesTable = FeatureCorrelatedFeaturesTable;
+//# sourceMappingURL=FeatureCorrelatedFeaturesTable.js.map

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

@@ -0,0 +1,218 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureDistributionChart = void 0;
+const react_1 = __importStar(require("react"));
+const vega = __importStar(require("vega"));
+const feature_1 = require("../../models/feature");
+const FeatureDistributionChart = ({ histogram }) => {
+    const elemRef = react_1.default.useRef(null);
+    (0, react_1.useEffect)(() => {
+        if (!elemRef.current) {
+            return;
+        }
+        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,
+        }), {
+            renderer: 'canvas',
+            hover: true,
+            container: elemRef.current,
+        });
+        view.runAsync();
+    }, [elemRef]);
+    return react_1.default.createElement("div", { ref: elemRef });
+};
+exports.FeatureDistributionChart = FeatureDistributionChart;
+function createContinuousHistogramSpec(histogram) {
+    return {
+        signals: [
+            {
+                name: 'tooltip',
+                value: {},
+                on: [
+                    { events: 'rect:mouseover', update: 'datum' },
+                    { events: 'rect:mouseout', update: '{}' },
+                ],
+            },
+        ],
+        data: [
+            {
+                name: 'table',
+                values: histogram.bins,
+            },
+        ],
+        scales: [
+            {
+                name: 'xscale',
+                type: 'linear',
+                domain: {
+                    fields: [
+                        { data: 'table', field: 'l' },
+                        { data: 'table', field: 'u' },
+                    ],
+                },
+                range: 'width',
+                nice: true,
+                round: true,
+            },
+            {
+                name: 'yscale',
+                domain: { data: 'table', field: 'frequency' },
+                nice: true,
+                range: 'height',
+            },
+        ],
+        axes: [
+            {
+                orient: 'bottom',
+                scale: 'xscale',
+                labelOverlap: 'parity',
+            },
+            { orient: 'left', scale: 'yscale' },
+        ],
+        marks: [
+            {
+                type: 'rect',
+                from: { data: 'table' },
+                encode: {
+                    enter: {
+                        x: { scale: 'xscale', field: 'l' },
+                        x2: { scale: 'xscale', field: 'u' },
+                        y: { scale: 'yscale', field: 'frequency' },
+                        y2: { scale: 'yscale', value: 0 },
+                    },
+                    update: {
+                        fill: { value: '#1976d2' },
+                    },
+                },
+            },
+            {
+                type: 'text',
+                encode: {
+                    enter: {
+                        align: { value: 'center' },
+                        baseline: { value: 'bottom' },
+                        fill: { value: '#333' },
+                    },
+                    update: {
+                        x: {
+                            scale: 'xscale',
+                            signal: '(tooltip.u + tooltip.l) / 2',
+                            band: 0.5,
+                        },
+                        y: { scale: 'yscale', signal: 'tooltip.frequency', offset: -2 },
+                        text: { signal: 'tooltip.frequency' },
+                        fillOpacity: [
+                            { test: 'datum === tooltip', value: 0 },
+                            { value: 1 },
+                        ],
+                    },
+                },
+            },
+        ],
+    };
+}
+function createDiscreteHistogramSpec(histogram) {
+    return {
+        signals: [
+            {
+                name: 'tooltip',
+                value: {},
+                on: [
+                    { events: 'rect:mouseover', update: 'datum' },
+                    { events: 'rect:mouseout', update: '{}' },
+                ],
+            },
+        ],
+        data: [
+            {
+                name: 'table',
+                values: histogram.bins,
+            },
+        ],
+        scales: [
+            {
+                name: 'xscale',
+                type: 'band',
+                domain: { data: 'table', field: 'label' },
+                range: 'width',
+                round: true,
+            },
+            {
+                name: 'yscale',
+                domain: { data: 'table', field: 'frequency' },
+                nice: true,
+                range: 'height',
+            },
+        ],
+        axes: [
+            { orient: 'bottom', scale: 'xscale', labelOverlap: 'parity' },
+            { orient: 'left', scale: 'yscale' },
+        ],
+        marks: [
+            {
+                type: 'rect',
+                from: { data: 'table' },
+                encode: {
+                    enter: {
+                        x: { scale: 'xscale', field: 'label' },
+                        width: { scale: 'xscale', band: 1 },
+                        y: { scale: 'yscale', field: 'frequency' },
+                        y2: { scale: 'yscale', value: 0 },
+                    },
+                    update: {
+                        fill: { value: '#1976d2' },
+                    },
+                },
+            },
+            {
+                type: 'text',
+                encode: {
+                    enter: {
+                        align: { value: 'center' },
+                        baseline: { value: 'bottom' },
+                        fill: { value: '#333' },
+                    },
+                    update: {
+                        x: { scale: 'xscale', signal: 'tooltip.label', band: 0.5 },
+                        y: { scale: 'yscale', signal: 'tooltip.frequency', offset: -2 },
+                        text: { signal: 'tooltip.frequency' },
+                        fillOpacity: [
+                            { test: 'datum === tooltip', value: 0 },
+                            { value: 1 },
+                        ],
+                    },
+                },
+            },
+        ],
+    };
+}
+//# sourceMappingURL=FeatureDistributionChart.js.map

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

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureStatisticsTable = void 0;
+const react_1 = __importDefault(require("react"));
+const feature_1 = require("../../models/feature");
+const _utils_1 = require("../../utils");
+const metricRowStyle = {
+    borderTop: '1px solid var(--c-grey-100)',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingInlineEnd: '50px',
+    height: '30px',
+};
+const metricNameStyle = {
+    textTransform: 'capitalize',
+};
+const statsOrder = [
+    feature_1.FeatureMetric.Min,
+    feature_1.FeatureMetric.Max,
+    feature_1.FeatureMetric.Mean,
+    feature_1.FeatureMetric.Stddev,
+    feature_1.FeatureMetric.Count,
+    feature_1.FeatureMetric.NullRatio,
+    feature_1.FeatureMetric.ZerosRatio,
+    feature_1.FeatureMetric.Correlation,
+    feature_1.FeatureMetric.FeatureAUC,
+];
+const FeatureStatisticsTable = ({ statistics }) => {
+    return (react_1.default.createElement("div", { style: { columnCount: 2, columnFill: 'balance', columnGap: '60px' } }, Object.entries(statistics)
+        .sort(sortStatsByName)
+        .map(([metricName, metricValue]) => (react_1.default.createElement("div", { key: metricName, style: metricRowStyle },
+        react_1.default.createElement("span", { className: "label-bold", style: metricNameStyle }, metricName),
+        ' ',
+        react_1.default.createElement("span", null, _utils_1.Localize.formatNumber(metricValue, '-')))))));
+};
+exports.FeatureStatisticsTable = FeatureStatisticsTable;
+function sortStatsByName(a, b) {
+    return statsOrder.indexOf(a[0]) - statsOrder.indexOf(b[0]);
+}
+//# sourceMappingURL=FeatureStatisticsTable.js.map

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

@@ -0,0 +1,20 @@
+"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("./FeatureStatisticsTable"), exports);
+__exportStar(require("./FeatureDistributionChart"), exports);
+__exportStar(require("./FeatureCorrelatedFeaturesTable"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureExplanation = void 0;
+const react_1 = __importDefault(require("react"));
+const feature_explanation_1 = require("../../models/feature-explanation");
+const TextExplanationBlock_1 = require("./components/TextExplanationBlock");
+const ColumnExplanationBlock_1 = require("./components/ColumnExplanationBlock");
+const PetExplanationBlock_1 = require("./components/PetExplanationBlock");
+const DataSlotExplanationBlock_1 = require("./components/DataSlotExplanationBlock");
+const TopicExplanationBlock_1 = require("./components/TopicExplanationBlock");
+const TextWithDataSlotContextExplanationBlock_1 = require("./components/TextWithDataSlotContextExplanationBlock");
+const UnknownExplanationBlock_1 = require("./components/UnknownExplanationBlock");
+const FeatureExplanation = ({ explanationBlocks, }) => {
+    return (react_1.default.createElement("div", { style: { display: 'flex' } }, explanationBlocks.map(block => {
+        if (feature_explanation_1.FeatureExplanationBlock.isTextExplanationBlock(block)) {
+            return react_1.default.createElement(TextExplanationBlock_1.TextExplanationBlock, { ...block });
+        }
+        else if (feature_explanation_1.FeatureExplanationBlock.isColumnExplanationBlock(block)) {
+            return react_1.default.createElement(ColumnExplanationBlock_1.ColumnExplanationBlock, { ...block });
+        }
+        else if (feature_explanation_1.FeatureExplanationBlock.isDataSlotExplanationBlock(block)) {
+            return react_1.default.createElement(DataSlotExplanationBlock_1.DataSlotExplanationBlock, { ...block });
+        }
+        else if (feature_explanation_1.FeatureExplanationBlock.isPetExplanationBlock(block)) {
+            return react_1.default.createElement(PetExplanationBlock_1.PetExplanationBlock, { ...block });
+        }
+        else if (feature_explanation_1.FeatureExplanationBlock.isTextWithDataSlotContextExplanationBlock(block)) {
+            return react_1.default.createElement(TextWithDataSlotContextExplanationBlock_1.TextWithDataSlotContextExplanationBlock, { ...block });
+        }
+        else if (feature_explanation_1.FeatureExplanationBlock.isTopicExplanationBlock(block)) {
+            return react_1.default.createElement(TopicExplanationBlock_1.TopicExplanationBlock, { ...block });
+        }
+        else if (feature_explanation_1.FeatureExplanationBlock.isOperatorExplanationBlock(block)) {
+            return (react_1.default.createElement(exports.FeatureExplanation, { explanationBlocks: block.tokens.map(token => ({
+                    ...token,
+                    pathType: block.type,
+                })) }));
+        }
+        else {
+            return react_1.default.createElement(UnknownExplanationBlock_1.UnknownExplanationBlock, { ...block });
+        }
+    })));
+};
+exports.FeatureExplanation = FeatureExplanation;
+//# sourceMappingURL=FeatureExplanation.js.map

package/lib/feature/feature-explanation/components/ColoredExplanationBlock.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColoredExplanationBlock = void 0;
+const react_1 = __importDefault(require("react"));
+const feature_explanation_1 = require("../../../models/feature-explanation");
+const ColoredExplanationBlock = ({ block, children }) => {
+    let color = 'revert';
+    let fontWeight = '400';
+    if (block.type === feature_explanation_1.FeatureExplanationBlock.Type.DataSlot) {
+        color = 'var(--c-blue-700)';
+        fontWeight = '500';
+    }
+    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)) {
+            color = 'var(--c-blue-700)';
+            fontWeight = '500';
+        }
+    }
+    return (react_1.default.createElement("span", { style: {
+            color: color,
+            fontWeight,
+            display: 'inline-block',
+            wordBreak: 'break-word',
+            whiteSpace: 'pre',
+        } }, children));
+};
+exports.ColoredExplanationBlock = ColoredExplanationBlock;
+//# sourceMappingURL=ColoredExplanationBlock.js.map

package/lib/feature/feature-explanation/components/ColumnExplanationBlock.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnExplanationBlock = void 0;
+const react_1 = __importDefault(require("react"));
+const ColoredExplanationBlock_1 = require("./ColoredExplanationBlock");
+const ColumnExplanationBlock = block => (react_1.default.createElement(ColoredExplanationBlock_1.ColoredExplanationBlock, { block: block },
+    react_1.default.createElement("span", { className: "column-name" }, block.columnName)));
+exports.ColumnExplanationBlock = ColumnExplanationBlock;
+//# sourceMappingURL=ColumnExplanationBlock.js.map

package/lib/feature/feature-explanation/components/DataSlotExplanationBlock.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSlotExplanationBlock = void 0;
+const react_1 = __importDefault(require("react"));
+const ColoredExplanationBlock_1 = require("./ColoredExplanationBlock");
+const DataSlotExplanationBlock = block => (react_1.default.createElement(ColoredExplanationBlock_1.ColoredExplanationBlock, { block: block },
+    react_1.default.createElement("span", { className: "sa-data-slot-name" }, block.dataSlotName)));
+exports.DataSlotExplanationBlock = DataSlotExplanationBlock;
+//# sourceMappingURL=DataSlotExplanationBlock.js.map

package/lib/feature/feature-explanation/components/PetExplanationBlock.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PetExplanationBlock = void 0;
+const react_1 = __importDefault(require("react"));
+const ColoredExplanationBlock_1 = require("./ColoredExplanationBlock");
+const PetExplanationBlock = block => (react_1.default.createElement(ColoredExplanationBlock_1.ColoredExplanationBlock, { block: block }, block.stringRepresentation));
+exports.PetExplanationBlock = PetExplanationBlock;
+//# sourceMappingURL=PetExplanationBlock.js.map

package/lib/feature/feature-explanation/components/TextExplanationBlock.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextExplanationBlock = void 0;
+const react_1 = __importDefault(require("react"));
+const TextExplanationBlock = ({ text, }) => react_1.default.createElement("span", { style: { whiteSpace: 'pre' } }, text);
+exports.TextExplanationBlock = TextExplanationBlock;
+//# sourceMappingURL=TextExplanationBlock.js.map

package/lib/feature/feature-explanation/components/TextWithDataSlotContextExplanationBlock.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextWithDataSlotContextExplanationBlock = void 0;
+const react_1 = __importDefault(require("react"));
+const TextWithDataSlotContextExplanationBlock = block => react_1.default.createElement("span", { style: { whiteSpace: 'pre' } }, block.text);
+exports.TextWithDataSlotContextExplanationBlock = TextWithDataSlotContextExplanationBlock;
+//# sourceMappingURL=TextWithDataSlotContextExplanationBlock.js.map

package/lib/feature/feature-explanation/components/TopicExplanationBlock.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopicExplanationBlock = void 0;
+const react_1 = __importDefault(require("react"));
+const TopicExplanationBlock = block => react_1.default.createElement("span", { className: "topic" }, block.name);
+exports.TopicExplanationBlock = TopicExplanationBlock;
+//# sourceMappingURL=TopicExplanationBlock.js.map

package/lib/feature/feature-explanation/components/UnknownExplanationBlock.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnknownExplanationBlock = void 0;
+const react_1 = __importDefault(require("react"));
+const UnknownExplanationBlock = () => (react_1.default.createElement("span", { style: { whiteSpace: 'pre' } }));
+exports.UnknownExplanationBlock = UnknownExplanationBlock;
+//# sourceMappingURL=UnknownExplanationBlock.js.map