@zakodium/nmrium-core-plugins-ui 0.1.2 → 0.1.4

package/lib/plugins/spectrum_1d_processings_ui/operators/zero_filling.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"zero_filling.d.ts","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/zero_filling.tsx"],"names":[],"mappings":"AAwBA,eAAO,MAAM,aAAa,qGAiCxB,CAAC"}
+{"version":3,"file":"zero_filling.d.ts","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/zero_filling.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,qGAKxB,CAAC"}

package/lib/plugins/spectrum_1d_processings_ui/operators/zero_filling.js

@@ -1,37 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { defineProcessingOperatorUI } from '@zakodium/nmrium-core';
-import { useMemo } from 'react';
-const options = [
-    { label: '256', value: 2 ** 8 },
-    { label: '512', value: 2 ** 9 },
-    { label: '1K', value: 2 ** 10 },
-    { label: '2K', value: 2 ** 11 },
-    { label: '4K', value: 2 ** 12 },
-    { label: '8K', value: 2 ** 13 },
-    { label: '16K', value: 2 ** 14 },
-    { label: '32K', value: 2 ** 15 },
-    { label: '64K', value: 2 ** 16 },
-    { label: '128K', value: 2 ** 17 },
-    { label: '256K', value: 2 ** 18 },
-    { label: '512K', value: 2 ** 19 },
-    { label: '1M', value: 2 ** 20 },
-    { label: '2M', value: 2 ** 21 },
-];
+import { ZeroFillingExpand } from "./zero_filling_expand.js";
 export const zeroFilling1D = defineProcessingOperatorUI({
     id: '@zakodium/nmrium-core-plugins#zeroFilling1D',
     name: 'Zero filling',
     isEditable: true,
-    Expanded(props) {
-        const { operation } = props;
-        const { settings } = operation;
-        const validOptions = useMemo(() => {
-            if (options.some((o) => o.value === settings))
-                return options;
-            return options
-                .concat({ label: String(settings), value: settings })
-                .toSorted((a, b) => a.value - b.value);
-        }, [settings]);
-        return (_jsxs(_Fragment, { children: ["Size:", ' ', _jsx("select", { children: validOptions.map((o) => (_jsx("option", { value: o.value, selected: o.value === settings, children: o.label }, o.value))) })] }));
-    },
+    Expanded: ZeroFillingExpand,
 });
 //# sourceMappingURL=zero_filling.js.map

package/lib/plugins/spectrum_1d_processings_ui/operators/zero_filling.js.map

@@ -1 +1 @@
-{"version":3,"file":"zero_filling.js","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/zero_filling.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAMhC,MAAM,OAAO,GAAa;IACxB,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE;IAC/B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;IAC/B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;IAChC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;IAChC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;IAChC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;IACjC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;IACjC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;IACjC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,0BAA0B,CAAC;IACtD,EAAE,EAAE,6CAA6C;IACjD,IAAI,EAAE,cAAc;IACpB,UAAU,EAAE,IAAI;IAChB,QAAQ,CAAC,KAAK;QACZ,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;QAC5B,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;QAE/B,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;YAChC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC;gBAAE,OAAO,OAAO,CAAC;YAE9D,OAAO,OAAO;iBACX,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;iBACpD,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;QAEf,OAAO,CACL,uCACQ,GAAG,EACT,2BACG,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACvB,iBAEE,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,QAAQ,YAE7B,CAAC,CAAC,KAAK,IAJH,CAAC,CAAC,KAAK,CAKL,CACV,CAAC,GACK,IACR,CACJ,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"zero_filling.js","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/zero_filling.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,aAAa,GAAG,0BAA0B,CAAC;IACtD,EAAE,EAAE,6CAA6C;IACjD,IAAI,EAAE,cAAc;IACpB,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,iBAAiB;CAC5B,CAAC,CAAC"}

package/lib/plugins/spectrum_1d_processings_ui/operators/zero_filling_expand.d.ts

@@ -0,0 +1,3 @@
+import type { ProcessingOperatorUIExpandedProps } from '@zakodium/nmrium-core';
+export declare function ZeroFillingExpand(props: ProcessingOperatorUIExpandedProps<'@zakodium/nmrium-core-plugins#zeroFilling1D'>): import("react").JSX.Element;
+//# sourceMappingURL=zero_filling_expand.d.ts.map

package/lib/plugins/spectrum_1d_processings_ui/operators/zero_filling_expand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zero_filling_expand.d.ts","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/zero_filling_expand.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,uBAAuB,CAAC;AAuB/E,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,iCAAiC,CAAC,6CAA6C,CAAC,+BAgExF"}

package/lib/plugins/spectrum_1d_processings_ui/operators/zero_filling_expand.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { revalidateLogic } from '@tanstack/react-form';
+import { assert, cast } from '@zakodium/utils';
+import { useMemo } from 'react';
+import { AppForm, useForm } from 'react-science/ui';
+import { z } from 'zod';
+const options = [
+    { label: '256', value: 2 ** 8 },
+    { label: '512', value: 2 ** 9 },
+    { label: '1K', value: 2 ** 10 },
+    { label: '2K', value: 2 ** 11 },
+    { label: '4K', value: 2 ** 12 },
+    { label: '8K', value: 2 ** 13 },
+    { label: '16K', value: 2 ** 14 },
+    { label: '32K', value: 2 ** 15 },
+    { label: '64K', value: 2 ** 16 },
+    { label: '128K', value: 2 ** 17 },
+    { label: '256K', value: 2 ** 18 },
+    { label: '512K', value: 2 ** 19 },
+    { label: '1M', value: 2 ** 20 },
+    { label: '2M', value: 2 ** 21 },
+];
+export function ZeroFillingExpand(props) {
+    const { operation, onChange, core, children } = props;
+    cast(operation.operatorId);
+    const operator = core.getOperator(operation.operatorId);
+    assert(operator, () => `Operator ${operation.operatorId} related to operation ${JSON.stringify(operation)} is missing`);
+    const validator = useMemo(() => z.object({
+        size: operator.schemaSettings,
+    }), [operator]);
+    const defaultValues = useMemo(() => ({ size: operation.settings }), [operation.settings]);
+    const form = useForm({
+        defaultValues,
+        validators: { onDynamic: validator },
+        validationLogic: revalidateLogic(),
+        onSubmit: ({ value }) => {
+            if (!onChange)
+                return;
+            const { size: settings } = validator.parse(value);
+            onChange({ ...operation, settings });
+        },
+    });
+    const allOptions = useMemo(() => {
+        const settings = operation.settings;
+        if (options.some((o) => o.value === settings))
+            return options;
+        return [...options, { label: String(settings), value: settings }].toSorted((a, b) => a.value - b.value);
+    }, [operation.settings]);
+    const { AppField, SubmitButton } = form;
+    return (_jsxs(AppForm, { form: form, layout: "inline", children: [children?.(_jsx(SubmitButton, { variant: "outlined", size: "small", intent: "success", children: "Apply" })), _jsx(AppField, { name: "size", children: ({ Select }) => (_jsx(Select, { label: "Size", 
+                    // @ts-expect-error should support number values
+                    items: allOptions })) })] }));
+}
+//# sourceMappingURL=zero_filling_expand.js.map

package/lib/plugins/spectrum_1d_processings_ui/operators/zero_filling_expand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zero_filling_expand.js","sourceRoot":"","sources":["../../../../src/plugins/spectrum_1d_processings_ui/operators/zero_filling_expand.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zakodium/nmrium-core-plugins-ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "CC-BY-NC-SA-4.0",
   "description": "UI related plugins needed for cheminfo/nmrium",
   "keywords": [],
@@ -26,8 +26,9 @@
     "@blueprintjs/core": "^6.16.0",
     "@blueprintjs/icons": "^6.11.0",
     "@blueprintjs/select": "^6.3.0",
-    "@zakodium/nmrium-core": "^0.7.35",
-    "@zakodium/nmrium-core-plugins": "^0.7.45",
+    "@tanstack/react-form": "^1.33.0",
+    "@zakodium/nmrium-core": "^0.7.36",
+    "@zakodium/nmrium-core-plugins": "^0.7.46",
     "fifo-logger": "^2.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -41,5 +42,5 @@
     "typescript": "~6.0.3",
     "vitest": "^4.1.9"
   },
-  "gitHead": "4e8e1585be4c6bffe1be48ecf959b32cc91b3e30"
+  "gitHead": "b72b67fce506ea7ccd740a536bf4a8e9a4245a1d"
 }

package/src/plugins/spectrum_1d_processings_ui/operators/zero_filling.tsx

@@ -1,58 +1,10 @@
 import { defineProcessingOperatorUI } from '@zakodium/nmrium-core';
-import { useMemo } from 'react';
 
-interface Option {
-  label: string;
-  value: number;
-}
-const options: Option[] = [
-  { label: '256', value: 2 ** 8 },
-  { label: '512', value: 2 ** 9 },
-  { label: '1K', value: 2 ** 10 },
-  { label: '2K', value: 2 ** 11 },
-  { label: '4K', value: 2 ** 12 },
-  { label: '8K', value: 2 ** 13 },
-  { label: '16K', value: 2 ** 14 },
-  { label: '32K', value: 2 ** 15 },
-  { label: '64K', value: 2 ** 16 },
-  { label: '128K', value: 2 ** 17 },
-  { label: '256K', value: 2 ** 18 },
-  { label: '512K', value: 2 ** 19 },
-  { label: '1M', value: 2 ** 20 },
-  { label: '2M', value: 2 ** 21 },
-];
+import { ZeroFillingExpand } from './zero_filling_expand.tsx';
 
 export const zeroFilling1D = defineProcessingOperatorUI({
   id: '@zakodium/nmrium-core-plugins#zeroFilling1D',
   name: 'Zero filling',
   isEditable: true,
-  Expanded(props) {
-    const { operation } = props;
-    const { settings } = operation;
-
-    const validOptions = useMemo(() => {
-      if (options.some((o) => o.value === settings)) return options;
-
-      return options
-        .concat({ label: String(settings), value: settings })
-        .toSorted((a, b) => a.value - b.value);
-    }, [settings]);
-
-    return (
-      <>
-        Size:{' '}
-        <select>
-          {validOptions.map((o) => (
-            <option
-              key={o.value}
-              value={o.value}
-              selected={o.value === settings}
-            >
-              {o.label}
-            </option>
-          ))}
-        </select>
-      </>
-    );
-  },
+  Expanded: ZeroFillingExpand,
 });

package/src/plugins/spectrum_1d_processings_ui/operators/zero_filling_expand.tsx

@@ -0,0 +1,90 @@
+import { revalidateLogic } from '@tanstack/react-form';
+import type { ProcessingOperatorUIExpandedProps } from '@zakodium/nmrium-core';
+import { assert, cast } from '@zakodium/utils';
+import { useMemo } from 'react';
+import { AppForm, useForm } from 'react-science/ui';
+import { z } from 'zod';
+
+const options = [
+  { label: '256', value: 2 ** 8 },
+  { label: '512', value: 2 ** 9 },
+  { label: '1K', value: 2 ** 10 },
+  { label: '2K', value: 2 ** 11 },
+  { label: '4K', value: 2 ** 12 },
+  { label: '8K', value: 2 ** 13 },
+  { label: '16K', value: 2 ** 14 },
+  { label: '32K', value: 2 ** 15 },
+  { label: '64K', value: 2 ** 16 },
+  { label: '128K', value: 2 ** 17 },
+  { label: '256K', value: 2 ** 18 },
+  { label: '512K', value: 2 ** 19 },
+  { label: '1M', value: 2 ** 20 },
+  { label: '2M', value: 2 ** 21 },
+];
+
+export function ZeroFillingExpand(
+  props: ProcessingOperatorUIExpandedProps<'@zakodium/nmrium-core-plugins#zeroFilling1D'>,
+) {
+  const { operation, onChange, core, children } = props;
+  cast<'@zakodium/nmrium-core-plugins#zeroFilling1D'>(operation.operatorId);
+  const operator = core.getOperator(operation.operatorId);
+  assert(
+    operator,
+    () =>
+      `Operator ${operation.operatorId} related to operation ${JSON.stringify(operation)} is missing`,
+  );
+
+  const validator = useMemo(
+    () =>
+      z.object({
+        size: operator.schemaSettings,
+      }),
+    [operator],
+  );
+  const defaultValues = useMemo(
+    () => ({ size: operation.settings }),
+    [operation.settings],
+  );
+  const form = useForm({
+    defaultValues,
+    validators: { onDynamic: validator },
+    validationLogic: revalidateLogic(),
+    onSubmit: ({ value }) => {
+      if (!onChange) return;
+
+      const { size: settings } = validator.parse(value);
+      onChange({ ...operation, settings });
+    },
+  });
+
+  const allOptions = useMemo(() => {
+    const settings = operation.settings;
+    if (options.some((o) => o.value === settings)) return options;
+
+    return [...options, { label: String(settings), value: settings }].toSorted(
+      (a, b) => a.value - b.value,
+    );
+  }, [operation.settings]);
+
+  const { AppField, SubmitButton } = form;
+
+  return (
+    <AppForm form={form} layout="inline">
+      {children?.(
+        <SubmitButton variant="outlined" size="small" intent="success">
+          Apply
+        </SubmitButton>,
+      )}
+
+      <AppField name="size">
+        {({ Select }) => (
+          <Select
+            label="Size"
+            // @ts-expect-error should support number values
+            items={allOptions}
+          />
+        )}
+      </AppField>
+    </AppForm>
+  );
+}