datajunction-ui 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/pages/AddEditNodePage/CustomMetadataField.jsx

@@ -1,10 +1,33 @@
 /**
  * Custom metadata field component for nodes
  */
-import { ErrorMessage, Field } from 'formik';
-import { useEffect } from 'react';
+import { ErrorMessage, Field, useFormikContext } from 'formik';
+import CodeMirror from '@uiw/react-codemirror';
+import { langs } from '@uiw/codemirror-extensions-langs';
+import { useState, useEffect } from 'react';
+
+export const CustomMetadataField = ({ value }) => {
+  const formik = useFormikContext();
+  const jsonExt = langs.json();
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    if (!value || value === '') {
+      setHasError(false);
+      return;
+    }
+
+    const stringValue =
+      typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+
+    try {
+      JSON.parse(stringValue);
+      setHasError(false);
+    } catch (err) {
+      setHasError(true);
+    }
+  }, [value]);
 
-export const CustomMetadataField = () => {
   const formatValue = value => {
     if (value === null || value === undefined) {
       return '';
@@ -15,74 +38,107 @@ export const CustomMetadataField = () => {
     return JSON.stringify(value, null, 2);
   };
 
-  const handleChange = (e, setFieldValue) => {
-    setFieldValue('custom_metadata', e.target.value);
+  const updateFormik = val => {
+    formik.setFieldValue('custom_metadata', val);
+    formik.setFieldTouched('custom_metadata', true);
+
+    if (!val || val.trim() === '') {
+      setHasError(false);
+    } else {
+      try {
+        JSON.parse(val);
+        setHasError(false);
+      } catch (err) {
+        setHasError(true);
+      }
+    }
   };
 
   return (
-    <div className="NodeCreationInput" style={{ marginTop: '20px' }}>
-      <label htmlFor="CustomMetadata">Custom Metadata (JSON)</label>
-      <Field
-        name="custom_metadata"
-        validate={value => {
-          if (!value || value.trim() === '') {
-            return undefined;
-          }
-          try {
-            const parsed = JSON.parse(value);
+    <div className="QueryInput NodeCreationInput">
+      <details>
+        <summary style={{ cursor: 'pointer' }}>
+          <label
+            style={{
+              paddingLeft: '3px',
+              display: 'inline-block',
+              pointerEvents: 'none',
+            }}
+          >
+            Custom Metadata (JSON)
+          </label>
+        </summary>
+        <ErrorMessage name="custom_metadata" component="span" />
+        <Field
+          type="textarea"
+          style={{ display: 'none' }}
+          as="textarea"
+          name="custom_metadata"
+          id="CustomMetadata"
+          validate={value => {
+            if (!value || value.trim() === '') {
+              return undefined;
+            }
+            try {
+              const parsed = JSON.parse(value);
 
-            if (
-              typeof parsed === 'object' &&
-              parsed !== null &&
-              !Array.isArray(parsed)
-            ) {
-              const keys = Object.keys(parsed);
-              const originalKeyMatches = value.match(/"([^"]+)"\s*:/g);
               if (
-                originalKeyMatches &&
-                originalKeyMatches.length > keys.length
+                typeof parsed === 'object' &&
+                parsed !== null &&
+                !Array.isArray(parsed)
               ) {
-                return 'Duplicate keys detected';
+                const keys = Object.keys(parsed);
+                const originalKeyMatches = value.match(/"([^"]+)"\s*:/g);
+                if (
+                  originalKeyMatches &&
+                  originalKeyMatches.length > keys.length
+                ) {
+                  return 'Duplicate keys detected';
+                }
               }
-            }
-
-            return undefined;
-          } catch (err) {
-            return 'Invalid JSON format';
-          }
-        }}
-      >
-        {({ field, form }) => {
-          const errorMessage = form.errors.custom_metadata;
-          const hasError = errorMessage && form.touched.custom_metadata;
 
-          return (
-            <div>
-              <textarea
-                id="CustomMetadata"
-                value={formatValue(field.value)}
-                onChange={e => handleChange(e, form.setFieldValue)}
-                onBlur={() => form.setFieldTouched('custom_metadata', true)}
-                style={{
-                  width: '100%',
-                  minHeight: '100px',
-                  fontFamily: 'monospace',
-                  fontSize: '12px',
-                  padding: '8px',
-                  border: hasError ? '1px solid red' : '1px solid #ccc',
-                  borderRadius: '4px',
-                }}
-                placeholder="Define custom node metadata here..."
-              />
-              {hasError && (
-                <span style={{ color: 'red', fontSize: '12px' }}>
-                  {errorMessage}
-                </span>
-              )}
-            </div>
-          );
-        }}
-      </Field>
+              return undefined;
+            } catch (err) {
+              return 'Invalid JSON format';
+            }
+          }}
+        />
+        <div
+          role="button"
+          tabIndex={0}
+          className={`relative flex ${
+            hasError ? 'bg-red-900/20' : 'bg-[#282a36]'
+          }`}
+          style={{
+            border: hasError ? '2px solid #ef4444' : 'none',
+            borderRadius: '4px',
+            boxShadow: hasError ? '0 0 0 1px rgba(239, 68, 68, 0.3)' : 'none',
+          }}
+        >
+          <CodeMirror
+            id={'custom_metadata'}
+            name={'custom_metadata'}
+            extensions={[jsonExt]}
+            value={formatValue(value)}
+            placeholder={'{\n  "key": "value"\n}'}
+            options={{
+              theme: 'default',
+              lineNumbers: true,
+            }}
+            width="100%"
+            height="200px"
+            style={{
+              margin: '0 0 23px 0',
+              flex: 1,
+              fontSize: '150%',
+              textAlign: 'left',
+            }}
+            onChange={(value, viewUpdate) => {
+              updateFormik(value);
+            }}
+          />
+        </div>
+      </details>
     </div>
   );
 };

package/src/app/pages/AddEditNodePage/index.jsx

@@ -474,7 +474,6 @@ export function AddEditNodePage({ extensions = {} }) {
                         ) : (
                           ''
                         )}
-                        <CustomMetadataField />
                         {nodeType !== 'metric' && node.type !== 'metric' ? (
                           action === Action.Edit ? (
                             selectPrimaryKey
@@ -491,6 +490,11 @@ export function AddEditNodePage({ extensions = {} }) {
                         ) : (
                           <RequiredDimensionsSelect />
                         )}
+                        <CustomMetadataField
+                          value={
+                            node.custom_metadata ? node.custom_metadata : ''
+                          }
+                        />
                         {Object.entries(extensions).map(
                           ([key, ExtensionComponent]) => (
                             <div key={key} className="mt-4 border-t pt-4">