react-science 0.19.1

package/lib/app/kinds/iv/plot-view/IvMeasurementsPlot.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_d3_utils_1 = require("react-d3-utils");
+const react_plot_1 = require("react-plot");
+const index_1 = require("../../../../app-data/index");
+const index_2 = require("../../../../components/index");
+const index_3 = require("../../../helpers/index");
+const IvSeries_1 = __importDefault(require("./IvSeries"));
+function IvMeasurementsPlot() {
+    const appState = (0, index_1.useAppState)();
+    const dispatch = (0, index_1.useAppDispatch)();
+    const crossHair = (0, react_plot_1.useCrossHair)();
+    const drawRectangle = (0, react_plot_1.useDrawRectangle)({
+        onEnd(rectangle) {
+            dispatch({
+                type: 'PLOT_ZOOM',
+                payload: {
+                    kind: 'iv',
+                    zoom: {
+                        x: {
+                            min: Math.min(rectangle.x1, rectangle.x2),
+                            max: Math.max(rectangle.x2, rectangle.x1),
+                        },
+                        y: {
+                            min: Math.min(rectangle.y1, rectangle.y2),
+                            max: Math.max(rectangle.y2, rectangle.y1),
+                        },
+                    },
+                },
+            });
+        },
+    });
+    (0, react_plot_1.usePlotEvents)({
+        onDoubleClick() {
+            dispatch({ type: 'PLOT_ZOOM_OUT', payload: { kind: 'iv' } });
+        },
+    });
+    const { unselectedOpacity } = appState.settings.plot;
+    const ivView = appState.view.plot.iv;
+    (0, index_2.assert)(ivView && !!ivView.xVariable && !!ivView.yVariable);
+    const { selectedEntries, unselectedEntries } = (0, index_3.splitEntries)(appState, 'iv');
+    const series = [];
+    for (const { measurement, view } of unselectedEntries) {
+        series.push((0, jsx_runtime_1.jsx)(IvSeries_1.default, { measurement: measurement, xVariableLabel: ivView.xVariable, yVariableLabel: ivView.yVariable, colorConfig: view.color, opacity: view.visible ? unselectedOpacity : 0 }, measurement.id));
+    }
+    for (const { measurement, view } of selectedEntries) {
+        series.push((0, jsx_runtime_1.jsx)(IvSeries_1.default, { measurement: measurement, xVariableLabel: ivView.xVariable, yVariableLabel: ivView.yVariable, colorConfig: view.color, opacity: view.visible ? undefined : 0 }, measurement.id));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_d3_utils_1.ResponsiveChart, { children: ({ width, height }) => ((0, jsx_runtime_1.jsxs)(react_plot_1.Plot, { width: width, height: height, margin: { top: 5, right: 5, bottom: 5, left: 5 }, children: [(0, jsx_runtime_1.jsx)(react_plot_1.Series, { children: series }), (0, jsx_runtime_1.jsxs)(react_plot_1.Annotations, { children: [crossHair.annotations, drawRectangle.annotations] }), (0, jsx_runtime_1.jsx)(react_plot_1.Axis, { displayPrimaryGridLines: true, position: "bottom", label: ivView.xVariable, min: ivView.zoom.x.min, max: ivView.zoom.x.max }), (0, jsx_runtime_1.jsx)(react_plot_1.Axis, { displayPrimaryGridLines: true, position: "left", paddingStart: "10", paddingEnd: "10", label: ivView.yVariable, min: ivView.zoom.y.min, max: ivView.zoom.y.max })] })) }));
+}
+exports.default = IvMeasurementsPlot;

package/lib/app/kinds/iv/plot-view/IvPlotVariablesSelector.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const index_1 = require("../../../../app-data/index");
+const index_2 = require("../../../../components/index");
+const index_3 = require("../../../helpers/index");
+function IvPlotVariablesSelector() {
+    const { data: { measurements: { iv: ivMeasurements }, }, view: { plot: { iv: ivPlot }, }, } = (0, index_1.useAppState)();
+    const dispatch = (0, index_1.useAppDispatch)();
+    (0, index_2.assertNotNull)(ivPlot);
+    const allOptions = new Set();
+    for (const measurement of ivMeasurements.entries) {
+        const variables = (0, index_1.getAllVariableSymbols)(measurement);
+        for (const variable of variables) {
+            allOptions.add(variable);
+        }
+    }
+    const options = Array.from(allOptions);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 5 }, children: [(0, jsx_runtime_1.jsx)(index_3.MeasurementVariableSelect, { label: "Y variable", value: ivPlot.yVariable || '', options: options, onSelect: (variable) => dispatch({
+                    type: 'IV_PLOT_SELECT_VARIABLE',
+                    payload: { axis: 'y', variable },
+                }) }), (0, jsx_runtime_1.jsx)(index_3.MeasurementVariableSelect, { label: "X variable", value: ivPlot.xVariable || '', options: options, onSelect: (variable) => dispatch({
+                    type: 'IV_PLOT_SELECT_VARIABLE',
+                    payload: { axis: 'x', variable },
+                }) })] }));
+}
+exports.default = IvPlotVariablesSelector;

package/lib/app/kinds/iv/plot-view/IvPlotView.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IvPlotView = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const fa_1 = require("react-icons/fa");
+const react_plot_1 = require("react-plot");
+const index_1 = require("../../../../app-data/index");
+const index_2 = require("../../../../components/index");
+const IvMeasurementsPlot_1 = __importDefault(require("./IvMeasurementsPlot"));
+const IvPlotVariablesSelector_1 = __importDefault(require("./IvPlotVariablesSelector"));
+function IvPlotView() {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: (0, react_1.css) `
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+      `, children: [(0, jsx_runtime_1.jsx)(VerticalToolbar, {}), (0, jsx_runtime_1.jsxs)("div", { css: (0, react_1.css) `
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+        `, children: [(0, jsx_runtime_1.jsx)(react_plot_1.PlotController, { children: (0, jsx_runtime_1.jsx)(IvMeasurementsPlot_1.default, {}) }), (0, jsx_runtime_1.jsx)(IvPlotVariablesSelector_1.default, {})] })] }));
+}
+exports.IvPlotView = IvPlotView;
+function VerticalToolbar() {
+    const dispatch = (0, index_1.useAppDispatch)();
+    const { view: { selectedKind }, } = (0, index_1.useAppState)();
+    function onZoomOut() {
+        if (selectedKind) {
+            dispatch({ type: 'PLOT_ZOOM_OUT', payload: { kind: selectedKind } });
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(index_2.Toolbar, { orientation: "vertical", children: (0, jsx_runtime_1.jsx)(index_2.Toolbar.Item, { onClick: onZoomOut, title: "Zoom out", children: (0, jsx_runtime_1.jsx)(fa_1.FaCompress, {}) }) }));
+}

package/lib/app/kinds/iv/plot-view/IvSeries.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ml_spectra_processing_1 = require("ml-spectra-processing");
+const react_1 = require("react");
+const react_plot_1 = require("react-plot");
+const index_1 = require("../../../../app-data/index");
+const index_2 = require("../../../helpers/index");
+function IvSeries(props) {
+    const { measurement, colorConfig, opacity, xVariableLabel, yVariableLabel } = props;
+    const xVariable = (0, index_1.getVariableByLabel)(measurement, xVariableLabel);
+    const yVariable = (0, index_1.getVariableByLabel)(measurement, yVariableLabel);
+    const data = (0, react_1.useMemo)(() => {
+        if (!xVariable?.data || !yVariable?.data)
+            return null;
+        return (0, ml_spectra_processing_1.xyToXYObject)({ x: xVariable.data, y: yVariable.data });
+    }, [xVariable?.data, yVariable?.data]);
+    if (!data)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_plot_1.LineSeries, { data: data, lineStyle: {
+            opacity,
+            stroke: (0, index_2.getColorFromConfig)(colorConfig),
+        } }, measurement.id));
+}
+exports.default = IvSeries;

package/lib/app/kinds/mass/MassPlotView.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MassPlotView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const index_1 = require("../../../app-data/index");
+const index_2 = require("../../../components/index");
+const MeasurementMassPlot_1 = require("./MeasurementMassPlot");
+function MassPlotView() {
+    const appState = (0, index_1.useAppState)();
+    const data = (0, index_1.getCurrentMeasurementData)(appState);
+    (0, index_2.assertNotNull)(data);
+    return ((0, jsx_runtime_1.jsx)(MeasurementMassPlot_1.MeasurementMassPlot, { measurement: data.data, measurementDisplay: data.display }));
+}
+exports.MassPlotView = MassPlotView;

package/lib/app/kinds/mass/MeasurementMassPlot.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MeasurementMassPlot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ml_spectra_processing_1 = require("ml-spectra-processing");
+// @ts-expect-error ms-spectrum has no types at the moment.
+const ms_spectrum_1 = require("ms-spectrum");
+const react_1 = require("react");
+const react_plot_1 = require("react-plot");
+const index_1 = require("../../helpers/index");
+function MeasurementMassPlot(props) {
+    const { measurement } = props;
+    if (!measurement.data) {
+        throw new Error('This is weird, the data property is not available on measurement');
+    }
+    if (measurement.data.length === 0) {
+        throw new Error('Data property is empty');
+    }
+    if (measurement.data.length > 1) {
+        throw new Error('Length of data property is larger than 1');
+    }
+    if (!measurement.data[0].variables.x) {
+        throw new Error('x variable in undefined');
+    }
+    if (!measurement.data[0].variables.y) {
+        throw new Error('y variable in undefined');
+    }
+    return ((0, jsx_runtime_1.jsx)(react_plot_1.PlotController, { children: (0, jsx_runtime_1.jsx)(MassComponent, { ...props }) }));
+}
+exports.MeasurementMassPlot = MeasurementMassPlot;
+function MassComponent(props) {
+    const { measurement } = props;
+    const { data } = measurement;
+    const { variables } = data[0];
+    const { x, y } = (0, react_1.useMemo)(() => {
+        return { x: variables.x, y: variables.y };
+    }, [variables]);
+    const { x: xDomain } = (0, react_plot_1.usePlotControllerAxes)();
+    const { profile, peaks } = (0, react_1.useMemo)(() => {
+        const spectrum = new ms_spectrum_1.Spectrum({
+            x: x.data,
+            y: y.data,
+        });
+        const isContinuous = spectrum.isContinuous();
+        const profile = isContinuous &&
+            (0, ml_spectra_processing_1.xyToXYObject)({
+                x: x.data,
+                y: y.data,
+            });
+        return {
+            profile,
+            peaks: spectrum.getPeaks(profile),
+        };
+    }, [x.data, y.data]);
+    const bestPeaks = (0, react_1.useMemo)(() => (0, ms_spectrum_1.getBestPeaks)(peaks, {
+        from: xDomain?.min,
+        to: xDomain?.max,
+        limit: 10,
+        numberSlots: 10,
+        threshold: 0.01,
+    }), [peaks, xDomain?.max, xDomain?.min]);
+    return ((0, jsx_runtime_1.jsxs)(index_1.BasicComponent, { ...props, children: [profile && (0, jsx_runtime_1.jsx)(react_plot_1.LineSeries, { data: profile, lineStyle: { stroke: 'green' } }), (0, jsx_runtime_1.jsx)(react_plot_1.BarSeries, { data: peaks, lineStyle: { stroke: 'red' } }), (0, jsx_runtime_1.jsx)(react_plot_1.Annotations, { children: bestPeaks.map(({ x, y, shortLabel }) => ((0, jsx_runtime_1.jsxs)(react_plot_1.Annotation.Group, { x: x, y: y, children: [(0, jsx_runtime_1.jsx)(react_plot_1.Annotation.Line, { x1: "0", x2: "0", y1: "0", y2: "-5", style: { strokeWidth: 2, stroke: 'blue' } }), (0, jsx_runtime_1.jsx)(react_plot_1.Annotation.Text, { style: { fontSize: '13px', fontWeight: '600' }, x: "2", y: "0", children: shortLabel }), (0, jsx_runtime_1.jsx)(react_plot_1.Annotation.Text, { style: { fontSize: '13px', fontWeight: '600' }, x: "2", y: "-14", children: x.toFixed(4) })] }, x))) })] }));
+}

package/lib/app/kinds/mass/index.js

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

package/lib/app/panels/SignalProcessingPanel.js

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SignalProcessingPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FilterXYSchema_json_1 = __importDefault(require("ml-signal-processing/FilterXYSchema.json"));
+const index_1 = require("../../components/index");
+// get filters information & default options values
+const defaultFilters = FilterXYSchema_json_1.default.anyOf.map(({ properties }) => {
+    const options = {};
+    for (const [key, value] of Object.entries(properties?.options?.properties || {})) {
+        options[key] = {
+            defaultValue: value.default,
+            choices: value.enum,
+            description: value.description,
+        };
+    }
+    return {
+        name: properties.name.enum[0],
+        options,
+    };
+});
+function SignalProcessingPanel(props) {
+    const { filters = [], onChange } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(index_1.Table, { border: false, children: [(0, jsx_runtime_1.jsxs)(index_1.Table.Header, { children: [(0, jsx_runtime_1.jsx)(index_1.ValueRenderers.Title, { value: " " }), (0, jsx_runtime_1.jsx)(index_1.ValueRenderers.Title, { value: "Name" }), (0, jsx_runtime_1.jsx)(index_1.ValueRenderers.Title, { value: "Options" })] }), filters.map(({ name, options }, i) => ((0, jsx_runtime_1.jsxs)(index_1.Table.Row, { border: true, children: [(0, jsx_runtime_1.jsx)(index_1.ValueRenderers.Component, { children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '3px' }, children: [(0, jsx_runtime_1.jsx)(index_1.Button, { style: { width: '15px' }, color: { basic: 'white' }, backgroundColor: { basic: 'green' }, onClick: () => {
+                                                const newFilters = [...filters];
+                                                newFilters.splice(i + 1, 0, getDefaultFilter(defaultFilters[0]));
+                                                onChange?.(newFilters);
+                                            }, children: "+" }), (0, jsx_runtime_1.jsx)(index_1.Button, { style: { width: '15px' }, color: { basic: 'white' }, backgroundColor: { basic: 'red' }, onClick: () => {
+                                                onChange?.(filters.filter((_, j) => j !== i));
+                                            }, children: "-" })] }) }), (0, jsx_runtime_1.jsx)(index_1.ValueRenderers.Component, { children: (0, jsx_runtime_1.jsx)("select", { onChange: ({ target }) => {
+                                        const value = Number(target.value);
+                                        if (!Number.isNaN(value)) {
+                                            const filter = getDefaultFilter(defaultFilters[value]);
+                                            const newFilters = [...filters];
+                                            newFilters[i] = filter;
+                                            onChange?.(newFilters);
+                                        }
+                                    }, style: { border: '1px solid black' }, value: defaultFilters.findIndex((f) => f.name === name), children: defaultFilters.map(({ name }, i) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: normalCase(name) }, name))) }) }), options && ((0, jsx_runtime_1.jsx)(index_1.ValueRenderers.Component, { children: Object.entries(defaultFilters.find((f) => f.name === name)?.options || {}).map((option) => optionInput(option, options, (value) => {
+                                    const FilterOptions = {
+                                        ...filters[i].options,
+                                        [option[0]]: value,
+                                    };
+                                    const filter = {
+                                        name: filters[i].name,
+                                        options: FilterOptions,
+                                    };
+                                    const newFilters = [...filters];
+                                    newFilters[i] = filter;
+                                    onChange?.(newFilters);
+                                })) }))] }, name)))] }), filters.length === 0 && ((0, jsx_runtime_1.jsx)(index_1.Button, { style: { width: '15px', margin: '5px 20px' }, color: { basic: 'white' }, backgroundColor: { basic: 'green' }, onClick: () => {
+                    const newFilters = [getDefaultFilter(defaultFilters[0])];
+                    onChange?.(newFilters);
+                }, children: "+" }))] }));
+}
+exports.SignalProcessingPanel = SignalProcessingPanel;
+function getDefaultFilter({ options, name }) {
+    if (options) {
+        const result = {};
+        for (const [key, { defaultValue }] of Object.entries(options)) {
+            result[key] = defaultValue;
+        }
+        return { name, options: result };
+    }
+    return { name };
+}
+function normalCase(str) {
+    const result = str.replace(/(?<upper>[A-Z])/g, ' $<upper>').trim();
+    return result.charAt(0).toUpperCase() + result.slice(1);
+}
+function optionInput([key, { description, choices }], options, onChange) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '5px' }, children: [choices && choices.length > 0 ? ((0, jsx_runtime_1.jsxs)("select", { onChange: ({ target }) => {
+                    const value = target.value;
+                    if (value) {
+                        onChange(value);
+                    }
+                }, style: { border: '1px solid black' }, value: options?.[key], children: [(0, jsx_runtime_1.jsx)("option", { value: "", disabled: true, selected: true, children: normalCase(key) }), choices.map((choice) => ((0, jsx_runtime_1.jsx)("option", { value: choice, children: normalCase(choice) }, choice)))] })) : ((0, jsx_runtime_1.jsx)("input", { style: { border: '1px solid black', padding: '2px 5px' }, placeholder: normalCase(key), onChange: ({ target }) => {
+                    const value = target.value;
+                    if (value) {
+                        onChange(value);
+                    }
+                }, value: options?.[key] })), (0, jsx_runtime_1.jsx)("label", { style: { marginLeft: '5px' }, children: description })] }, key));
+}

package/lib/app/panels/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("./measurement-info/index"), exports);
+__exportStar(require("./measurement-config/index"), exports);
+__exportStar(require("./measurements/index"), exports);
+__exportStar(require("./SignalProcessingPanel"), exports);

package/lib/app/panels/measurement-config/MeasurementConfigPanel.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MeasurementConfigPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const index_1 = require("../../../app-data/index");
+const index_2 = require("../../../components/index");
+function MeasurementConfigPanel() {
+    const dispatch = (0, index_1.useAppDispatch)();
+    const appState = (0, index_1.useAppState)();
+    const firstMeasurement = (0, index_1.getFirstSelectedMeasurementData)(appState);
+    if (!firstMeasurement) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(StrokeColorModifier, { color: firstMeasurement.display.color, onChange: (color) => {
+                dispatch({
+                    type: 'CHANGE_MEASUREMENTS_DISPLAY',
+                    payload: { display: { color } },
+                });
+            } }) }));
+}
+exports.MeasurementConfigPanel = MeasurementConfigPanel;
+function StrokeColorModifier(props) {
+    const { color, onChange } = props;
+    if (color.kind === 'fixedGradient') {
+        throw new Error('fixedGradient not supported yet');
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', padding: 8 }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: '1 1 0' }, children: "Stroke color" }), (0, jsx_runtime_1.jsx)("div", { style: { flex: '1 1 0' }, children: color.kind === 'fixed' && ((0, jsx_runtime_1.jsx)(index_2.ColorPickerDropdown, { color: { hex: color.color }, onChangeComplete: ({ hex }) => onChange({ kind: 'fixed', color: hex }) })) })] }));
+}

package/lib/app/panels/measurement-config/MeasurementConfigPanelAccordion.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MeasurementConfigPanelAccordion = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const index_1 = require("../../../app-data/index");
+const index_2 = require("../../../components/index");
+const MeasurementConfigPanel_1 = require("./MeasurementConfigPanel");
+function MeasurementConfigPanelAccordion() {
+    const appState = (0, index_1.useAppState)();
+    const { view: { selectedMeasurements, selectedKind }, } = appState;
+    if (!selectedKind) {
+        return null;
+    }
+    const size = (selectedMeasurements[selectedKind] || []).length;
+    return ((0, jsx_runtime_1.jsx)(index_2.Accordion.Item, { title: `Measurement${size > 1 ? 's' : ''} config`, defaultOpened: true, children: (0, jsx_runtime_1.jsx)(MeasurementConfigPanel_1.MeasurementConfigPanel, {}) }));
+}
+exports.MeasurementConfigPanelAccordion = MeasurementConfigPanelAccordion;

package/lib/app/panels/measurement-config/index.js

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

package/lib/app/panels/measurement-info/MeasurementInfoPanel.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MeasurementInfoPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const index_1 = require("../../../app-data/index");
+const index_2 = require("../../../components/index");
+function MeasurementInfoPanel() {
+    const appState = (0, index_1.useAppState)();
+    const measurement = (0, index_1.getCurrentMeasurementData)(appState);
+    const [search, setSearch] = (0, react_1.useState)('');
+    if (!measurement)
+        return null;
+    const { meta, info } = measurement.data;
+    function viewData(data) {
+        return Object.keys(data).map((key) => {
+            const value = data[key];
+            if (!key.toLowerCase().includes(search.toLowerCase()) &&
+                !valueSearch(value, search)) {
+                return null;
+            }
+            return ((0, jsx_runtime_1.jsxs)(index_2.Table.Row, { children: [(0, jsx_runtime_1.jsx)(index_2.ValueRenderers.Text, { value: key }), valueCell(value)] }, key));
+        });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { style: {
+                    border: 'solid 1px black',
+                    width: '300px',
+                    marginBottom: '10px',
+                    padding: '3px',
+                }, value: search, placeholder: "search for a parameter ...", onChange: ({ target }) => {
+                    if (target.value !== undefined)
+                        setSearch(target.value);
+                } }), (0, jsx_runtime_1.jsxs)(index_2.Table, { children: [(0, jsx_runtime_1.jsxs)(index_2.Table.Header, { children: [(0, jsx_runtime_1.jsx)(index_2.ValueRenderers.Title, { value: "Parameter" }), (0, jsx_runtime_1.jsx)(index_2.ValueRenderers.Title, { value: "Value" })] }), viewData(info), viewData(meta)] })] }));
+}
+exports.MeasurementInfoPanel = MeasurementInfoPanel;
+/**
+ * Get the value cell depending on the type of the value
+ * @param value - ValueRenderers value.
+ * @returns - ValueRenderers component.
+ */
+function valueCell(value) {
+    switch (typeof value) {
+        case 'number':
+            return (0, jsx_runtime_1.jsx)(index_2.ValueRenderers.Number, { value: value });
+        case 'object':
+            return (0, jsx_runtime_1.jsx)(index_2.ValueRenderers.Object, { value: value });
+        case 'string':
+            return (0, jsx_runtime_1.jsx)(index_2.ValueRenderers.Text, { value: value });
+        default:
+            (0, jsx_runtime_1.jsx)(index_2.ValueRenderers.Text, { value: value });
+    }
+}
+/**
+ * Search a string in different type of values
+ *
+ * @param value - Value to search in.
+ * @param search - Value to search for.
+ * @returns - If search exist in value
+ */
+function valueSearch(value, search) {
+    switch (typeof value) {
+        case 'number':
+            return String(value).includes(search.toLowerCase());
+        case 'object':
+            return JSON.stringify(value).toLowerCase().includes(search.toLowerCase());
+        case 'string':
+            return value.toLowerCase().includes(search.toLowerCase());
+        default:
+            return false;
+    }
+}

package/lib/app/panels/measurement-info/MeasurementInfoPanelAccordion.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MeasurementInfoPanelAccordion = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const index_1 = require("../../../components/index");
+const MeasurementInfoPanel_1 = require("./MeasurementInfoPanel");
+function MeasurementInfoPanelAccordion() {
+    return ((0, jsx_runtime_1.jsx)(index_1.Accordion.Item, { title: "Measurement info", children: (0, jsx_runtime_1.jsx)(MeasurementInfoPanel_1.MeasurementInfoPanel, {}) }));
+}
+exports.MeasurementInfoPanelAccordion = MeasurementInfoPanelAccordion;

package/lib/app/panels/measurement-info/index.js

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

package/lib/app/panels/measurements/MeasurementCheckbox.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MeasurementCheckbox = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const checkboxCss = (0, react_1.css) `
+  color: #6366f1;
+  border-color: #d1d5db;
+  border-radius: 0.25rem;
+  width: 1rem;
+  height: 1rem;
+  border-width: 1px;
+`;
+function MeasurementCheckbox(props) {
+    const { checked, onSelectCheckbox, indeterminate } = props;
+    const ref = (0, react_2.useRef)(null);
+    (0, react_2.useLayoutEffect)(() => {
+        if (ref.current && indeterminate !== undefined) {
+            ref.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    return ((0, jsx_runtime_1.jsx)("input", { css: checkboxCss, type: "checkbox", checked: checked, onChange: onSelectCheckbox, ref: ref }));
+}
+exports.MeasurementCheckbox = MeasurementCheckbox;

package/lib/app/panels/measurements/MeasurementColorPreview.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const index_1 = require("../../../app-data/index");
+const index_2 = require("../../../components/index");
+const Portal_1 = require("../../../components/root-layout/Portal");
+const colorPreviewCss = (0, react_1.css) `
+  width: 1em;
+  height: 1em;
+`;
+function MeasurementColorPreview(props) {
+    const { measurementId, kind, color } = props;
+    const dispatch = (0, index_1.useAppDispatch)();
+    const ref = (0, react_2.useRef)(null);
+    const [isOpened, , close, toggle] = (0, index_2.useOnOff)(false);
+    const { setReferenceElement, setPopperElement, popperProps } = (0, index_2.useModifiedPopper)({
+        placement: 'bottom-start',
+        offset: 6,
+    });
+    (0, index_2.useOnClickOutside)(ref, close);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", ref: setReferenceElement, css: colorPreviewCss, onClick: toggle, children: (0, jsx_runtime_1.jsx)(index_2.ColorPreview, { color: color }) }), isOpened && ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: (div) => {
+                        setPopperElement(div);
+                        ref.current = div;
+                    }, ...popperProps, children: color.kind === 'fixed' ? ((0, jsx_runtime_1.jsx)(FixedColorPicker, { color: color.color, onChange: (newColor) => dispatch({
+                            type: 'CHANGE_MEASUREMENT_DISPLAY',
+                            payload: {
+                                display: {
+                                    color: {
+                                        kind: 'fixed',
+                                        color: newColor,
+                                    },
+                                },
+                                measurement: { id: measurementId, kind },
+                            },
+                        }) })) : null }) }))] }));
+}
+exports.default = MeasurementColorPreview;
+function FixedColorPicker(props) {
+    const { color, onChange } = props;
+    return ((0, jsx_runtime_1.jsx)(index_2.ColorPicker, { color: { hex: color }, onChangeComplete: (color) => {
+            onChange(color.hex);
+        } }));
+}

package/lib/app/panels/measurements/MeasurementVisibilityToggle.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MeasurementSelectedVisibilityChange = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const fa_1 = require("react-icons/fa");
+const index_1 = require("../../../app-data/index");
+function MeasurementVisibilityToggle(props) {
+    const { id, isVisible } = props;
+    const dispatch = (0, index_1.useAppDispatch)();
+    function setVisibility(isVisible) {
+        dispatch({
+            type: 'SET_MEASUREMENT_VISIBILITY',
+            payload: { id, isVisible },
+        });
+    }
+    return isVisible ? ((0, jsx_runtime_1.jsx)(fa_1.FaEye, { onClick: () => setVisibility(false), style: { cursor: 'pointer' } })) : ((0, jsx_runtime_1.jsx)(fa_1.FaEyeSlash, { onClick: () => setVisibility(true), style: { cursor: 'pointer', opacity: 0.6 } }));
+}
+exports.default = MeasurementVisibilityToggle;
+function MeasurementSelectedVisibilityChange(props) {
+    const { kind, openedEyes } = props;
+    const dispatch = (0, index_1.useAppDispatch)();
+    function setVisibility(isVisible) {
+        dispatch({
+            type: 'SET_SELECTED_MEASUREMENTS_VISIBILITY',
+            payload: { kind, isVisible: !isVisible },
+        });
+    }
+    return openedEyes ? ((0, jsx_runtime_1.jsx)(fa_1.FaEye, { onClick: () => setVisibility(false), style: { cursor: 'pointer' } })) : ((0, jsx_runtime_1.jsx)(fa_1.FaEyeSlash, { onClick: () => setVisibility(true), style: { cursor: 'pointer', opacity: 0.6 } }));
+}
+exports.MeasurementSelectedVisibilityChange = MeasurementSelectedVisibilityChange;