From a2e7c84d6caef6be7ffcb28ed1ea4b8b1d61f835 Mon Sep 17 00:00:00 2001
From: "Dusan Mijatovic (PC2020)" <d.mijatovic@dv4all.nl>
Date: Mon, 16 Jan 2023 17:59:13 +0100
Subject: [PATCH] fix: for gitlab use delivered values and omit link for other
 language category

---
 .../components/software/AboutLanguageItem.tsx | 66 +++++++++++++++++++
 .../components/software/AboutLanguages.tsx    | 64 ++++++++----------
 frontend/components/software/AboutSection.tsx |  6 +-
 3 files changed, 97 insertions(+), 39 deletions(-)
 create mode 100644 frontend/components/software/AboutLanguageItem.tsx

diff --git a/frontend/components/software/AboutLanguageItem.tsx b/frontend/components/software/AboutLanguageItem.tsx
new file mode 100644
index 000000000..9fd55d3a7
--- /dev/null
+++ b/frontend/components/software/AboutLanguageItem.tsx
@@ -0,0 +1,66 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2023 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import SearchIcon from '@mui/icons-material/Search'
+import Link from 'next/link'
+import {ssrSoftwareUrl} from '~/utils/postgrestUrl'
+
+type AboutLanguageItemProps = {
+  language: string,
+  val: number,
+  pct: number
+}
+
+export default function AboutLanguageItem(props: AboutLanguageItemProps) {
+  const {language, pct} = props
+
+  if (language.toLowerCase() === 'other') {
+    // Other item has no search link
+    return (
+      <li>
+        <div className="flex justify-between">
+          <span>{language} {pct}%</span>
+        </div>
+        <div
+          className="bg-primary"
+          style={{
+            width: `${pct}%`,
+            height: '0.5rem',
+            opacity: 0.5
+          }}>
+        </div>
+      </li>
+    )
+  }
+
+  // construct url
+  const url = ssrSoftwareUrl({prog_lang: [language]})
+
+  return (
+    <li>
+      <div className="flex justify-between">
+        <span>{language} {pct}%</span>
+        <Link
+          title={`Click to filter for software using ${language}`}
+          href={url}
+          passHref
+        >
+          <SearchIcon sx={{
+            marginRight: '0.5rem',
+            color:'text.secondary'
+          }} />
+        </Link>
+      </div>
+      <div
+        className="bg-primary"
+        style={{
+          width: `${pct}%`,
+          height: '0.5rem',
+          opacity: 0.5
+        }}>
+      </div>
+    </li>
+  )
+}
diff --git a/frontend/components/software/AboutLanguages.tsx b/frontend/components/software/AboutLanguages.tsx
index 53ee459ee..61712cf8d 100644
--- a/frontend/components/software/AboutLanguages.tsx
+++ b/frontend/components/software/AboutLanguages.tsx
@@ -1,5 +1,5 @@
+// SPDX-FileCopyrightText: 2022 - 2023 Dusan Mijatovic (dv4all)
 // SPDX-FileCopyrightText: 2022 - 2023 dv4all
-// SPDX-FileCopyrightText: 2022 Dusan Mijatovic (dv4all)
 // SPDX-FileCopyrightText: 2022 Ewan Cahen (Netherlands eScience Center) <e.cahen@esciencecenter.nl>
 // SPDX-FileCopyrightText: 2022 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
@@ -7,11 +7,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import Code from '@mui/icons-material/Code'
-import SearchIcon from '@mui/icons-material/Search'
-import Link from 'next/link'
-import {ssrSoftwareUrl} from '~/utils/postgrestUrl'
-import {ProgramingLanguages} from '../../types/SoftwareTypes'
-import logger from '../../utils/logger'
+
+import {sortOnNumProp} from '~/utils/sortFn'
+import logger from '~/utils/logger'
+import {CodePlatform, ProgramingLanguages} from '~/types/SoftwareTypes'
+import AboutLanguageItem from './AboutLanguageItem'
 
 /**
  * Calculate programming languages percentages.
@@ -55,14 +55,31 @@ function calculateStats(languages: ProgramingLanguages) {
     return stats
   } catch (e:any) {
     logger(`AboutLanguages: Failed to calculateStats. Error: ${e.message}`, 'error')
+    return []
   }
 }
 
+export default function AboutLanguages({languages, platform}:
+  { languages: ProgramingLanguages, platform: CodePlatform }) {
 
-export default function AboutLanguages({languages}: {languages: ProgramingLanguages }) {
   // don't render section if no languages
   if (typeof languages == 'undefined' || languages === null) return null
-  const stats = calculateStats(languages)
+
+  let stats = []
+  if (platform === 'gitlab') {
+    // GitLab api stats already in %
+    // we only map and sort by %
+    stats = Object.keys(languages)
+      .map(key => ({
+        language: key,
+        val: languages[key],
+        pct: Math.round(languages[key])
+      }))
+      .sort((a,b)=>sortOnNumProp(a,b,'pct','desc'))
+  } else {
+    stats = calculateStats(languages)
+  }
+
   // don't render if stats failed
   if (typeof stats == 'undefined') return null
 
@@ -73,34 +90,9 @@ export default function AboutLanguages({languages}: {languages: ProgramingLangua
       <span className="text-primary pl-2">Programming language</span>
     </div>
     <ul className="py-1">
-      {/* show only stat selection pct > 0*/}
-      {stats?.map((entry) => {
-        const url = ssrSoftwareUrl({prog_lang: [entry.language]})
-        return (
-          <li key={entry.language}>
-            <div className="flex justify-between">
-              <span>{entry.language} {entry.pct}%</span>
-              <Link
-                title={`Click to filter for software using ${entry.language}`}
-                href={url}
-                passHref
-              >
-                <SearchIcon sx={{
-                  marginRight: '0.5rem',
-                  color:'text.secondary'
-                }} />
-              </Link>
-            </div>
-            <div
-              className="bg-primary"
-              style={{
-                width: `${entry.pct}%`,
-                height: '0.5rem',
-                opacity: 0.5
-              }}>
-            </div>
-          </li>
-        )
+      {/* show only stat selection pct > 0 and exclude other category */}
+      {stats?.map((props) => {
+        return <AboutLanguageItem key={props.language} {...props} />
       })}
     </ul>
     </>
diff --git a/frontend/components/software/AboutSection.tsx b/frontend/components/software/AboutSection.tsx
index 77e4ec1a0..b0acbd710 100644
--- a/frontend/components/software/AboutSection.tsx
+++ b/frontend/components/software/AboutSection.tsx
@@ -1,5 +1,5 @@
-// SPDX-FileCopyrightText: 2021 - 2022 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2021 - 2022 dv4all
+// SPDX-FileCopyrightText: 2021 - 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2021 - 2023 dv4all
 // SPDX-FileCopyrightText: 2022 Christian Meeßen (GFZ) <christian.meessen@gfz-potsdam.de>
 // SPDX-FileCopyrightText: 2022 Helmholtz Centre Potsdam - GFZ German Research Centre for Geosciences
 //
@@ -59,7 +59,7 @@ export default function AboutSection(props:AboutSectionType) {
       <div className="flex-1">
         {getSoftwareLogo()}
         <SoftwareKeywords keywords={keywords || []} />
-        <AboutLanguages languages={languages} />
+        <AboutLanguages languages={languages} platform={platform} />
         <AboutLicense license={license || []} />
         <AboutSourceCode
           repository={repository ?? null}