544: filter software on keyword/tag using a link

frontend/components/layout/TagChip.tsx

@@ -10,8 +10,6 @@ export default function TagChip({label, title}:
       title={title ? title : label}
       label={label}
       sx={{
-        marginBottom: '1rem',
-        marginRight: '0.5rem',
         maxWidth: '21rem',
         borderRadius: '0.125rem',
         textTransform: 'capitalize'

frontend/components/layout/TagChipFilter.tsx

@@ -0,0 +1,36 @@
+import Chip from '@mui/material/Chip'
+import SearchIcon from '@mui/icons-material/Search'
+import Link from 'next/link'
+
+export default function TagChipFilter({url, label, title}:
+  { label: string, url:string ,title?: string }) {
+
+  if (!label) return null
+
+  return (
+    <Link
+      href={url}
+      passHref
+    >
+    <a>
+    <Chip
+      title={`Click to filter for ${title ? title : label}`}
+      label={label}
+      icon={<SearchIcon />}
+      clickable
+      sx={{
+        maxWidth: '21rem',
+        borderRadius: '0.125rem',
+        textTransform: 'capitalize',
+        '& .MuiChip-icon': {
+          order: 1,
+          margin:'0rem 0.5rem 0rem 0rem',
+          height: '1.125rem',
+          width: '1.125rem'
+        }
+      }}
+    />
+    </a>
+    </Link>
+  )
+}

frontend/components/projects/ProjectKeywordFilter.tsx

@@ -15,7 +15,7 @@ type KeywordFilterProps = {
  * Keywords filter component. It receives array of keywords and returns
  * array of selected tags to use in filter using onSelect callback function
  */
-export default function ProjectKeywordsFilter({items=[], onApply}:KeywordFilterProps) {
+export default function ProjectKeywordFilter({items=[], onApply}:KeywordFilterProps) {
   return (
     <KeywordFilter
       items={items}

frontend/components/projects/ProjectKeywords.tsx

@@ -0,0 +1,43 @@
+// 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: 2022 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {KeywordForProject} from '~/types/Project'
+import {ssrProjectsUrl} from '~/utils/postgrestUrl'
+import TagChipFilter from '../layout/TagChipFilter'
+
+type TagWithTitle = {
+  title: string
+  label: string
+}
+
+export default function ProjectKeywords({keywords=[]}:{keywords:KeywordForProject[]}) {
+
+  function renderTags() {
+    if (keywords.length === 0) {
+      return <i>Not specified</i>
+    }
+    return (
+      <div className="flex flex-wrap gap-2 py-1">
+        {
+          keywords.map((item, pos) => {
+            const url = ssrProjectsUrl({keywords: [item.keyword]})
+            return <TagChipFilter url={url} key={pos} label={item.keyword} />
+          })
+        }
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <h4 className="text-primary py-4">
+        Keywords
+      </h4>
+      {renderTags()}
+    </div>
+  )
+}

frontend/components/projects/ProjectSidebar.tsx

@@ -10,7 +10,7 @@ import {KeywordForProject, ProjectLink, ResearchDomain} from '../../types/Projec
 import ProjectStatus from './ProjectStatus'
 import ProjectFunding from './ProjectFunding'
 import ProjectLinks from './ProjectLinks'
-import ProjectTags from './ProjectTags'
+import ProjectKeywords from './ProjectKeywords'
 import {ProjectOrganisationProps} from '~/types/Organisation'
 import ResearchDomains from './ResearchDomains'
 
@@ -48,9 +48,8 @@ export default function ProjectSidebar({date_start, date_end, grant_id, links, r
         domains={researchDomains}
       />
 
-      <ProjectTags
-        title="Keywords"
-        tags={keywords.map(item=>item.keyword)}
+      <ProjectKeywords
+        keywords={keywords}
       />
 
     </aside>

frontend/components/projects/ResearchDomains.tsx

@@ -17,7 +17,7 @@ export default function ResearchDomains({domains}:{domains:ResearchDomain[]}) {
       return <i>Not specified</i>
     }
     return (
-      <div className="flex flex-wrap py-1">
+      <div className="flex flex-wrap gap-2 py-1">
         {
           domains.map((item, pos) => {
             return (

frontend/components/software/SoftwareKeywords.tsx

@@ -5,7 +5,8 @@
 
 import LocalOfferIcon from '@mui/icons-material/LocalOffer'
 import {KeywordForSoftware} from '../../types/SoftwareTypes'
-import TagChip from '~/components/layout/TagChip'
+import TagChipFilter from '../layout/TagChipFilter'
+import {softwareUrl} from '~/utils/postgrestUrl'
 
 export default function SoftwareKeywords({keywords = []}: { keywords: KeywordForSoftware[] }) {
 
@@ -16,9 +17,10 @@ export default function SoftwareKeywords({keywords = []}: { keywords: KeywordFor
       )
     }
     return (
-      <div className="flex flex-wrap py-1">
+      <div className="flex flex-wrap gap-2 py-1">
         {keywords.map((item, pos) => {
-          return <TagChip key={pos} label={item.keyword}/>
+          const url = softwareUrl({keywords: [item.keyword]})
+          return <TagChipFilter url={url} key={pos} label={item.keyword} />
         })}
       </div>
     )