Merge pull request #1782 from MahtabBukhari/Generic_Nodes_should_rend…

…er_color_based_on_schema Generic nodes should render color based on schema
stakwork · Jul 12, 2024 · 4957193 · 4957193
2 parents 918fcc8 + 539f085
commit 4957193
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 17 deletions.
diff --git a/src/components/App/SideBar/index.tsx b/src/components/App/SideBar/index.tsx
@@ -12,7 +12,6 @@ import ClearIcon from '~/components/Icons/ClearIcon'
 import SearchFilterCloseIcon from '~/components/Icons/SearchFilterCloseIcon'
 import SearchFilterIcon from '~/components/Icons/SearchFilterIcon'
 import SearchIcon from '~/components/Icons/SearchIcon'
-import { SchemaExtended } from '~/components/ModalsContainer/BlueprintModal/types'
 import { SearchBar } from '~/components/SearchBar'
 import { Flex } from '~/components/common/Flex'
 import { FetchLoaderText } from '~/components/common/Loader'
@@ -30,6 +29,7 @@ import { EpisodeSkeleton } from './Relevance/EpisodeSkeleton'
 import { SideBarSubView } from './SidebarSubView'
 import { Tab } from './Tab'
 import { Trending } from './Trending'
+import { useSchemaStore } from '~/stores/useSchemaStore'
 
 export const MENU_WIDTH = 390
 
@@ -45,6 +45,8 @@ type ContentProp = {
 // eslint-disable-next-line react/display-name
 const Content = forwardRef<HTMLDivElement, ContentProp>(({ onSubmit, subViewOpen }, ref) => {
   const { isFetching: isLoading, setSidebarFilter, setFilters } = useDataStore((s) => s)
+  const [schemaAll, setSchemaAll] = useSchemaStore((s) => [s.schemas, s.setSchemas])
+
   const { aiSummaryAnswers } = useAiSummaryStore((s) => s)
   const setSelectedNode = useUpdateSelectedNode()
 
@@ -59,7 +61,6 @@ const Content = forwardRef<HTMLDivElement, ContentProp>(({ onSubmit, subViewOpen
   const [isScrolled, setIsScrolled] = useState(false)
   const [isFilterOpen, setIsFilterOpen] = useState(false)
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const [schemaAll, setSchemaAll] = useState<SchemaExtended[]>([])
   const [selectedTypes, setSelectedTypes] = useState<string[]>([])
   const [showAllSchemas, setShowAllSchemas] = useState(false)
 
@@ -95,7 +96,7 @@ const Content = forwardRef<HTMLDivElement, ContentProp>(({ onSubmit, subViewOpen
     }
 
     fetchSchemaData()
-  }, [])
+  }, [setSchemaAll])
 
   const handleFilterIconClick = (event: React.MouseEvent<HTMLElement>) => {
     if (isFilterOpen) {

diff --git a/src/components/Universe/Graph/Cubes/Text/index.tsx b/src/components/Universe/Graph/Cubes/Text/index.tsx
@@ -8,6 +8,7 @@ import { NodeExtended } from '~/types'
 import { colors } from '~/utils/colors'
 import { truncateText } from '~/utils/truncateText'
 import { fontProps } from './constants'
+import { useSchemaStore } from '~/stores/useSchemaStore'
 
 const COLORS_MAP = [
   '#fff',
@@ -51,6 +52,8 @@ export const TextNode = memo(({ node, hide }: Props) => {
   const isRelative = selectedNodeRelativeIds.includes(node?.ref_id || '')
   const isSelected = !!selectedNode && selectedNode?.ref_id === node.ref_id
   const showSelectionGraph = useGraphStore((s) => s.showSelectionGraph)
+  const [getPrimaryColorByType] = useSchemaStore((s) => [s.getPrimaryColorByType])
+
   const nodeTypes = useNodeTypes()
 
   useFrame(({ camera }) => {
@@ -80,7 +83,9 @@ export const TextNode = memo(({ node, hide }: Props) => {
     return 1
   }, [isSelected, selectedNode])
 
-  const color = COLORS_MAP[nodeTypes.indexOf(node.node_type)] || colors.white
+  const primaryColor = getPrimaryColorByType(node.node_type)
+
+  const color = primaryColor ?? (COLORS_MAP[nodeTypes.indexOf(node.node_type)] || colors.white)
 
   return (
     <>

diff --git a/src/components/common/TypeBadge/index.tsx b/src/components/common/TypeBadge/index.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 import { colors } from '~/utils/colors'
 import { Flex } from '../Flex'
+import { useSchemaStore } from '~/stores/useSchemaStore'
 
 type Props = {
   type: string
@@ -14,57 +15,59 @@ type BadgeProps = {
 
 export const TypeBadge = ({ type }: Props) => {
   let badgeProps: Omit<BadgeProps, 'label'>
-
+  const [getPrimaryColorByType] = useSchemaStore((s) => [s.getPrimaryColorByType])
   const nodeType = type.toLowerCase()
 
+  const primaryColor = getPrimaryColorByType(type)
+
   switch (nodeType) {
     case 'video':
     case 'twitter_space':
     case 'podcast':
     case 'clip':
       badgeProps = {
         iconStart: 'video_badge.svg',
-        color: colors.CLIP,
+        color: primaryColor ?? colors.CLIP,
       }
 
       break
 
     case 'show':
       badgeProps = {
         iconStart: 'show_badge.svg',
-        color: colors.SHOW,
+        color: primaryColor ?? colors.SHOW,
       }
 
       break
 
     case 'tweet':
       badgeProps = {
         iconStart: 'twitter_badge.svg',
-        color: colors.TWEET,
+        color: primaryColor ?? colors.TWEET,
       }
 
       break
 
     case 'episode':
       badgeProps = {
         iconStart: 'audio_badge.svg',
-        color: colors.EPISODE,
+        color: primaryColor ?? colors.EPISODE,
       }
 
       break
 
     case 'document':
       badgeProps = {
         iconStart: 'notes_badge.svg',
-        color: colors.TEXT,
+        color: primaryColor ?? colors.TEXT,
       }
 
       break
 
     case 'organization':
       badgeProps = {
         iconStart: 'organization_badge.svg',
-        color: colors.ORGANIZATION,
+        color: primaryColor ?? colors.ORGANIZATION,
       }
 
       break
@@ -74,31 +77,31 @@ export const TypeBadge = ({ type }: Props) => {
     case 'host':
       badgeProps = {
         iconStart: 'person_badge.svg',
-        color: colors.PERSON,
+        color: primaryColor ?? colors.PERSON,
       }
 
       break
 
     case 'event':
       badgeProps = {
         iconStart: 'event_badge.svg',
-        color: colors.EVENT,
+        color: primaryColor ?? colors.EVENT,
       }
 
       break
 
     case 'topic':
       badgeProps = {
         iconStart: 'topic_badge.svg',
-        color: colors.TOPIC,
+        color: primaryColor ?? colors.TOPIC,
       }
 
       break
 
     default:
       badgeProps = {
         iconStart: 'thing_badge.svg',
-        color: colors.THING,
+        color: primaryColor ?? colors.THING,
       }
 
       break

diff --git a/src/network/fetchSourcesData/index.ts b/src/network/fetchSourcesData/index.ts
@@ -135,6 +135,7 @@ export interface Schema {
   search_term?: string
   is_deleted?: boolean
   children?: string[]
+  primary_color?: string
   attributes?: { [key: string]: string }
 }
 

diff --git a/src/stores/useSchemaStore/index.ts b/src/stores/useSchemaStore/index.ts
@@ -7,19 +7,25 @@ type SchemasStore = {
   links: SchemaLink[]
   setSchemas: (schema: SchemaExtended[]) => void
   setSchemaLinks: (schema: SchemaLink[]) => void
+  getPrimaryColorByType: (type: string) => string | undefined
 }
 
-const defaultData: Omit<SchemasStore, 'setSchemas' | 'setSchemaLinks'> = {
+const defaultData: Omit<SchemasStore, 'setSchemas' | 'setSchemaLinks' | 'getPrimaryColorByType'> = {
   schemas: [],
   links: [],
 }
 
-export const useSchemaStore = create<SchemasStore>((set) => ({
+export const useSchemaStore = create<SchemasStore>((set, get) => ({
   ...defaultData,
   setSchemas: (schemas: SchemaExtended[]) => {
     set({ schemas: schemas.map((i) => ({ ...i, ref_id: i?.attributes?.ref_id || '' })) })
   },
   setSchemaLinks: (links: SchemaLink[]) => {
     set({ links })
   },
+  getPrimaryColorByType: (type: string) => {
+    const schema = get().schemas.find((schem) => schem.type === type)
+
+    return schema ? schema.primary_color : undefined
+  },
 }))