diff --git a/src/components/App/SideBar/index.tsx b/src/components/App/SideBar/index.tsx index 66d56479f..5f784008a 100644 --- 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(({ 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(({ onSubmit, subViewOpen const [isScrolled, setIsScrolled] = useState(false) const [isFilterOpen, setIsFilterOpen] = useState(false) const [anchorEl, setAnchorEl] = useState(null) - const [schemaAll, setSchemaAll] = useState([]) const [selectedTypes, setSelectedTypes] = useState([]) const [showAllSchemas, setShowAllSchemas] = useState(false) @@ -95,7 +96,7 @@ const Content = forwardRef(({ onSubmit, subViewOpen } fetchSchemaData() - }, []) + }, [setSchemaAll]) const handleFilterIconClick = (event: React.MouseEvent) => { if (isFilterOpen) { diff --git a/src/components/Universe/Graph/Cubes/Text/index.tsx b/src/components/Universe/Graph/Cubes/Text/index.tsx index b1b25faf4..a2cb4beae 100644 --- 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 index 3b0aa98f7..a127a148e 100644 --- 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,9 +15,11 @@ type BadgeProps = { export const TypeBadge = ({ type }: Props) => { let badgeProps: Omit - + const [getPrimaryColorByType] = useSchemaStore((s) => [s.getPrimaryColorByType]) const nodeType = type.toLowerCase() + const primaryColor = getPrimaryColorByType(type) + switch (nodeType) { case 'video': case 'twitter_space': @@ -24,7 +27,7 @@ export const TypeBadge = ({ type }: Props) => { case 'clip': badgeProps = { iconStart: 'video_badge.svg', - color: colors.CLIP, + color: primaryColor ?? colors.CLIP, } break @@ -32,7 +35,7 @@ export const TypeBadge = ({ type }: Props) => { case 'show': badgeProps = { iconStart: 'show_badge.svg', - color: colors.SHOW, + color: primaryColor ?? colors.SHOW, } break @@ -40,7 +43,7 @@ export const TypeBadge = ({ type }: Props) => { case 'tweet': badgeProps = { iconStart: 'twitter_badge.svg', - color: colors.TWEET, + color: primaryColor ?? colors.TWEET, } break @@ -48,7 +51,7 @@ export const TypeBadge = ({ type }: Props) => { case 'episode': badgeProps = { iconStart: 'audio_badge.svg', - color: colors.EPISODE, + color: primaryColor ?? colors.EPISODE, } break @@ -56,7 +59,7 @@ export const TypeBadge = ({ type }: Props) => { case 'document': badgeProps = { iconStart: 'notes_badge.svg', - color: colors.TEXT, + color: primaryColor ?? colors.TEXT, } break @@ -64,7 +67,7 @@ export const TypeBadge = ({ type }: Props) => { case 'organization': badgeProps = { iconStart: 'organization_badge.svg', - color: colors.ORGANIZATION, + color: primaryColor ?? colors.ORGANIZATION, } break @@ -74,7 +77,7 @@ export const TypeBadge = ({ type }: Props) => { case 'host': badgeProps = { iconStart: 'person_badge.svg', - color: colors.PERSON, + color: primaryColor ?? colors.PERSON, } break @@ -82,7 +85,7 @@ export const TypeBadge = ({ type }: Props) => { case 'event': badgeProps = { iconStart: 'event_badge.svg', - color: colors.EVENT, + color: primaryColor ?? colors.EVENT, } break @@ -90,7 +93,7 @@ export const TypeBadge = ({ type }: Props) => { case 'topic': badgeProps = { iconStart: 'topic_badge.svg', - color: colors.TOPIC, + color: primaryColor ?? colors.TOPIC, } break @@ -98,7 +101,7 @@ export const TypeBadge = ({ type }: Props) => { 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 index 40c4e3389..f44c2035c 100644 --- 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 index 9e2c8e207..68642af9c 100644 --- a/src/stores/useSchemaStore/index.ts +++ b/src/stores/useSchemaStore/index.ts @@ -7,14 +7,15 @@ type SchemasStore = { links: SchemaLink[] setSchemas: (schema: SchemaExtended[]) => void setSchemaLinks: (schema: SchemaLink[]) => void + getPrimaryColorByType: (type: string) => string | undefined } -const defaultData: Omit = { +const defaultData: Omit = { schemas: [], links: [], } -export const useSchemaStore = create((set) => ({ +export const useSchemaStore = create((set, get) => ({ ...defaultData, setSchemas: (schemas: SchemaExtended[]) => { set({ schemas: schemas.map((i) => ({ ...i, ref_id: i?.attributes?.ref_id || '' })) }) @@ -22,4 +23,9 @@ export const useSchemaStore = create((set) => ({ setSchemaLinks: (links: SchemaLink[]) => { set({ links }) }, + getPrimaryColorByType: (type: string) => { + const schema = get().schemas.find((schem) => schem.type === type) + + return schema ? schema.primary_color : undefined + }, }))