Merge pull request #2344 from MahtabBukhari/Render_shape_and_label_co…

…lor_based_on_schema_primary_color Render shape and label color based on schema primary_color
stakwork · Oct 16, 2024 · 1936141 · 1936141
2 parents 79b6f82 + 6833a1a
commit 1936141
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Graph/Nodes/Node/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Graph/Nodes/Node/index.tsx
@@ -8,6 +8,7 @@ import { SchemaExtended } from '~/components/ModalsContainer/BlueprintModal/type
 import { fontProps } from '~/components/Universe/Graph/Cubes/Text/constants'
 import { truncateText } from '~/utils/truncateText'
 import { NODE_RADIUS } from '../../constants'
+import { useSchemaStore } from '~/stores/useSchemaStore'
 
 export const NODE_TYPE_COLORS = ['#ff13c9', '#5af0ff', '#3233ff', '#c2f0c2', '#ff6666', '#99ccff', '#ffb3b3']
 
@@ -40,6 +41,7 @@ export const boxGeometry = new BoxGeometry(2, 2, 2)
 
 export const Node = memo(({ node, setSelectedNode, onSimulationUpdate, isSelected }: Props) => {
   const meshRef = useRef<Mesh | null>(null)
+  const [normalizedSchemasByType] = useSchemaStore((s) => [s.normalizedSchemasByType])
   const [showTooltip, setShowTooltip] = useState(false)
 
   console.log(isSelected)
@@ -89,7 +91,9 @@ export const Node = memo(({ node, setSelectedNode, onSimulationUpdate, isSelecte
     }
   })
 
-  const color = NODE_TYPE_COLORS[node?.children?.length] || 'red'
+  const primaryColor = normalizedSchemasByType[node.type]?.primary_color
+
+  const color = primaryColor ?? (NODE_TYPE_COLORS[node?.children?.length] || 'red')
 
   const handleClick = (e: { stopPropagation: () => void }) => {
     e.stopPropagation()

diff --git a/src/components/common/TypeBadge/index.tsx b/src/components/common/TypeBadge/index.tsx
@@ -15,58 +15,61 @@ type BadgeProps = {
 
 export const TypeBadge = ({ type }: Props) => {
   let badgeProps: Omit<BadgeProps, 'label'>
-  const [getPrimaryColorByType] = useSchemaStore((s) => [s.getPrimaryColorByType])
+  const [normalizedSchemasByType] = useSchemaStore((s) => [s.normalizedSchemasByType])
   const nodeType = type.toLowerCase()
 
-  const primaryColor = getPrimaryColorByType(type)
+  const primaryColor = normalizedSchemasByType[type]?.primary_color
+  const primaryIcon = normalizedSchemasByType[type]?.icon
+
+  const icon = primaryIcon ? `svg-icons/${primaryIcon}.svg` : null
 
   switch (nodeType) {
     case 'video':
     case 'twitter_space':
     case 'podcast':
     case 'clip':
       badgeProps = {
-        iconStart: 'video_badge.svg',
+        iconStart: icon ?? 'video_badge.svg',
         color: primaryColor ?? colors.CLIP,
       }
 
       break
 
     case 'show':
       badgeProps = {
-        iconStart: 'show_badge.svg',
+        iconStart: icon ?? 'show_badge.svg',
         color: primaryColor ?? colors.SHOW,
       }
 
       break
 
     case 'tweet':
       badgeProps = {
-        iconStart: 'twitter_badge.svg',
+        iconStart: icon ?? 'twitter_badge.svg',
         color: primaryColor ?? colors.TWEET,
       }
 
       break
 
     case 'episode':
       badgeProps = {
-        iconStart: 'audio_badge.svg',
+        iconStart: icon ?? 'audio_badge.svg',
         color: primaryColor ?? colors.EPISODE,
       }
 
       break
 
     case 'document':
       badgeProps = {
-        iconStart: 'notes_badge.svg',
+        iconStart: icon ?? 'notes_badge.svg',
         color: primaryColor ?? colors.TEXT,
       }
 
       break
 
-    case 'organization':
+    case primaryIcon ?? 'organization':
       badgeProps = {
-        iconStart: 'organization_badge.svg',
+        iconStart: icon ?? 'organization_badge.svg',
         color: primaryColor ?? colors.ORGANIZATION,
       }
 
@@ -76,31 +79,31 @@ export const TypeBadge = ({ type }: Props) => {
     case 'guest':
     case 'host':
       badgeProps = {
-        iconStart: 'person_badge.svg',
+        iconStart: icon ?? 'person_badge.svg',
         color: primaryColor ?? colors.PERSON,
       }
 
       break
 
     case 'event':
       badgeProps = {
-        iconStart: 'event_badge.svg',
+        iconStart: icon ?? 'event_badge.svg',
         color: primaryColor ?? colors.EVENT,
       }
 
       break
 
     case 'topic':
       badgeProps = {
-        iconStart: 'topic_badge.svg',
+        iconStart: icon ?? 'topic_badge.svg',
         color: primaryColor ?? colors.TOPIC,
       }
 
       break
 
     default:
       badgeProps = {
-        iconStart: 'thing_badge.svg',
+        iconStart: icon ?? 'thing_badge.svg',
         color: primaryColor ?? colors.THING,
       }