From dafd5143ea09226e4cb4b21de06a56e9d5654f03 Mon Sep 17 00:00:00 2001
From: mihaisc <mihai.scarlat@smartcontrol.ro>
Date: Mon, 10 Oct 2022 15:33:42 +0300
Subject: [PATCH] add top tags (#1730)

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
---
 src/@types/aquarius/SearchQuery.ts           |  2 +-
 src/@utils/aquarius.ts                       |  4 +-
 src/components/Home/TopTags/_utils.ts        | 45 +++++++++++++++++
 src/components/Home/TopTags/index.module.css |  3 ++
 src/components/Home/TopTags/index.tsx        | 51 ++++++++++++++++++++
 src/components/Home/index.tsx                |  6 ++-
 6 files changed, 106 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Home/TopTags/_utils.ts
 create mode 100644 src/components/Home/TopTags/index.module.css
 create mode 100644 src/components/Home/TopTags/index.tsx

diff --git a/src/@types/aquarius/SearchQuery.ts b/src/@types/aquarius/SearchQuery.ts
index 39ec650ee..3e4543c39 100644
--- a/src/@types/aquarius/SearchQuery.ts
+++ b/src/@types/aquarius/SearchQuery.ts
@@ -6,7 +6,7 @@ export enum SortDirectionOptions {
 export enum SortTermOptions {
   Created = 'nft.created',
   Relevance = '_score',
-  Stats = 'stats.orders',
+  Orders = 'stats.orders',
   Allocated = 'stats.allocated'
 }
 
diff --git a/src/@utils/aquarius.ts b/src/@utils/aquarius.ts
index 50f17c0da..90b1e5a27 100644
--- a/src/@utils/aquarius.ts
+++ b/src/@utils/aquarius.ts
@@ -305,7 +305,7 @@ export async function getPublishedAssets(
     aggs: {
       totalOrders: {
         sum: {
-          field: SortTermOptions.Stats
+          field: SortTermOptions.Orders
         }
       }
     },
@@ -359,7 +359,7 @@ export async function getTopPublishers(
         aggs: {
           totalSales: {
             sum: {
-              field: SortTermOptions.Stats
+              field: SortTermOptions.Orders
             }
           }
         }
diff --git a/src/components/Home/TopTags/_utils.ts b/src/components/Home/TopTags/_utils.ts
new file mode 100644
index 000000000..dfcb48884
--- /dev/null
+++ b/src/components/Home/TopTags/_utils.ts
@@ -0,0 +1,45 @@
+import { LoggerInstance } from '@oceanprotocol/lib'
+import { generateBaseQuery, queryMetadata } from '@utils/aquarius'
+import axios, { CancelToken } from 'axios'
+import { SortTermOptions } from 'src/@types/aquarius/SearchQuery'
+
+export async function getTopTags(
+  chainIds: number[],
+  cancelToken: CancelToken
+): Promise<string[]> {
+  const baseQueryParams = {
+    chainIds,
+    aggs: {
+      topTags: {
+        terms: {
+          field: 'metadata.tags.keyword',
+          size: 20,
+          order: { totalSales: 'desc' }
+        },
+        aggs: {
+          totalSales: {
+            sum: {
+              field: SortTermOptions.Orders
+            }
+          }
+        }
+      }
+    },
+    esPaginationOptions: { from: 0, size: 0 }
+  } as BaseQueryParams
+
+  const query = generateBaseQuery(baseQueryParams)
+  try {
+    const result = await queryMetadata(query, cancelToken)
+    const tagsList = result?.aggregations?.topTags?.buckets.map(
+      (x: { key: any }) => x.key
+    )
+    return tagsList
+  } catch (error) {
+    if (axios.isCancel(error)) {
+      LoggerInstance.log(error.message)
+    } else {
+      LoggerInstance.error(error.message)
+    }
+  }
+}
diff --git a/src/components/Home/TopTags/index.module.css b/src/components/Home/TopTags/index.module.css
new file mode 100644
index 000000000..d176386d7
--- /dev/null
+++ b/src/components/Home/TopTags/index.module.css
@@ -0,0 +1,3 @@
+.section {
+  composes: section from '../index.module.css';
+}
diff --git a/src/components/Home/TopTags/index.tsx b/src/components/Home/TopTags/index.tsx
new file mode 100644
index 000000000..f20232868
--- /dev/null
+++ b/src/components/Home/TopTags/index.tsx
@@ -0,0 +1,51 @@
+import { useUserPreferences } from '@context/UserPreferences'
+import React, { ReactElement, useEffect, useState } from 'react'
+import styles from './index.module.css'
+import Tags from '@shared/atoms/Tags'
+import { getTopTags } from './_utils'
+import { useCancelToken } from '@hooks/useCancelToken'
+import { LoggerInstance } from '@oceanprotocol/lib'
+import Loader from '@shared/atoms/Loader'
+
+export default function TopTags({
+  title,
+  action
+}: {
+  title: ReactElement | string
+  action?: ReactElement
+}): ReactElement {
+  const { chainIds } = useUserPreferences()
+  const [result, setResult] = useState<string[]>([])
+  const [loading, setLoading] = useState<boolean>()
+  const newCancelToken = useCancelToken()
+  useEffect(() => {
+    async function init() {
+      setLoading(true)
+      if (chainIds.length === 0) {
+        const result: string[] = []
+        setResult(result)
+        setLoading(false)
+      } else {
+        try {
+          const tags = await getTopTags(chainIds, newCancelToken())
+          setResult(tags)
+          setLoading(false)
+        } catch (error) {
+          LoggerInstance.error(error.message)
+          setLoading(false)
+        }
+      }
+    }
+
+    init()
+  }, [chainIds])
+
+  return (
+    <section className={styles.section}>
+      <h3>{title}</h3>
+      {loading ? <Loader /> : <Tags items={result} />}
+
+      {action && action}
+    </section>
+  )
+}
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index ce98751d6..1cd7cc4c5 100644
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -5,8 +5,9 @@ import { generateBaseQuery } from '@utils/aquarius'
 import { useUserPreferences } from '@context/UserPreferences'
 import { SortTermOptions } from '../../@types/aquarius/SearchQuery'
 import TopSales from './TopSales'
-import styles from './index.module.css'
+import TopTags from './TopTags'
 import SectionQueryResult from './SectionQueryResult'
+import styles from './index.module.css'
 
 export default function HomePage(): ReactElement {
   const [queryLatest, setQueryLatest] = useState<SearchQuery>()
@@ -32,7 +33,7 @@ export default function HomePage(): ReactElement {
         size: 6
       },
       sortOptions: {
-        sortBy: SortTermOptions.Stats
+        sortBy: SortTermOptions.Orders
       } as SortOptions
     } as BaseQueryParams
     setQueryMostSales(generateBaseQuery(baseParamsSales))
@@ -63,6 +64,7 @@ export default function HomePage(): ReactElement {
       <SectionQueryResult title="Most Sales" query={queryMostSales} />
 
       <TopSales title="Publishers With Most Sales" />
+      <TopTags title="Top Tags By Sales" />
 
       <SectionQueryResult
         title="Recently Published"