Feat: Consumer Parameters

content/pages/editMetadata.json

@@ -179,6 +179,14 @@
         "placeholder": "e.g. logistics",
         "required": false
       },
+      {
+        "name": "usesConsumerParameters",
+        "label": "Algorithm custom parameters",
+        "help": "Algorithm custom parameters are used to define required consumer input before running the algorithm in a Compute-to-Data environment.",
+        "type": "checkbox",
+        "options": ["This asset uses algorithm custom parameters"],
+        "required": false
+      },
       {
         "name": "paymentCollector",
         "label": "Payment Collector Address",
@@ -199,6 +207,14 @@
         ],
         "sortOptions": false,
         "required": false
+      },
+      {
+        "name": "usesServiceConsumerParameters",
+        "label": "User defined parameters",
+        "help": "User defined parameters are used to filter or query the published asset.",
+        "type": "checkbox",
+        "options": ["This asset uses user defined parameters"],
+        "required": false
       }
     ]
   }

content/publish/consumerParameters.json

@@ -0,0 +1,65 @@
+{
+  "consumerParameters": {
+    "fields": [
+      {
+        "name": "consumerParameters",
+        "label": "Custom parameters",
+        "type": "consumerParameters",
+        "required": false,
+        "fields": [
+          {
+            "name": "name",
+            "label": "Parameter Name",
+            "placeholder": "custom_parameter",
+            "help": "The name of the parameter to ask for. This will be the JSON key for this parameter.",
+            "type": "text",
+            "required": true
+          },
+
+          {
+            "name": "label",
+            "label": "Parameter Label",
+            "placeholder": "Custom Parameter",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "description",
+            "label": "Description",
+            "placeholder": "A custom parameter changing the asset's behaviour.",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "type",
+            "label": "Parameter Type",
+            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the asset is used.",
+            "type": "select",
+            "options": ["number", "text", "boolean", "select"],
+            "required": true
+          },
+          {
+            "name": "options",
+            "label": "Select Options",
+            "placeholder": "Define the options for the user to select from",
+            "type": "creatableSelect",
+            "required": true
+          },
+          {
+            "name": "required",
+            "label": "Required",
+            "options": ["optional", "required"],
+            "type": "select",
+            "required": true
+          },
+          {
+            "name": "default",
+            "label": "Default Value",
+            "placeholder": "Define the default value for the current parameter",
+            "required": true
+          }
+        ]
+      }
+    ]
+  }
+}

content/publish/form.json

@@ -74,6 +74,14 @@
         "help": "Provide the entrypoint for your algorithm.",
         "required": true
       },
+      {
+        "name": "usesConsumerParameters",
+        "label": "Algorithm custom parameters",
+        "help": "Algorithm custom parameters are used to define required consumer input before running the algorithm in a Compute-to-Data environment.",
+        "type": "checkbox",
+        "options": ["This asset uses algorithm custom parameters"],
+        "required": false
+      },
       {
         "name": "termsAndConditions",
         "label": "Terms & Conditions",
@@ -255,6 +263,14 @@
         "options": ["Forever", "1 day", "1 week", "1 month", "1 year"],
         "sortOptions": false,
         "required": true
+      },
+      {
+        "name": "usesConsumerParameters",
+        "label": "User defined parameters",
+        "help": "User defined parameters are used to filter or query the published asset.",
+        "type": "checkbox",
+        "options": ["This asset uses user defined parameters"],
+        "required": false
       }
     ]
   },

src/@types/AssetExtended.d.ts

@@ -6,5 +6,7 @@ declare global {
   interface AssetExtended extends Asset {
     accessDetails?: AccessDetails
     views?: number
+    metadata: MetadataExtended
+    services: ServiceExtended[]
   }
 }

src/@utils/ddo.ts

@@ -2,10 +2,14 @@ import {
   ComputeEditForm,
   MetadataEditForm
 } from '@components/Asset/Edit/_types'
-import { FormPublishData } from '@components/Publish/_types'
+import {
+  FormConsumerParameter,
+  FormPublishData
+} from '@components/Publish/_types'
 import {
   Arweave,
   Asset,
+  ConsumerParameter,
   DDO,
   FileInfo,
   GraphqlQuery,
@@ -188,3 +192,30 @@ export function previewDebugPatch(
 
   return buildValuesPreview
 }
+
+export function parseConsumerParameters(
+  consumerParameters: ConsumerParameter[]
+): FormConsumerParameter[] {
+  if (!consumerParameters?.length) return []
+
+  return consumerParameters.map((param) => ({
+    ...param,
+    required: param.required ? 'required' : 'optional',
+    options:
+      param.type === 'select'
+        ? JSON.parse(param.options)?.map((option) => {
+            const key = Object.keys(option)[0]
+            return {
+              key,
+              value: option[key]
+            }
+          })
+        : [],
+    default:
+      param.type === 'boolean'
+        ? param.default === 'true'
+        : param.type === 'number'
+        ? Number(param.default)
+        : param.default
+  }))
+}

src/@utils/index.ts

@@ -17,3 +17,27 @@ export function sortAssets(items: Asset[], sorted: string[]) {
   })
   return items
 }
+
+export const isPlainObject = (object: any) => {
+  return object !== null && typeof object === 'object' && !Array.isArray(object)
+}
+
+export const getObjectPropertyByPath = (object: any, path = '') => {
+  if (!isPlainObject(object)) return undefined
+  path = path.replace(/\[(\w+)\]/g, '.$1') // convert indexes to properties
+  path = path.replace(/^\./, '') // strip a leading dot
+  const pathArray = path.split('.')
+  for (let i = 0, n = pathArray.length; i < n; ++i) {
+    const key = pathArray[i]
+    try {
+      if (key in object) {
+        object = object[key]
+      } else {
+        return undefined
+      }
+    } catch {
+      return undefined
+    }
+  }
+  return object
+}

src/@utils/provider.ts

@@ -12,9 +12,10 @@ import {
   ProviderComputeInitializeResults,
   ProviderInstance,
   UrlFile,
-  AbiItem
+  AbiItem,
+  UserCustomParameters
 } from '@oceanprotocol/lib'
-import { QueryHeader } from '@shared/FormInput/InputElement/Headers'
+import { KeyValuePair } from '@shared/FormInput/InputElement/KeyValueInput'
 import { Signer } from 'ethers'
 import { getValidUntilTime } from './compute'
 
@@ -95,7 +96,7 @@ export async function getFileInfo(
   providerUrl: string,
   storageType: string,
   query?: string,
-  headers?: QueryHeader[],
+  headers?: KeyValuePair[],
   abi?: string,
   chainId?: number,
   method?: string
@@ -176,15 +177,17 @@ export async function downloadFile(
   signer: Signer,
   asset: AssetExtended,
   accountId: string,
-  validOrderTx?: string
+  validOrderTx?: string,
+  userCustomParameters?: UserCustomParameters
 ) {
   const downloadUrl = await ProviderInstance.getDownloadUrl(
     asset.id,
     asset.services[0].id,
     0,
     validOrderTx || asset.accessDetails.validOrderTx,
     asset.services[0].serviceEndpoint,
-    signer
+    signer,
+    userCustomParameters
   )
   await downloadFileBrowser(downloadUrl)
 }

src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx

@@ -0,0 +1,40 @@
+import React, { ReactElement } from 'react'
+import Input, { InputProps } from '../..'
+import { Field, useField } from 'formik'
+import { FormConsumerParameter } from '@components/Publish/_types'
+
+export default function DefaultInput({
+  index,
+  inputName,
+  ...props
+}: InputProps & {
+  index: number
+  inputName: string
+}): ReactElement {
+  const [field] = useField<FormConsumerParameter[]>(inputName)
+  const fieldType = field.value[index]?.type
+  const fieldOptions = field.value[index]?.options
+
+  const getStringOptions = (
+    options: { key: string; value: string }[]
+  ): string[] => {
+    if (!options?.length) return []
+
+    return options.map((option) => option.key)
+  }
+
+  return (
+    <Field
+      {...props}
+      component={Input}
+      type={fieldType === 'boolean' ? 'select' : fieldType}
+      options={
+        fieldType === 'boolean'
+          ? ['true', 'false']
+          : fieldType === 'select'
+          ? getStringOptions(fieldOptions)
+          : fieldOptions
+      }
+    />
+  )
+}

src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.module.css

@@ -0,0 +1,5 @@
+.actions {
+  display: flex;
+  justify-content: center;
+  gap: var(--spacer);
+}

src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx

@@ -0,0 +1,84 @@
+import React, { ReactElement } from 'react'
+import Button from '@shared/atoms/Button'
+import styles from './FormActions.module.css'
+import { useField, useFormikContext } from 'formik'
+import {
+  FormConsumerParameter,
+  FormPublishData
+} from '@components/Publish/_types'
+import { getObjectPropertyByPath } from '@utils/index'
+import { defaultConsumerParam } from '.'
+import { toast } from 'react-toastify'
+
+export default function FormActions({
+  fieldName,
+  index,
+  onParameterAdded,
+  onParameterDeleted
+}: {
+  fieldName: string
+  index: number
+  onParameterAdded?: (index: number) => void
+  onParameterDeleted?: (previousIndex: number) => void
+}): ReactElement {
+  const { errors, setFieldTouched, validateField } =
+    useFormikContext<FormPublishData>()
+  const [field, meta, helpers] = useField<FormConsumerParameter[]>(fieldName)
+
+  const setParamPropsTouched = (index: number, touched = true) => {
+    Object.keys(defaultConsumerParam).forEach((param) => {
+      setFieldTouched(`${field.name}[${index}].${param}`, touched)
+    })
+  }
+
+  const addParameter = (index: number) => {
+    // validate parameter before allowing the creation of a new one
+    validateField(field.name)
+    setParamPropsTouched(index)
+
+    // Check errors on current tab before creating a new param
+    if (getObjectPropertyByPath(errors, `${field.name}[${index}]`)) {
+      toast.error(
+        'Cannot add new parameter. Current parameter definition contains errors.'
+      )
+      return
+    }
+
+    helpers.setValue([...field.value, { ...defaultConsumerParam }])
+
+    onParameterAdded && onParameterAdded(field.value.length)
+  }
+
+  const deleteParameter = (index: number) => {
+    helpers.setValue(field.value.filter((p, i) => i !== index))
+
+    const previousIndex = Math.max(0, index - 1)
+    onParameterDeleted && onParameterDeleted(previousIndex)
+  }
+
+  return (
+    <div className={styles.actions}>
+      <Button
+        style="ghost"
+        size="small"
+        disabled={field.value.length === 1}
+        onClick={(e) => {
+          e.preventDefault()
+          deleteParameter(index)
+        }}
+      >
+        Delete parameter
+      </Button>
+      <Button
+        style="primary"
+        size="small"
+        onClick={(e) => {
+          e.preventDefault()
+          addParameter(index)
+        }}
+      >
+        Add new parameter
+      </Button>
+    </div>
+  )
+}

src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.module.css

@@ -0,0 +1,16 @@
+.container {
+  position: relative;
+}
+
+.container.hasError * {
+  border-color: var(--brand-alert-red);
+}
+
+.hasError label {
+  color: var(--brand-alert-red);
+}
+
+.error {
+  composes: error from '../../index.module.css';
+  top: 100%;
+}