datajunction-ui 0.0.1-rc.9 → 0.0.2-0.dev1

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

@@ -0,0 +1,84 @@
+/**
+ * Component for selecting node columns based on the current form state
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import { useContext, useMemo, useState, useEffect } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const ColumnsSelect = ({
+  defaultValue,
+  fieldName,
+  label,
+  labelStyle = {},
+  isMulti = false,
+  isClearable = true,
+}) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Used to pull out current form values for node validation
+  const { values } = useFormikContext();
+
+  // The available columns, determined from validating the node query
+  const [availableColumns, setAvailableColumns] = useState([]);
+  const selectableOptions = useMemo(() => {
+    if (availableColumns && availableColumns.length > 0) {
+      return availableColumns;
+    }
+  }, [availableColumns]);
+
+  // Fetch columns by validating the latest node query
+  const fetchColumns = async () => {
+    try {
+      const { status, json } = await djClient.validateNode(
+        values.type,
+        values.name,
+        values.display_name,
+        values.description,
+        values.query,
+      );
+      if (json?.columns) {
+        setAvailableColumns(
+          json.columns.map(col => ({ value: col.name, label: col.name })),
+        );
+      }
+    } catch (error) {
+      console.error('Error fetching columns:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchColumns();
+  }, [values.type, values.name, values.query]);
+
+  return (
+    <div className="CubeCreationInput">
+      <ErrorMessage name={fieldName} component="span" />
+      <label htmlFor={fieldName} style={labelStyle}>
+        {label}
+      </label>
+      <span data-testid={`select-${fieldName}`}>
+        <FormikSelect
+          className={isMulti ? 'MultiSelectInput' : 'SelectInput'}
+          defaultValue={
+            isMulti
+              ? defaultValue.map(val => {
+                  return {
+                    value: val,
+                    label: val,
+                  };
+                })
+              : defaultValue
+              ? { value: defaultValue, label: defaultValue }
+              : null
+          }
+          selectOptions={selectableOptions}
+          formikFieldName={fieldName}
+          onFocus={event => fetchColumns(event)}
+          isMulti={isMulti}
+          isClearable={isClearable}
+        />
+      </span>
+    </div>
+  );
+};

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

@@ -0,0 +1,144 @@
+/**
+ * Custom metadata field component for nodes
+ */
+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]);
+
+  const formatValue = value => {
+    if (value === null || value === undefined) {
+      return '';
+    }
+    if (typeof value === 'string') {
+      return value;
+    }
+    return JSON.stringify(value, null, 2);
+  };
+
+  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="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
+                ) {
+                  return 'Duplicate keys detected';
+                }
+              }
+
+              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/DescriptionField.jsx

@@ -0,0 +1,17 @@
+import { ErrorMessage, Field } from 'formik';
+
+export const DescriptionField = () => {
+  return (
+    <div className="DescriptionInput NodeCreationInput">
+      <ErrorMessage name="description" component="span" />
+      <label htmlFor="Description">Description</label>
+      <Field
+        type="textarea"
+        as="textarea"
+        name="description"
+        id="Description"
+        placeholder="Describe your node"
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,16 @@
+import { ErrorMessage, Field } from 'formik';
+
+export const DisplayNameField = () => {
+  return (
+    <div className="DisplayNameInput NodeCreationInput">
+      <ErrorMessage name="display_name" component="span" />
+      <label htmlFor="displayName">Display Name *</label>
+      <Field
+        type="text"
+        name="display_name"
+        id="displayName"
+        placeholder="Human readable display name"
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,338 @@
+import { useEffect, useState } from 'react';
+import { useFormikContext } from 'formik';
+import { ColumnsSelect } from 'datajunction-ui/src/app/pages/AddEditNodePage/ColumnsSelect';
+
+const AllocationJoinHeader = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        cursor: 'pointer',
+        fontSize: '16px',
+        fontWeight: 'bold',
+        padding: '10px',
+        borderRadius: '6px',
+        transition: 'background 0.2s',
+      }}
+    >
+      🔥 Fields to enable automatic allocation joins for use in ABlaze
+    </div>
+  );
+};
+
+const AllocationUnitTypeHeader = ({ unit }) => {
+  return (
+    <span
+      style={{
+        backgroundColor: '#fff7ea',
+        color: '#333',
+        fontWeight: '600',
+        width: '100%',
+        borderRadius: '8px 8px 0 0',
+        padding: '15px',
+        display: 'inline-block',
+        marginBottom: '10px',
+        borderBottom: '1px solid #ffe2b2',
+        textTransform: 'capitalize',
+      }}
+    >
+      Allocation Unit Type: {unit.replace('_', ' ')}
+    </span>
+  );
+};
+
+const AddAllocationJoin = ({ onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        marginTop: '10px',
+        cursor: 'pointer',
+        textTransform: 'none',
+        background: '#ffe4b2',
+        padding: '15px',
+        fontWeight: '400',
+        fontSize: '16px',
+        display: 'none',
+      }}
+    >
+      ➕ Add another allocation join type
+    </button>
+  );
+};
+
+export const ExperimentationExtension = ({
+  node,
+  action,
+  registerSubmitHandler,
+}) => {
+  const AllocationUnitType = Object.freeze({
+    ACCOUNT_ID: {
+      name: 'account_id',
+      node: 'common.dimensions.xp.allocation_day',
+    },
+    VISITOR_DEVICE_ID: { name: 'visitor_device_id', node: null },
+    PARTNER_VISITOR_DEVICE_ID: {
+      name: 'partner_visitor_device_id',
+      node: null,
+    },
+    PARTNER_ACCOUNT_ID: { name: 'partner_account_id', node: null },
+  });
+
+  const ALLOCATION_LINK_FIELD = 'allocation_links';
+
+  const { values, setFieldValue } = useFormikContext();
+
+  const [allocationConfigFields, setAllocationConfigFields] = useState({});
+
+  // Extracts any Allocation dimension node links
+  const getAllocationLinks = node => {
+    return Object.values(AllocationUnitType)
+      .map(alloc => ({
+        ...alloc,
+        link:
+          node?.dimension_links?.find(
+            link => link.dimension.name === alloc.node,
+          ) || null,
+      }))
+      .filter(alloc => alloc.link !== null);
+  };
+
+  const linkAllocations = async (
+    nodeName,
+    allocationNode,
+    allocationUnit,
+    eventTimestamp,
+  ) => {
+    const response = await fetch(
+      `${process.env.REACT_APP_DJ_URL}/nodes/${nodeName}/link/${allocationNode}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          event_timestamp_column: eventTimestamp,
+          account_id_column: allocationUnit,
+        }),
+        credentials: 'include',
+      },
+    );
+    return { status: response.status, json: await response.json() };
+  };
+
+  const unlinkAllocations = async (nodeName, allocationNode) => {
+    const response = await fetch(
+      `${process.env.REACT_APP_DJ_URL}/nodes/${nodeName}/link`,
+      {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ dimension_node: allocationNode }),
+        credentials: 'include',
+      },
+    );
+    return { status: response.status, json: await response.json() };
+  };
+
+  const handleSubmit = async (values, { setSubmitting, setStatus }) => {
+    for (const [unit, fields] of Object.entries(
+      values[ALLOCATION_LINK_FIELD],
+    )) {
+      const shouldDelete = Object.values(fields).every(
+        value => value === null || value === '',
+      );
+      const linkResponse = shouldDelete
+        ? await unlinkAllocations(
+            values.name,
+            AllocationUnitType[unit.toUpperCase()].node,
+          )
+        : await linkAllocations(
+            values.name,
+            AllocationUnitType[unit.toUpperCase()].node,
+            fields.allocation_unit,
+            fields.event_timestamp,
+          );
+      if (
+        linkResponse.status === 200 ||
+        linkResponse.status === 201 ||
+        linkResponse.status === 204
+      ) {
+        const verbiage = shouldDelete ? 'removed the link' : 'linked it';
+        setStatus({
+          success: (
+            <>
+              Successfully {action.name}ed {values.type} node{' '}
+              <a href={`/nodes/${values.name}`}>{values.name}</a> and {verbiage}{' '}
+              with{' '}
+              <a href={`/nodes/${AllocationUnitType[unit.toUpperCase()].node}`}>
+                Allocations
+              </a>
+              !
+            </>
+          ),
+        });
+      } else {
+        if (linkResponse.status === 404) {
+          setStatus({
+            failure: `The DJ API is not set up to support linking to ${
+              AllocationUnitType[unit.toUpperCase()].node
+            }.`,
+          });
+        }
+      }
+    }
+  };
+
+  // Register this function so the main form can call it on submit
+  useEffect(() => {
+    if (registerSubmitHandler) {
+      if (action.name === 'edit') {
+        registerSubmitHandler(handleSubmit, { prepend: false });
+      } else {
+        registerSubmitHandler(handleSubmit, { prepend: false });
+      }
+    }
+  }, []);
+
+  const getAllocationUnitColumn = link => {
+    return Object.entries(link.link.foreign_keys)
+      .find(([_, value]) => value === `${link.node}.${link.name}`)?.[0]
+      ?.replace(node.name + '.', '');
+  };
+
+  const getEventTimestampColumn = link => {
+    return Object.entries(link.link.foreign_keys)
+      .find(([_, value]) => value === null)?.[0]
+      ?.replace(node.name + '.', '');
+  };
+
+  const createColumnsSelect = (
+    fieldName,
+    label,
+    placeholder,
+    defaultValue = null,
+  ) => (
+    <ColumnsSelect
+      defaultValue={defaultValue}
+      fieldName={fieldName}
+      label={label}
+      labelStyle={{
+        textTransform: 'revert',
+        fontFamily: 'inherit',
+        fontWeight: 'inherit',
+      }}
+      placeholder={placeholder}
+      isClearable={true}
+    />
+  );
+
+  useEffect(() => {
+    const allocationLinks = getAllocationLinks(node);
+    if (
+      action.name === 'add' ||
+      (node &&
+        !Array.isArray(node) &&
+        node.length !== 0 &&
+        allocationLinks.length === 0)
+    ) {
+      setAllocationConfigFields(prevFields => ({
+        ...prevFields,
+        [AllocationUnitType.ACCOUNT_ID.name]: {
+          allocationUnit: createColumnsSelect(
+            `${ALLOCATION_LINK_FIELD}.${AllocationUnitType.ACCOUNT_ID.name}.allocation_unit`,
+            `Column that maps to ${AllocationUnitType.ACCOUNT_ID.name.replace(
+              '_',
+              ' ',
+            )}`,
+            'Choose Account ID Column',
+          ),
+          eventTimestamp: createColumnsSelect(
+            `${ALLOCATION_LINK_FIELD}.${AllocationUnitType.ACCOUNT_ID.name}.event_timestamp`,
+            'Event Timestamp Column',
+            'Choose Event Timestamp Column',
+          ),
+        },
+      }));
+    } else {
+      for (const link of allocationLinks) {
+        const allocationUnit = getAllocationUnitColumn(link);
+        const eventTimestamp = getEventTimestampColumn(link);
+
+        setFieldValue(
+          `${ALLOCATION_LINK_FIELD}.${link.name}.allocation_unit`,
+          allocationUnit || '',
+          false,
+        );
+        setFieldValue(
+          `${ALLOCATION_LINK_FIELD}.${link.name}.event_timestamp`,
+          eventTimestamp || '',
+          false,
+        );
+
+        setAllocationConfigFields(prevFields => ({
+          ...prevFields,
+          [link.name]: {
+            allocationUnit: createColumnsSelect(
+              `${ALLOCATION_LINK_FIELD}.${link.name}.allocation_unit`,
+              `Column that maps to ${link.name.replace('_', ' ')}`,
+              'Choose Account ID Column',
+              allocationUnit,
+            ),
+            eventTimestamp: createColumnsSelect(
+              `${ALLOCATION_LINK_FIELD}.${link.name}.event_timestamp`,
+              'Event Timestamp Column',
+              'Choose Event Timestamp Column',
+              eventTimestamp,
+            ),
+          },
+        }));
+      }
+    }
+  }, [node]);
+
+  if (
+    node?.type !== 'transform' &&
+    window.location.pathname.split('/')[2] !== 'transform'
+  ) {
+    return <></>;
+  }
+
+  return (
+    <>
+      {
+        <div
+          style={{
+            borderRadius: '8px',
+            padding: '10px 10px 20px 10px',
+            margin: '32px 0',
+            background: '#f9f9f9',
+            width: 'max-content',
+          }}
+        >
+          <AllocationJoinHeader />
+          {Object.keys(allocationConfigFields).map(unit => (
+            <>
+              <div
+                style={{
+                  backgroundColor: '#ffffff',
+                  borderRadius: '8px',
+                  margin: '15px 25px',
+                  paddingBottom: '10px',
+                  border: '1px solid #ffe2b2',
+                }}
+              >
+                <AllocationUnitTypeHeader unit={unit} />
+                {Object.values(allocationConfigFields[unit])}
+              </div>
+              <AddAllocationJoin />
+            </>
+          ))}
+        </div>
+      }
+    </>
+  );
+};

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

@@ -0,0 +1,64 @@
+/**
+ * A React Select component for use in Formik forms.
+ */
+import { useField } from 'formik';
+import Select from 'react-select';
+
+export const FormikSelect = ({
+  selectOptions,
+  formikFieldName,
+  placeholder,
+  defaultValue,
+  style,
+  className = 'SelectInput',
+  isMulti = false,
+  isClearable = false,
+  onFocus = event => {},
+  onChange: customOnChange,
+  menuPortalTarget,
+  styles,
+  ...rest
+}) => {
+  // eslint-disable-next-line no-unused-vars
+  const [field, _, helpers] = useField(formikFieldName);
+  const { setValue } = helpers;
+
+  // handles both multi-select and single-select cases
+  const getValue = options => {
+    if (options) {
+      return isMulti ? options.map(option => option.value) : options.value;
+    } else {
+      return isMulti ? [] : '';
+    }
+  };
+
+  const handleChange = selected => {
+    setValue(getValue(selected));
+    if (customOnChange) {
+      customOnChange(selected);
+    }
+  };
+
+  return (
+    <Select
+      className={className}
+      defaultValue={defaultValue}
+      options={selectOptions}
+      name={field.name}
+      placeholder={placeholder}
+      onBlur={field.onBlur}
+      onChange={handleChange}
+      styles={styles || style}
+      isMulti={isMulti}
+      isClearable={isClearable}
+      onFocus={event => onFocus(event)}
+      id={field.name}
+      menuPortalTarget={menuPortalTarget}
+      {...rest}
+    />
+  );
+};
+
+FormikSelect.defaultProps = {
+  placeholder: '',
+};

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

@@ -0,0 +1,38 @@
+/**
+ * A field for the full node name, which is generated based on the node's input
+ * namespace and display name.
+ */
+import { useField, useFormikContext } from 'formik';
+import { useEffect } from 'react';
+
+export const FullNameField = props => {
+  const { values, setFieldValue } = useFormikContext();
+  const [field, meta] = useField(props);
+
+  useEffect(() => {
+    // Set the value of the node's full name based on its namespace and display name
+    if (values.namespace || values.display_name) {
+      setFieldValue(
+        props.name,
+        `${values.namespace}.${values.display_name
+          .toLowerCase()
+          .replace(/ /g, '_')
+          .replace(/[^a-zA-Z0-9_]/g, '')}` || '',
+      );
+    }
+  }, [setFieldValue, props.name, values]);
+
+  return (
+    <>
+      <input
+        {...props}
+        {...field}
+        className="FullNameField"
+        disabled="disabled"
+        id="FullName"
+        value={values.name || ''}
+      />
+      {!!meta.touched && !!meta.error && <div>{meta.error}</div>}
+    </>
+  );
+};