Add service filters download and compute to the existing filters (#817)

* filter tags added, filter functionality linked

* filter tag selection fix

* deselect filter fix, logs deleted

* use single filter function

* delete unused functions and logs

* &nbsp replaced

src/components/templates/Search/filterService.module.css

@@ -2,6 +2,13 @@
 div.filterList {
   white-space: normal;
   margin-bottom: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+}
+
+.separator {
+  width: calc(var(--spacer) / 2);
 }
 
 .filter {

src/components/templates/Search/filterService.tsx

@@ -2,7 +2,11 @@ import React, { ReactElement, useState } from 'react'
 import { useNavigate } from '@reach/router'
 import styles from './filterService.module.css'
 import classNames from 'classnames/bind'
-import { addExistingParamsToUrl, FilterByTypeOptions } from './utils'
+import {
+  addExistingParamsToUrl,
+  FilterByAccessOptions,
+  FilterByTypeOptions
+} from './utils'
 import Button from '../../atoms/Button'
 
 const cx = classNames.bind(styles)
@@ -14,57 +18,110 @@ const serviceFilterItems = [
   { display: 'algorithms', value: FilterByTypeOptions.Algorithm }
 ]
 
+const accessFilterItems = [
+  { display: 'download ', value: FilterByAccessOptions.Download },
+  { display: 'compute ', value: FilterByAccessOptions.Compute }
+]
+
 export default function FilterPrice({
   serviceType,
-  setServiceType
+  accessType,
+  setServiceType,
+  setAccessType
 }: {
   serviceType: string
+  accessType: string
   setServiceType: React.Dispatch<React.SetStateAction<string>>
+  setAccessType: React.Dispatch<React.SetStateAction<string>>
 }): ReactElement {
   const navigate = useNavigate()
   const [serviceSelections, setServiceSelections] = useState<string[]>([])
+  const [accessSelections, setAccessSelections] = useState<string[]>([])
 
-  async function applyServiceFilter(filterBy: string) {
+  async function applyFilter(filter: string, filterType: string) {
-    let urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
+    let urlLocation = ''
-    if (filterBy && location.search.indexOf('&serviceType') === -1) {
+    if (filterType.localeCompare('accessType') === 0) {
-      urlLocation = `${urlLocation}&serviceType=${filterBy}`
+      urlLocation = await addExistingParamsToUrl(location, ['accessType'])
+    } else {
+      urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
     }
-    setServiceType(filterBy)
+
+    if (filter && location.search.indexOf(filterType) === -1) {
+      filterType === 'accessType'
+        ? (urlLocation = `${urlLocation}&accessType=${filter}`)
+        : (urlLocation = `${urlLocation}&serviceType=${filter}`)
+    }
+
+    filterType === 'accessType' ? setAccessType(filter) : setServiceType(filter)
     navigate(urlLocation)
   }
 
   async function handleSelectedFilter(isSelected: boolean, value: string) {
-    if (isSelected) {
+    if (
-      if (serviceSelections.length > 1) {
+      value === FilterByAccessOptions.Download ||
-        const otherValue = serviceFilterItems.find(
+      value === FilterByAccessOptions.Compute
-          (p) => p.value !== value
+    ) {
-        ).value
+      if (isSelected) {
-        await applyServiceFilter(otherValue)
+        if (accessSelections.length > 1) {
-        setServiceSelections([otherValue])
+          // both selected -> select the other one
+          const otherValue = accessFilterItems.find(
+            (p) => p.value !== value
+          ).value
+          await applyFilter(otherValue, 'accessType')
+          setAccessSelections([otherValue])
+        } else {
+          // only the current one selected -> deselect it
+          await applyFilter(undefined, 'accessType')
+          setAccessSelections([])
+        }
       } else {
-        await applyServiceFilter(undefined)
+        if (accessSelections.length) {
-        if (serviceSelections.includes(value)) {
+          // one already selected -> both selected
-          serviceSelections.pop()
+          await applyFilter(undefined, 'accessType')
+          setAccessSelections(accessFilterItems.map((p) => p.value))
+        } else {
+          // none selected -> select
+          await applyFilter(value, 'accessType')
+          setAccessSelections([value])
         }
       }
     } else {
-      if (serviceSelections.length) {
+      if (isSelected) {
-        await applyServiceFilter(undefined)
+        if (serviceSelections.length > 1) {
-        setServiceSelections(serviceFilterItems.map((p) => p.value))
+          const otherValue = serviceFilterItems.find(
+            (p) => p.value !== value
+          ).value
+          await applyFilter(otherValue, 'serviceType')
+          setServiceSelections([otherValue])
+        } else {
+          await applyFilter(undefined, 'serviceType')
+          setServiceSelections([])
+        }
       } else {
-        await applyServiceFilter(value)
+        if (serviceSelections.length) {
-        setServiceSelections([value])
+          await applyFilter(undefined, 'serviceType')
+          setServiceSelections(serviceFilterItems.map((p) => p.value))
+        } else {
+          await applyFilter(value, 'serviceType')
+          setServiceSelections([value])
+        }
       }
     }
   }
 
   async function applyClearFilter() {
-    let urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
+    let urlLocation = await addExistingParamsToUrl(location, [
+      'accessType',
+      'serviceType'
+    ])
 
     urlLocation = `${urlLocation}`
 
     setServiceSelections([])
+    setAccessSelections([])
+
     setServiceType(undefined)
+    setAccessType(undefined)
     navigate(urlLocation)
   }
 
@@ -91,8 +148,31 @@ export default function FilterPrice({
           </Button>
         )
       })}
+      <div className={styles.separator} />
+      {accessFilterItems.map((e, index) => {
+        const isAccessSelected =
+          e.value === accessType || accessSelections.includes(e.value)
+        const selectFilter = cx({
+          [styles.selected]: isAccessSelected,
+          [styles.filter]: true
+        })
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={selectFilter}
+            onClick={async () => {
+              handleSelectedFilter(isAccessSelected, e.value)
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
       {clearFilters.map((e, index) => {
-        const showClear = serviceSelections.length > 0
+        const showClear =
+          accessSelections.length > 0 || serviceSelections.length > 0
         return (
           <Button
             size="small"

src/components/templates/Search/index.tsx

@@ -21,11 +21,13 @@ export default function SearchPage({
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const parsed = queryString.parse(location.search)
-  const { text, owner, tags, page, sort, sortOrder, serviceType } = parsed
+  const { text, owner, tags, page, sort, sortOrder, serviceType, accessType } =
+    parsed
   const { chainIds } = useUserPreferences()
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [loading, setLoading] = useState<boolean>()
   const [service, setServiceType] = useState<string>(serviceType as string)
+  const [access, setAccessType] = useState<string>(accessType as string)
   const [sortType, setSortType] = useState<string>(sort as string)
   const [sortDirection, setSortDirection] = useState<string>(
     sortOrder as string
@@ -53,6 +55,7 @@ export default function SearchPage({
     sort,
     page,
     serviceType,
+    accessType,
     sortOrder,
     appConfig.metadataCacheUri,
     chainIds
@@ -74,7 +77,9 @@ export default function SearchPage({
           <div className={styles.row}>
             <ServiceFilter
               serviceType={service}
+              accessType={access}
               setServiceType={setServiceType}
+              setAccessType={setAccessType}
             />
             <Sort
               sortType={sortType}

src/components/templates/Search/utils.ts

@@ -1,5 +1,5 @@
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
-import { MetadataCache, Logger } from '@oceanprotocol/lib'
+import { Logger } from '@oceanprotocol/lib'
 import {
   queryMetadata,
   transformChainIdsListToQuery
@@ -33,6 +33,13 @@ export const FilterByTypeOptions = {
 type FilterByTypeOptions =
   typeof FilterByTypeOptions[keyof typeof FilterByTypeOptions]
 
+export const FilterByAccessOptions = {
+  Download: 'access',
+  Compute: 'compute'
+}
+type FilterByAccessOptions =
+  typeof FilterByAccessOptions[keyof typeof FilterByAccessOptions]
+
 function getSortType(sortParam: string): string {
   const sortTerm =
     sortParam === SortTermOptions.Created
@@ -51,7 +58,8 @@ export function getSearchQuery(
   offset?: string,
   sort?: string,
   sortOrder?: string,
-  serviceType?: string
+  serviceType?: string,
+  accessType?: string
 ): any {
   const sortTerm = getSortType(sort)
   const sortValue = sortOrder === SortValueOptions.Ascending ? 1 : -1
@@ -139,6 +147,12 @@ export function getSearchQuery(
                   : `${serviceType}`
             }
           },
+          {
+            match: {
+              'service.type':
+                accessType === undefined ? 'access OR compute' : `${accessType}`
+            }
+          },
           {
             query_string: {
               query: `${transformChainIdsListToQuery(chainIds)}`
@@ -169,6 +183,7 @@ export async function getResults(
     sort?: string
     sortOrder?: string
     serviceType?: string
+    accessType?: string
   },
   metadataCacheUri: string,
   chainIds: number[]
@@ -182,7 +197,8 @@ export async function getResults(
     offset,
     sort,
     sortOrder,
-    serviceType
+    serviceType,
+    accessType
   } = params
 
   const searchQuery = getSearchQuery(
@@ -195,7 +211,8 @@ export async function getResults(
     offset,
     sort,
     sortOrder,
-    serviceType
+    serviceType,
+    accessType
   )
   const source = axios.CancelToken.source()
   // const queryResult = await metadataCache.queryMetadata(searchQuery)