Improvements to how tags are displayed

ResilienceWeb · Oct 8, 2024 · 25ec48a · 25ec48a
1 parent 9e7fb12
commit 25ec48a
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 30 deletions.
diff --git a/app/[subdomain]/Web.tsx b/app/[subdomain]/Web.tsx
@@ -74,22 +74,21 @@ const Web = ({
 
   const selectedCategories = useMemo(() => {
     return query.categories.map((categoryLabel) => {
-      const categoryColor = categories.find(
-        (c: Category) => c.label === categoryLabel,
-      )?.color
       return {
         value: categoryLabel,
         label: categoryLabel,
-        color: categoryColor,
+        color: categories.find((c: Category) => c.label === categoryLabel)
+          ?.color,
       }
     })
   }, [categories, query.categories])
   const selectedTags = useMemo(() => {
     return query.tags.map((tagLabel) => ({
       value: tagLabel,
       label: tagLabel,
+      color: tags.find((t) => t.label === tagLabel)?.color,
     }))
-  }, [query.tags])
+  }, [tags, query.tags])
 
   const [selectedId, setSelectedId] = useState()
 
@@ -112,9 +111,11 @@ const Web = ({
     if (!fetchedTags) return
 
     setTags(
-      fetchedTags.map((c) => ({
-        value: c.label,
-        label: c.label,
+      fetchedTags.map((t) => ({
+        value: t.label,
+        label: t.label,
+        // @ts-ignore
+        color: t.color ?? '#2f2f30',
       })),
     )
   }, [fetchedTags])
@@ -178,7 +179,7 @@ const Web = ({
     results = results.map((item) => {
       let tagsHTML = ''
       item.tags?.forEach((tag) => {
-        tagsHTML += `<span class="vis-network-title-tag">${tag.label}</span>`
+        tagsHTML += `<span class="vis-network-title-tag" style="background-color: ${tag.color ?? '#b4fdbd'}">${tag.label}</span>`
       })
       return {
         ...item,

diff --git a/app/transition/[slug]/page.tsx b/app/transition/[slug]/page.tsx
@@ -1,6 +1,6 @@
 import truncate from 'lodash/truncate'
 import Listing from '../../[subdomain]/[slug]/Listing'
-import { COLOR_MAPPING } from '../utils'
+import { CATEGORY_COLOR_MAPPING, TAG_COLOR_MAPPING } from '../utils'
 import { generateSlug } from '@helpers/utils'
 
 export default async function TransitionListingPage({ params }) {
@@ -75,6 +75,7 @@ async function getListing({ listingSlug }): Promise<any> {
       itemTags.push({
         id: tagId,
         label: tagLabel,
+        color: TAG_COLOR_MAPPING[tagLabel],
       })
     })
 
@@ -89,12 +90,12 @@ async function getListing({ listingSlug }): Promise<any> {
       instagram: item.contact.instagram,
       twitter: item.contact.twitter,
       category: {
-        color: COLOR_MAPPING[categoryLabel],
+        color: CATEGORY_COLOR_MAPPING[categoryLabel],
         label: categoryLabel,
       },
       tags: itemTags,
       label: item.title,
-      color: COLOR_MAPPING[categoryLabel],
+      color: CATEGORY_COLOR_MAPPING[categoryLabel],
     }
   })
 

diff --git a/app/transition/page.tsx b/app/transition/page.tsx
@@ -6,7 +6,7 @@ import {
 } from '@tanstack/react-query'
 import { generateSlug } from '@helpers/utils'
 import Web, { CENTRAL_NODE_ID } from '../[subdomain]/Web'
-import { COLOR_MAPPING } from './utils'
+import { CATEGORY_COLOR_MAPPING, TAG_COLOR_MAPPING } from './utils'
 
 export const metadata = {
   title: 'Transition UK',
@@ -71,7 +71,7 @@ async function getData() {
     if (!categories.some((c) => c.label === categoryLabel)) {
       categories.push({
         label: categoryLabel,
-        color: COLOR_MAPPING[categoryLabel].substring(1),
+        color: CATEGORY_COLOR_MAPPING[categoryLabel].substring(1),
       })
     }
 
@@ -82,14 +82,14 @@ async function getData() {
         tags.push({
           id: tagId,
           label: tagLabel,
-          // itemIds: [],
+          color: TAG_COLOR_MAPPING[tagLabel],
+          itemIds: [],
         })
       }
       // Add item ID to tag
       // tags.find((t) => t.label === tagLabel).itemIds.push(item.id)
 
       const newTag = tags.find((t) => t.label === tagLabel)
-
       itemTags.push(newTag)
     })
 
@@ -103,12 +103,12 @@ async function getData() {
       instagram: item.contact.instagram,
       twitter: item.contact.twitter,
       category: {
-        color: COLOR_MAPPING[categoryLabel],
+        color: CATEGORY_COLOR_MAPPING[categoryLabel],
         label: categoryLabel,
       },
       tags: itemTags,
       label: item.title.replace(/&amp;/g, '&'),
-      color: COLOR_MAPPING[categoryLabel],
+      color: CATEGORY_COLOR_MAPPING[categoryLabel],
     })
   })
 
@@ -142,8 +142,7 @@ async function getData() {
   //     id: tag.id,
   //     label: tag.label,
   //     color: '#c3c4c7',
-  //     isDescriptive: true, // set group instead
-  //     shape: 'ellipse',
+  //     group: 'category',
   //   })
 
   //   edges.push({

diff --git a/app/transition/utils.tsx b/app/transition/utils.tsx
@@ -1,4 +1,4 @@
-export const COLOR_MAPPING = {
+export const CATEGORY_COLOR_MAPPING = {
   'England: The North': '#cb6ce6',
   'England: Midlands': '#c6079c',
   'England: South West': '#d0d07b',
@@ -7,3 +7,23 @@ export const COLOR_MAPPING = {
   'England: London & SE': '#2cb868',
   'United Kingdom': '#737373',
 }
+
+export const TAG_COLOR_MAPPING = {
+  'Transition Group': '#737373',
+  'Community Growing': '#2cb868',
+  'Other food projects': '#ff5757',
+  Nature: '#09622f',
+  'Community hub or activities': '#d0d07b',
+  'Festivals, fairs or events': '#005EB8',
+  'Art / creativity': '#c6079c',
+  'Community visioning / imagination work': '#cb6ce6',
+  'Building local networks': '#ff5757',
+  'Local economy or new economy projects': '#2cb868',
+  'Wellbeing or Inner Transition': '#c77dbd',
+  'Social Justice / Just Transition activities': '#fc0f03',
+  'Youth or education projects': '#02b3c7',
+  'Share, Repair or reuse': '#4d23cc',
+  Energy: '#c7c702',
+  Transport: '#968a95',
+  Other: '#ebe6ea',
+}
diff --git a/components/listing/Listing.tsx b/components/listing/Listing.tsx
@@ -212,11 +212,11 @@ function Listing({ listing }) {
                   href={`${PROTOCOL}://${subdomain}.${REMOTE_HOSTNAME}?tags=${urlEncodedTag}`}
                 >
                   <Tag
-                    backgroundColor="gray.200"
+                    backgroundColor={tag.color ?? 'gray.300'}
                     userSelect="none"
                     cursor="pointer"
-                    transition="background-color 0.2s ease"
-                    _hover={{ bgColor: 'gray.300' }}
+                    transition="opacity 0.2s ease"
+                    _hover={{ opacity: 0.9 }}
                   >
                     #{tag.label}
                   </Tag>

diff --git a/components/main-list/dialog/Dialog.tsx b/components/main-list/dialog/Dialog.tsx
@@ -1,5 +1,6 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import NextLink from 'next/link'
+import { useSearchParams } from 'next/navigation'
 import {
   Modal,
   ModalOverlay,
@@ -142,6 +143,9 @@ const Dialog = ({
     return `//${item.website}`
   }, [item.website])
 
+  const searchParams = useSearchParams()
+  const webSearchParam = searchParams.get('web')
+
   return (
     <Modal
       isCentered
@@ -229,11 +233,24 @@ const Dialog = ({
             flexWrap="wrap"
             gap="0.25rem"
           >
-            {item.tags?.map((tag) => (
-              <Tag backgroundColor="gray.300" userSelect="none" key={tag.id}>
-                #{tag.label}
-              </Tag>
-            ))}
+            {item.tags?.map((tag) => {
+              const urlEncodedTag = tag.label.replace(' ', '+')
+              return (
+                <NextLink
+                  key={tag.id}
+                  href={`${PROTOCOL}://${subdomain}.${REMOTE_HOSTNAME}?web=${webSearchParam}&tags=${urlEncodedTag}`}
+                  onClick={onClose}
+                >
+                  <Tag
+                    backgroundColor={tag.color ?? 'gray.300'}
+                    userSelect="none"
+                    _hover={{ opacity: 0.8 }}
+                  >
+                    #{tag.label}
+                  </Tag>
+                </NextLink>
+              )
+            })}
           </Box>
         </ModalBody>
 

diff --git a/components/network/Network.tsx b/components/network/Network.tsx
@@ -52,7 +52,7 @@ const options = {
   physics: {
     forceAtlas2Based: {
       springLength: 100,
-      damping: 1.3,
+      damping: 1,
       gravitationalConstant: -130,
     },
     minVelocity: 0.85,