Prevent dark flash of graph when using light mode

Author: craquet

src/components/FairDOElasticSearch.tsx

@@ -48,7 +48,7 @@ export function FairDOElasticSearch({
     facetOptionView?: ComponentType<OptionViewProps>
 
     /**
-     * Set to true to enable dark mode. Alternatively, set class="dark" on your html or body element
+     * Set to true to enable dark mode
      */
     dark?: boolean
 }) {
@@ -74,7 +74,7 @@ export function FairDOElasticSearch({
         <SearchProvider config={elasticConfig}>
             <FairDOSearchProvider config={rawConfig}>
                 <TooltipProvider>
-                    <GlobalModalProvider resultView={actualResultView}>
+                    <GlobalModalProvider resultView={actualResultView} dark={dark}>
                         <WithSearch
                             mapContextToProps={({ wasSearched, isLoading }: SearchContextState) => ({
                                 wasSearched,

src/components/GlobalModalProvider.tsx

@@ -9,7 +9,7 @@ import { ResultViewProps } from "@elastic/react-search-ui-views"
 import { GraphNode } from "@/components/graph/GraphNode"
 import { RelationsGraphOptions } from "@/components/graph/RelationsGraphOptions"
 
-export function GlobalModalProvider(props: PropsWithChildren<{ resultView: ComponentType<ResultViewProps> }>) {
+export function GlobalModalProvider(props: PropsWithChildren<{ resultView: ComponentType<ResultViewProps>; dark?: boolean }>) {
     const [relationGraphState, setRelationGraphState] = useState<{
         nodes: GraphNode[]
         options: RelationsGraphOptions
@@ -41,6 +41,7 @@ export function GlobalModalProvider(props: PropsWithChildren<{ resultView: Compo
                     onOpenChange={onRelationGraphOpenChange}
                     resultView={props.resultView}
                     options={relationGraphState.options}
+                    dark={props.dark}
                 />
 
                 {props.children}

src/components/graph/RelationsGraph.tsx

@@ -23,8 +23,13 @@ import { RelationsGraphOptions } from "@/components/graph/RelationsGraphOptions"
 /**
  * Renders an interactive graph for the specified results. Results will be fetched from cache via PID. Currently intended for internal use only.
  */
-export function RelationsGraph(props: { nodes: GraphNode[]; options?: RelationsGraphOptions; resultView: ComponentType<ResultViewProps> }) {
-    const [colorMode, setColorMode] = useState<ColorMode>("system")
+export function RelationsGraph(props: {
+    nodes: GraphNode[]
+    options?: RelationsGraphOptions
+    resultView: ComponentType<ResultViewProps>
+    dark?: boolean
+}) {
+    const [colorMode, setColorMode] = useState<ColorMode>(props.dark ? "dark" : "light")
 
     useEffect(() => {
         const dark = document.querySelector("html")?.classList.contains("dark")

src/components/graph/RelationsGraphModal.tsx

@@ -14,13 +14,15 @@ export function RelationsGraphModal({
     onOpenChange,
     nodes,
     resultView,
-    options
+    options,
+    dark
 }: {
     isOpen: boolean
     onOpenChange: (val: boolean) => void
     nodes: GraphNode[]
     options?: RelationsGraphOptions
     resultView: ComponentType<ResultViewProps>
+    dark?: boolean
 }) {
     const searchContext = useContext(FairDOSearchContext)
 
@@ -48,7 +50,7 @@ export function RelationsGraphModal({
                         config: searchContext.config
                     }}
                 >
-                    <RelationsGraph nodes={nodes} resultView={resultView} options={options} />
+                    <RelationsGraph nodes={nodes} resultView={resultView} options={options} dark={dark} />
                 </FairDOSearchContext.Provider>
 
                 <div className="rfs-absolute rfs-right-4 rfs-top-4">

src/components/search/DefaultSorting.tsx

@@ -60,8 +60,6 @@ export function DefaultSorting() {
         return () => search.driver.unsubscribeToStateChanges(handler)
     }, [makeKey, search.driver])
 
-    console.log("haha")
-
     if (!config.sortOptions || config.sortOptions.length === 0) return null
 
     return (