react-science 0.19.1

package/src/app/panels/SignalProcessingPanel.tsx

@@ -0,0 +1,200 @@
+import type { FilterXYType } from 'ml-signal-processing';
+import filterXY from 'ml-signal-processing/FilterXYSchema.json';
+
+import { Button, Table, ValueRenderers } from '../../components/index';
+
+export interface Filter<OptionsType = string | number> {
+  name: FilterXYType['name'];
+  options?: Record<string, OptionsType>;
+}
+export interface SignalProcessingPanelProps {
+  filters: Filter[];
+  onChange: (filters: Filter[]) => void;
+}
+interface FilterOptionsInfo {
+  defaultValue: string | number;
+  choices?: string[];
+  description: string;
+}
+
+// get filters information & default options values
+const defaultFilters = filterXY.anyOf.map(({ properties }) => {
+  const options: Record<string, FilterOptionsInfo> = {};
+  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] as FilterXYType['name'],
+    options,
+  };
+});
+export function SignalProcessingPanel(props: SignalProcessingPanelProps) {
+  const { filters = [], onChange } = props;
+
+  return (
+    <div>
+      <Table border={false}>
+        <Table.Header>
+          <ValueRenderers.Title value=" " />
+          <ValueRenderers.Title value="Name" />
+          <ValueRenderers.Title value="Options" />
+        </Table.Header>
+        {filters.map(({ name, options }, i) => (
+          <Table.Row key={name} border>
+            <ValueRenderers.Component>
+              <div style={{ display: 'flex', gap: '3px' }}>
+                <Button
+                  style={{ width: '15px' }}
+                  color={{ basic: 'white' }}
+                  backgroundColor={{ basic: 'green' }}
+                  onClick={() => {
+                    const newFilters = [...filters];
+                    newFilters.splice(
+                      i + 1,
+                      0,
+                      getDefaultFilter(defaultFilters[0]),
+                    );
+                    onChange?.(newFilters);
+                  }}
+                >
+                  +
+                </Button>
+                <Button
+                  style={{ width: '15px' }}
+                  color={{ basic: 'white' }}
+                  backgroundColor={{ basic: 'red' }}
+                  onClick={() => {
+                    onChange?.(filters.filter((_, j) => j !== i));
+                  }}
+                >
+                  -
+                </Button>
+              </div>
+            </ValueRenderers.Component>
+            <ValueRenderers.Component>
+              <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)}
+              >
+                {defaultFilters.map(({ name }, i: number) => (
+                  <option key={name} value={i}>
+                    {normalCase(name)}
+                  </option>
+                ))}
+              </select>
+            </ValueRenderers.Component>
+            {options && (
+              <ValueRenderers.Component>
+                {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);
+                  }),
+                )}
+              </ValueRenderers.Component>
+            )}
+          </Table.Row>
+        ))}
+      </Table>
+      {filters.length === 0 && (
+        <Button
+          style={{ width: '15px', margin: '5px 20px' }}
+          color={{ basic: 'white' }}
+          backgroundColor={{ basic: 'green' }}
+          onClick={() => {
+            const newFilters = [getDefaultFilter(defaultFilters[0])];
+            onChange?.(newFilters);
+          }}
+        >
+          +
+        </Button>
+      )}
+    </div>
+  );
+}
+function getDefaultFilter({ options, name }: Filter<FilterOptionsInfo>) {
+  if (options) {
+    const result: Record<string, string | number> = {};
+
+    for (const [key, { defaultValue }] of Object.entries(options)) {
+      result[key] = defaultValue;
+    }
+    return { name, options: result };
+  }
+  return { name };
+}
+function normalCase(str: string) {
+  const result = str.replace(/(?<upper>[A-Z])/g, ' $<upper>').trim();
+  return result.charAt(0).toUpperCase() + result.slice(1);
+}
+function optionInput(
+  [key, { description, choices }]: [string, FilterOptionsInfo],
+  options: Record<string, string | number>,
+  onChange: (value: string | number) => void,
+) {
+  return (
+    <div style={{ marginTop: '5px' }} key={key}>
+      {choices && choices.length > 0 ? (
+        <select
+          onChange={({ target }) => {
+            const value = target.value;
+            if (value) {
+              onChange(value);
+            }
+          }}
+          style={{ border: '1px solid black' }}
+          value={options?.[key]}
+        >
+          <option value="" disabled selected>
+            {normalCase(key)}
+          </option>
+          {choices.map((choice) => (
+            <option key={choice} value={choice}>
+              {normalCase(choice)}
+            </option>
+          ))}
+        </select>
+      ) : (
+        <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]}
+        />
+      )}
+      <label style={{ marginLeft: '5px' }}>{description}</label>
+    </div>
+  );
+}

package/src/app/panels/index.ts

@@ -0,0 +1,4 @@
+export * from './measurement-info/index';
+export * from './measurement-config/index';
+export * from './measurements/index';
+export * from './SignalProcessingPanel';

package/src/app/panels/measurement-config/MeasurementConfigPanel.tsx

@@ -0,0 +1,98 @@
+import {
+  ColorConfig,
+  getFirstSelectedMeasurementData,
+  useAppDispatch,
+  useAppState,
+} from '../../../app-data/index';
+import { ColorPickerDropdown } from '../../../components/index';
+
+export function MeasurementConfigPanel() {
+  const dispatch = useAppDispatch();
+  const appState = useAppState();
+
+  const firstMeasurement = getFirstSelectedMeasurementData(appState);
+  if (!firstMeasurement) {
+    return null;
+  }
+
+  return (
+    <div>
+      <StrokeColorModifier
+        color={firstMeasurement.display.color}
+        onChange={(color) => {
+          dispatch({
+            type: 'CHANGE_MEASUREMENTS_DISPLAY',
+
+            payload: { display: { color } },
+          });
+        }}
+      />
+    </div>
+  );
+}
+
+interface StrokeColorModifierProps {
+  color: ColorConfig;
+  onChange: (color: ColorConfig) => void;
+}
+
+function StrokeColorModifier(props: StrokeColorModifierProps) {
+  const { color, onChange } = props;
+
+  if (color.kind === 'fixedGradient') {
+    throw new Error('fixedGradient not supported yet');
+  }
+
+  return (
+    <div style={{ display: 'flex', padding: 8 }}>
+      <div style={{ flex: '1 1 0' }}>Stroke color</div>
+      <div style={{ flex: '1 1 0' }}>
+        {/* <SelectColorKind
+          colorKind="fixed"
+          onChange={(kind) => {
+            if (kind === 'fixed') {
+              onChange({ kind: 'fixed', color: 'black' });
+            } else {
+              onChange({ kind: 'fixedGradient', gradient: 'inferno' });
+            }
+          }}
+        /> */}
+        {color.kind === 'fixed' && (
+          <ColorPickerDropdown
+            color={{ hex: color.color }}
+            onChangeComplete={({ hex }) =>
+              onChange({ kind: 'fixed', color: hex })
+            }
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+// interface SelectColorKindProps {
+//   colorKind: ColorConfig['kind'];
+//   onChange: (colorKind: ColorConfig['kind']) => void;
+// }
+
+// const colorKindOptions: { value: ColorConfig['kind']; label: string }[] = [
+//   { value: 'fixed', label: 'Fixed' },
+//   { value: 'fixedGradient', label: 'Fixed gradient' },
+// ];
+// function SelectColorKind(props: SelectColorKindProps) {
+//   const { colorKind, onChange } = props;
+//   return (
+//     <select
+//       value={colorKind}
+//       onChange={(event) => {
+//         onChange(event.target.value as ColorConfig['kind']);
+//       }}
+//     >
+//       {colorKindOptions.map(({ value, label }) => (
+//         <option key={value} value={value}>
+//           {label}
+//         </option>
+//       ))}
+//     </select>
+//   );
+// }

package/src/app/panels/measurement-config/MeasurementConfigPanelAccordion.tsx

@@ -0,0 +1,26 @@
+import { useAppState } from '../../../app-data/index';
+import { Accordion } from '../../../components/index';
+
+import { MeasurementConfigPanel } from './MeasurementConfigPanel';
+
+export function MeasurementConfigPanelAccordion() {
+  const appState = useAppState();
+
+  const {
+    view: { selectedMeasurements, selectedKind },
+  } = appState;
+
+  if (!selectedKind) {
+    return null;
+  }
+
+  const size = (selectedMeasurements[selectedKind] || []).length;
+  return (
+    <Accordion.Item
+      title={`Measurement${size > 1 ? 's' : ''} config`}
+      defaultOpened
+    >
+      <MeasurementConfigPanel />
+    </Accordion.Item>
+  );
+}

package/src/app/panels/measurement-config/index.ts

@@ -0,0 +1,2 @@
+export * from './MeasurementConfigPanelAccordion';
+export * from './MeasurementConfigPanel';

package/src/app/panels/measurement-info/MeasurementInfoPanel.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react';
+
+import {
+  getCurrentMeasurementData,
+  useAppState,
+} from '../../../app-data/index';
+import { ValueRenderers, Table } from '../../../components/index';
+
+export function MeasurementInfoPanel() {
+  const appState = useAppState();
+  const measurement = getCurrentMeasurementData(appState);
+  const [search, setSearch] = useState('');
+  if (!measurement) return null;
+  const { meta, info } = measurement.data;
+
+  function viewData(data: Record<string, any>) {
+    return Object.keys(data).map((key) => {
+      const value = data[key];
+      if (
+        !key.toLowerCase().includes(search.toLowerCase()) &&
+        !valueSearch(value, search)
+      ) {
+        return null;
+      }
+      return (
+        <Table.Row key={key}>
+          <ValueRenderers.Text value={key} />
+          {valueCell(value)}
+        </Table.Row>
+      );
+    });
+  }
+
+  return (
+    <div>
+      <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);
+        }}
+      />
+      <Table>
+        <Table.Header>
+          <ValueRenderers.Title value="Parameter" />
+          <ValueRenderers.Title value="Value" />
+        </Table.Header>
+        {viewData(info)}
+        {viewData(meta)}
+      </Table>
+    </div>
+  );
+}
+
+/**
+ * Get the value cell depending on the type of the value
+ * @param value - ValueRenderers value.
+ * @returns - ValueRenderers component.
+ */
+function valueCell(value: number | string | object) {
+  switch (typeof value) {
+    case 'number':
+      return <ValueRenderers.Number value={value} />;
+    case 'object':
+      return <ValueRenderers.Object value={value} />;
+    case 'string':
+      return <ValueRenderers.Text value={value} />;
+    default:
+      <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: number | string | object, search: string): boolean {
+  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/src/app/panels/measurement-info/MeasurementInfoPanelAccordion.tsx

@@ -0,0 +1,11 @@
+import { Accordion } from '../../../components/index';
+
+import { MeasurementInfoPanel } from './MeasurementInfoPanel';
+
+export function MeasurementInfoPanelAccordion() {
+  return (
+    <Accordion.Item title="Measurement info">
+      <MeasurementInfoPanel />
+    </Accordion.Item>
+  );
+}

package/src/app/panels/measurement-info/index.ts

@@ -0,0 +1,2 @@
+export * from './MeasurementInfoPanel';
+export * from './MeasurementInfoPanelAccordion';

package/src/app/panels/measurements/MeasurementCheckbox.tsx

@@ -0,0 +1,39 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { useLayoutEffect, useRef } from 'react';
+
+interface MeasurementCheckboxProps {
+  checked: boolean;
+  onSelectCheckbox: () => void;
+  indeterminate?: boolean;
+}
+
+const checkboxCss = css`
+  color: #6366f1;
+  border-color: #d1d5db;
+  border-radius: 0.25rem;
+  width: 1rem;
+  height: 1rem;
+  border-width: 1px;
+`;
+
+export function MeasurementCheckbox(props: MeasurementCheckboxProps) {
+  const { checked, onSelectCheckbox, indeterminate } = props;
+  const ref = useRef<HTMLInputElement>(null);
+
+  useLayoutEffect(() => {
+    if (ref.current && indeterminate !== undefined) {
+      ref.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+
+  return (
+    <input
+      css={checkboxCss}
+      type="checkbox"
+      checked={checked}
+      onChange={onSelectCheckbox}
+      ref={ref}
+    />
+  );
+}

package/src/app/panels/measurements/MeasurementColorPreview.tsx

@@ -0,0 +1,105 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { useRef } from 'react';
+
+import {
+  ColorConfig,
+  MeasurementKind,
+  useAppDispatch,
+} from '../../../app-data/index';
+import {
+  ColorPicker,
+  ColorPreview,
+  useModifiedPopper,
+  useOnClickOutside,
+  useOnOff,
+} from '../../../components/index';
+import { Portal } from '../../../components/root-layout/Portal';
+
+interface MeasurementColorPreviewProps {
+  measurementId: string;
+  kind: MeasurementKind;
+  color: ColorConfig;
+}
+
+const colorPreviewCss = css`
+  width: 1em;
+  height: 1em;
+`;
+
+export default function MeasurementColorPreview(
+  props: MeasurementColorPreviewProps,
+) {
+  const { measurementId, kind, color } = props;
+
+  const dispatch = useAppDispatch();
+
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [isOpened, , close, toggle] = useOnOff(false);
+  const { setReferenceElement, setPopperElement, popperProps } =
+    useModifiedPopper<HTMLButtonElement>({
+      placement: 'bottom-start',
+      offset: 6,
+    });
+
+  useOnClickOutside(ref, close);
+
+  return (
+    <>
+      <button
+        type="button"
+        ref={setReferenceElement}
+        css={colorPreviewCss}
+        onClick={toggle}
+      >
+        <ColorPreview color={color} />
+      </button>
+      {isOpened && (
+        <Portal>
+          <div
+            ref={(div) => {
+              setPopperElement(div);
+              ref.current = div;
+            }}
+            {...popperProps}
+          >
+            {color.kind === 'fixed' ? (
+              <FixedColorPicker
+                color={color.color}
+                onChange={(newColor) =>
+                  dispatch({
+                    type: 'CHANGE_MEASUREMENT_DISPLAY',
+                    payload: {
+                      display: {
+                        color: {
+                          kind: 'fixed',
+                          color: newColor,
+                        },
+                      },
+                      measurement: { id: measurementId, kind },
+                    },
+                  })
+                }
+              />
+            ) : null}
+          </div>
+        </Portal>
+      )}
+    </>
+  );
+}
+
+function FixedColorPicker(props: {
+  color: string;
+  onChange: (rgb: string) => void;
+}) {
+  const { color, onChange } = props;
+  return (
+    <ColorPicker
+      color={{ hex: color }}
+      onChangeComplete={(color) => {
+        onChange(color.hex);
+      }}
+    />
+  );
+}

package/src/app/panels/measurements/MeasurementVisibilityToggle.tsx

@@ -0,0 +1,57 @@
+import { FaEye, FaEyeSlash } from 'react-icons/fa';
+
+import { useAppDispatch } from '../../../app-data/index';
+
+import { MeasurementsTableProps } from './MeasurementsTable';
+
+interface MeasurementVisibilityToggleProps {
+  id: string;
+  isVisible: boolean;
+}
+
+export default function MeasurementVisibilityToggle(
+  props: MeasurementVisibilityToggleProps,
+) {
+  const { id, isVisible } = props;
+  const dispatch = useAppDispatch();
+
+  function setVisibility(isVisible: boolean) {
+    dispatch({
+      type: 'SET_MEASUREMENT_VISIBILITY',
+      payload: { id, isVisible },
+    });
+  }
+
+  return isVisible ? (
+    <FaEye onClick={() => setVisibility(false)} style={{ cursor: 'pointer' }} />
+  ) : (
+    <FaEyeSlash
+      onClick={() => setVisibility(true)}
+      style={{ cursor: 'pointer', opacity: 0.6 }}
+    />
+  );
+}
+
+export function MeasurementSelectedVisibilityChange(props: {
+  openedEyes: boolean;
+  kind: MeasurementsTableProps['kind'];
+}) {
+  const { kind, openedEyes } = props;
+  const dispatch = useAppDispatch();
+
+  function setVisibility(isVisible: boolean) {
+    dispatch({
+      type: 'SET_SELECTED_MEASUREMENTS_VISIBILITY',
+      payload: { kind, isVisible: !isVisible },
+    });
+  }
+
+  return openedEyes ? (
+    <FaEye onClick={() => setVisibility(false)} style={{ cursor: 'pointer' }} />
+  ) : (
+    <FaEyeSlash
+      onClick={() => setVisibility(true)}
+      style={{ cursor: 'pointer', opacity: 0.6 }}
+    />
+  );
+}