From 2ffc191d15b9e7ce77992883eff79a66a2e52ca6 Mon Sep 17 00:00:00 2001
From: Sylvain Lesage <severo@rednegra.net>
Date: Thu, 27 Mar 2025 15:24:05 +0100
Subject: [PATCH 1/2] Use a global Config context instead of passing props
 along all the components

---
 src/components/App.tsx                      | 24 +++++----
 src/components/Breadcrumb.tsx               | 10 ++--
 src/components/Cell.tsx                     |  9 ++--
 src/components/File.tsx                     | 13 ++---
 src/components/Folder.tsx                   | 14 ++---
 src/components/Page.tsx                     | 12 ++---
 src/components/index.ts                     | 11 ++--
 src/components/viewers/ParquetView.tsx      | 23 +++-----
 src/components/viewers/SlidePanel.tsx       | 18 ++-----
 src/components/viewers/Viewer.tsx           | 21 ++------
 src/components/viewers/index.ts             |  7 ++-
 src/hooks/useConfig.ts                      | 60 +++++++++++++++++++++
 src/index.ts                                |  2 +
 src/lib/index.ts                            |  1 -
 src/lib/routes.ts                           |  7 ---
 test/components/File.test.tsx               | 13 +++--
 test/components/Folder.test.tsx             | 14 +++--
 test/components/viewers/SlidePanel.test.tsx | 42 ++++++++-------
 18 files changed, 166 insertions(+), 135 deletions(-)
 create mode 100644 src/hooks/useConfig.ts

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 286371e4..3ddef9bc 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+import { Config, ConfigProvider } from '../hooks/useConfig.js'
 import { getHttpSource } from '../lib/sources/httpSource.js'
 import { getHyperparamSource } from '../lib/sources/hyperparamSource.js'
 import Page from './Page.js'
@@ -10,20 +12,20 @@ export default function App() {
 
   const source = getHttpSource(sourceId) ?? getHyperparamSource(sourceId, { endpoint: location.origin })
 
+  // Use memo to avoid creating a new object on each render
+  const config: Config = useMemo(() => ({
+    routes: {
+      getSourceRouteUrl: ({ sourceId }) => `/files?key=${sourceId}`,
+      getCellRouteUrl: ({ sourceId, col, row }) => `/files?key=${sourceId}&col=${col}&row=${row}`,
+    },
+  }), [])
+
   if (!source) {
     return <div>Could not load a data source. You have to pass a valid source in the url.</div>
   }
   return (
-    <Page
-      source={source}
-      navigation={{ row, col }}
-      config={{
-        slidePanel: {},
-        routes: {
-          getSourceRouteUrl: ({ sourceId }) => `/files?key=${sourceId}`,
-          getCellRouteUrl: ({ sourceId, col, row }) => `/files?key=${sourceId}&col=${col}&row=${row}`,
-        },
-      }}
-    />
+    <ConfigProvider value={config}>
+      <Page source={source} navigation={{ row, col }} />
+    </ConfigProvider>
   )
 }
diff --git a/src/components/Breadcrumb.tsx b/src/components/Breadcrumb.tsx
index 4702c7c0..9f264788 100644
--- a/src/components/Breadcrumb.tsx
+++ b/src/components/Breadcrumb.tsx
@@ -1,22 +1,22 @@
 import type { ReactNode } from 'react'
-import type { RoutesConfig } from '../lib/routes.js'
+import { useConfig } from '../hooks/useConfig.js'
 import type { Source } from '../lib/sources/types.js'
 
-export type BreadcrumbConfig = RoutesConfig
 interface BreadcrumbProps {
   source: Source,
-  config?: BreadcrumbConfig
   children?: ReactNode
 }
 
 /**
  * Breadcrumb navigation
  */
-export default function Breadcrumb({ source, config, children }: BreadcrumbProps) {
+export default function Breadcrumb({ source, children }: BreadcrumbProps) {
+  const { routes } = useConfig()
+
   return <nav className='top-header top-header-divided'>
     <div className='path'>
       {source.sourceParts.map((part, depth) =>
-        <a href={config?.routes?.getSourceRouteUrl?.({ sourceId: part.sourceId }) ?? ''} key={depth}>{part.text}</a>
+        <a href={routes?.getSourceRouteUrl?.({ sourceId: part.sourceId }) ?? ''} key={depth}>{part.text}</a>
       )}
     </div>
     {children}
diff --git a/src/components/Cell.tsx b/src/components/Cell.tsx
index 08b4de99..bb2090ae 100644
--- a/src/components/Cell.tsx
+++ b/src/components/Cell.tsx
@@ -3,22 +3,19 @@ import { asyncBufferFromUrl, parquetMetadataAsync } from 'hyparquet'
 import { useEffect, useState } from 'react'
 import type { FileSource } from '../lib/sources/types.js'
 import { parquetDataFrame } from '../lib/tableProvider.js'
-import Breadcrumb, { BreadcrumbConfig } from './Breadcrumb.js'
+import Breadcrumb from './Breadcrumb.js'
 import Layout from './Layout.js'
 
-export type CellConfig = BreadcrumbConfig
-
 interface CellProps {
   source: FileSource;
   row: number;
   col: number;
-  config?: CellConfig
 }
 
 /**
  * Cell viewer displays a single cell from a table.
  */
-export default function CellView({ source, row, col, config }: CellProps) {
+export default function CellView({ source, row, col }: CellProps) {
   const [text, setText] = useState<string | undefined>()
   const [progress, setProgress] = useState<number>()
   const [error, setError] = useState<Error>()
@@ -69,7 +66,7 @@ export default function CellView({ source, row, col, config }: CellProps) {
 
   return (
     <Layout progress={progress} error={error} title={fileName}>
-      <Breadcrumb source={source} config={config} />
+      <Breadcrumb source={source} />
 
       {/* <Highlight text={text || ''} /> */}
       <pre className="viewer text">{text}</pre>
diff --git a/src/components/File.tsx b/src/components/File.tsx
index 1bf222f5..39f7039a 100644
--- a/src/components/File.tsx
+++ b/src/components/File.tsx
@@ -1,25 +1,22 @@
 import { useState } from 'react'
 import type { FileSource } from '../lib/sources/types.js'
-import Breadcrumb, { BreadcrumbConfig } from './Breadcrumb.js'
+import Breadcrumb from './Breadcrumb.js'
 import Layout from './Layout.js'
-import Viewer, { ViewerConfig } from './viewers/Viewer.js'
-
-export type FileConfig = ViewerConfig & BreadcrumbConfig
+import Viewer from './viewers/Viewer.js'
 
 interface FileProps {
   source: FileSource
-  config?: FileConfig
 }
 
 /**
  * File viewer page
  */
-export default function File({ source, config }: FileProps) {
+export default function File({ source }: FileProps) {
   const [progress, setProgress] = useState<number>()
   const [error, setError] = useState<Error>()
 
   return <Layout progress={progress} error={error} title={source.fileName}>
-    <Breadcrumb source={source} config={config} />
-    <Viewer source={source} setProgress={setProgress} setError={setError} config={config} />
+    <Breadcrumb source={source} />
+    <Viewer source={source} setProgress={setProgress} setError={setError} />
   </Layout>
 }
diff --git a/src/components/Folder.tsx b/src/components/Folder.tsx
index 138fbe45..2955dac2 100644
--- a/src/components/Folder.tsx
+++ b/src/components/Folder.tsx
@@ -1,20 +1,18 @@
 import { useEffect, useRef, useState } from 'react'
+import { useConfig } from '../hooks/useConfig.js'
 import type { DirSource, FileMetadata } from '../lib/sources/types.js'
 import { cn, formatFileSize, getFileDate, getFileDateShort } from '../lib/utils.js'
-import Breadcrumb, { BreadcrumbConfig } from './Breadcrumb.js'
+import Breadcrumb from './Breadcrumb.js'
 import Layout, { Spinner } from './Layout.js'
 
-export type FolderConfig = BreadcrumbConfig
-
 interface FolderProps {
   source: DirSource
-  config?: FolderConfig
 }
 
 /**
  * Folder browser page
  */
-export default function Folder({ source, config }: FolderProps) {
+export default function Folder({ source }: FolderProps) {
   // State to hold file listing
   const [files, setFiles] = useState<FileMetadata[]>()
   const [error, setError] = useState<Error>()
@@ -22,6 +20,8 @@ export default function Folder({ source, config }: FolderProps) {
   const searchRef = useRef<HTMLInputElement>(null)
   const listRef = useRef<HTMLUListElement>(null)
 
+  const { routes } = useConfig()
+
   // Fetch files on component mount
   useEffect(() => {
     source.listFiles()
@@ -83,7 +83,7 @@ export default function Folder({ source, config }: FolderProps) {
   }, [])
 
   return <Layout error={error} title={source.prefix}>
-    <Breadcrumb source={source} config={config}>
+    <Breadcrumb source={source}>
       <div className='top-actions'>
         <input autoFocus className='search' placeholder='Search...' ref={searchRef} />
       </div>
@@ -92,7 +92,7 @@ export default function Folder({ source, config }: FolderProps) {
     {files && files.length > 0 && <ul className='file-list' ref={listRef}>
       {filtered?.map((file, index) =>
         <li key={index}>
-          <a href={config?.routes?.getSourceRouteUrl?.({ sourceId: file.sourceId }) ?? location.href}>
+          <a href={routes?.getSourceRouteUrl?.({ sourceId: file.sourceId }) ?? location.href}>
             <span className={cn('file-name', 'file', file.kind === 'directory' && 'folder')}>
               {file.name}
             </span>
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index 10d79a90..13bc8cc8 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -1,9 +1,8 @@
 import { Source } from '../lib/sources/types.js'
 import Cell from './Cell.js'
-import File, { FileConfig } from './File.js'
+import File from './File.js'
 import Folder from './Folder.js'
 
-export type PageConfig = FileConfig
 export interface Navigation {
   col?: number
   row?: number
@@ -12,18 +11,17 @@ export interface Navigation {
 interface PageProps {
   source: Source,
   navigation?: Navigation,
-  config?: PageConfig
 }
 
-export default function Page({ source, navigation, config }: PageProps) {
+export default function Page({ source, navigation }: PageProps) {
   if (source.kind === 'directory') {
-    return <Folder source={source} config={config}/>
+    return <Folder source={source} />
   }
   if (navigation?.row !== undefined && navigation.col !== undefined) {
     // cell view
-    return <Cell source={source} row={navigation.row} col={navigation.col} config={config} />
+    return <Cell source={source} row={navigation.row} col={navigation.col} />
   } else {
     // file view
-    return <File source={source} config={config} />
+    return <File source={source} />
   }
 }
diff --git a/src/components/index.ts b/src/components/index.ts
index 3f56cd39..df244843 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,10 +1,9 @@
-import Breadcrumb, { BreadcrumbConfig } from './Breadcrumb.js'
-import Cell, { CellConfig } from './Cell.js'
-import File, { FileConfig } from './File.js'
-import Folder, { FolderConfig } from './Folder.js'
+import Breadcrumb from './Breadcrumb.js'
+import Cell from './Cell.js'
+import File from './File.js'
+import Folder from './Folder.js'
 import Layout, { ErrorBar, Spinner } from './Layout.js'
 import Markdown from './Markdown.js'
-import Page, { PageConfig } from './Page.js'
+import Page from './Page.js'
 export * from './viewers/index.js'
 export { Breadcrumb, Cell, ErrorBar, File, Folder, Layout, Markdown, Page, Spinner }
-export type { BreadcrumbConfig, CellConfig, FileConfig, FolderConfig, PageConfig }
diff --git a/src/components/viewers/ParquetView.tsx b/src/components/viewers/ParquetView.tsx
index b4541bff..16ba46b9 100644
--- a/src/components/viewers/ParquetView.tsx
+++ b/src/components/viewers/ParquetView.tsx
@@ -1,7 +1,8 @@
 import HighTable, { DataFrame, rowCache } from 'hightable'
 import { asyncBufferFromUrl, parquetMetadataAsync } from 'hyparquet'
 import React, { useCallback, useEffect, useState } from 'react'
-import { RoutesConfig, appendSearchParams } from '../../lib/routes.js'
+import { useConfig } from '../../hooks/useConfig.js'
+import { appendSearchParams } from '../../lib/routes.js'
 import { FileSource } from '../../lib/sources/types.js'
 import { parquetDataFrame } from '../../lib/tableProvider.js'
 import { cn } from '../../lib/utils.js'
@@ -9,20 +10,12 @@ import styles from '../../styles/ParquetView.module.css'
 import { Spinner } from '../Layout.js'
 import CellPanel from './CellPanel.js'
 import ContentHeader, { ContentSize } from './ContentHeader.js'
-import SlidePanel, { SlidePanelConfig } from './SlidePanel.js'
-
-interface HighTableConfig {
-  hightable?: {
-    className?: string;
-  }
-}
-export type ParquetViewConfig = SlidePanelConfig & RoutesConfig & HighTableConfig
+import SlidePanel from './SlidePanel.js'
 
 interface ViewerProps {
   source: FileSource
   setProgress: (progress: number | undefined) => void
   setError: (error: Error | undefined) => void
-  config?: ParquetViewConfig
 }
 
 interface Content extends ContentSize {
@@ -32,10 +25,11 @@ interface Content extends ContentSize {
 /**
  * Parquet file viewer
  */
-export default function ParquetView({ source, setProgress, setError, config }: ViewerProps) {
+export default function ParquetView({ source, setProgress, setError }: ViewerProps) {
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const [content, setContent] = useState<Content>()
   const [cell, setCell] = useState<{ row: number, col: number } | undefined>()
+  const { highTable, routes } = useConfig()
 
   useEffect(() => {
     async function loadParquetDataFrame() {
@@ -77,12 +71,12 @@ export default function ParquetView({ source, setProgress, setError, config }: V
 
   const { sourceId } = source
   const getCellRouteUrl = useCallback(({ col, row }: {col: number, row: number}) => {
-    const url = config?.routes?.getCellRouteUrl?.({ sourceId, col, row })
+    const url = routes?.getCellRouteUrl?.({ sourceId, col, row })
     if (url) {
       return url
     }
     return appendSearchParams({ col: col.toString(), row: row.toString() })
-  }, [config, sourceId])
+  }, [routes, sourceId])
 
   const onDoubleClickCell = useCallback((_event: React.MouseEvent, col: number, row: number) => {
     if (cell?.col === col && cell.row === row) {
@@ -108,7 +102,7 @@ export default function ParquetView({ source, setProgress, setError, config }: V
       onDoubleClickCell={onDoubleClickCell}
       onMouseDownCell={onMouseDownCell}
       onError={setError}
-      className={cn(styles.hightable, config?.hightable?.className)}
+      className={cn(styles.hightable, highTable?.className)}
     />}
 
     {isLoading && <div className='center'><Spinner /></div>}
@@ -132,7 +126,6 @@ export default function ParquetView({ source, setProgress, setError, config }: V
       isPanelOpen={!!(content?.dataframe && cell)}
       mainContent={mainContent}
       panelContent={panelContent}
-      config={config}
     />
   )
 }
diff --git a/src/components/viewers/SlidePanel.tsx b/src/components/viewers/SlidePanel.tsx
index 65659678..ee5140f8 100644
--- a/src/components/viewers/SlidePanel.tsx
+++ b/src/components/viewers/SlidePanel.tsx
@@ -1,17 +1,10 @@
 import React, { ReactNode, useCallback, useEffect, useState } from 'react'
-
-export interface SlidePanelConfig {
-  slidePanel?: {
-    minWidth?: number
-    defaultWidth?: number
-  }
-}
+import { useConfig } from '../../hooks/useConfig.js'
 
 interface SlidePanelProps {
   mainContent: ReactNode
   panelContent: ReactNode
   isPanelOpen: boolean
-  config?: SlidePanelConfig
 }
 
 const WIDTH = {
@@ -22,17 +15,16 @@ const WIDTH = {
 /**
  * Slide out panel component with resizing.
  */
-export default function SlidePanel({
-  mainContent, panelContent, isPanelOpen, config,
-}: SlidePanelProps) {
-  const minWidth = config?.slidePanel?.minWidth && config.slidePanel.minWidth > 0 ? config.slidePanel.minWidth : WIDTH.MIN
+export default function SlidePanel({ mainContent, panelContent, isPanelOpen }: SlidePanelProps) {
+  const { slidePanel } = useConfig()
+  const minWidth = slidePanel?.minWidth && slidePanel.minWidth > 0 ? slidePanel.minWidth : WIDTH.MIN
   function validWidth(width?: number): number | undefined {
     if (width && minWidth <= width) {
       return width
     }
     return undefined
   }
-  const defaultWidth = validWidth(config?.slidePanel?.defaultWidth) ?? WIDTH.DEFAULT
+  const defaultWidth = validWidth(slidePanel?.defaultWidth) ?? WIDTH.DEFAULT
   const [resizingClientX, setResizingClientX] = useState(-1)
   const panelRef = React.createRef<HTMLDivElement>()
 
diff --git a/src/components/viewers/Viewer.tsx b/src/components/viewers/Viewer.tsx
index 2442acfb..20f6bb4d 100644
--- a/src/components/viewers/Viewer.tsx
+++ b/src/components/viewers/Viewer.tsx
@@ -4,40 +4,25 @@ import AvroView from './AvroView.js'
 import ImageView from './ImageView.js'
 import JsonView from './JsonView.js'
 import MarkdownView from './MarkdownView.js'
-import TableView, { ParquetViewConfig } from './ParquetView.js'
+import TableView from './ParquetView.js'
 import TextView from './TextView.js'
 
-export type ViewerConfig = ParquetViewConfig
-
 interface ViewerProps {
   source: FileSource;
   setError: (error: Error | undefined) => void;
   setProgress: (progress: number | undefined) => void;
-  config?: ViewerConfig;
 }
 
 /**
  * Get a viewer for a file.
  * Chooses viewer based on content type.
  */
-export default function Viewer({
-  source,
-  setError,
-  setProgress,
-  config,
-}: ViewerProps) {
+export default function Viewer({ source, setError, setProgress }: ViewerProps) {
   const { fileName } = source
   if (fileName.endsWith('.md')) {
     return <MarkdownView source={source} setError={setError} />
   } else if (fileName.endsWith('.parquet')) {
-    return (
-      <TableView
-        source={source}
-        setError={setError}
-        setProgress={setProgress}
-        config={config}
-      />
-    )
+    return <TableView source={source} setError={setError} setProgress={setProgress} />
   } else if (fileName.endsWith('.json')) {
     return <JsonView source={source} setError={setError} />
   } else if (fileName.endsWith('.avro')) {
diff --git a/src/components/viewers/index.ts b/src/components/viewers/index.ts
index e44882e5..f3fcd2dc 100644
--- a/src/components/viewers/index.ts
+++ b/src/components/viewers/index.ts
@@ -1,9 +1,8 @@
 import ContentHeader from './ContentHeader.js'
 import ImageView from './ImageView.js'
 import MarkdownView from './MarkdownView.js'
-import ParquetView, { ParquetViewConfig } from './ParquetView.js'
-import SlidePanel, { SlidePanelConfig } from './SlidePanel.js'
+import ParquetView from './ParquetView.js'
+import SlidePanel from './SlidePanel.js'
 import TextView from './TextView.js'
-import Viewer, { ViewerConfig } from './Viewer.js'
+import Viewer from './Viewer.js'
 export { ContentHeader, ImageView, MarkdownView, ParquetView, SlidePanel, TextView, Viewer }
-export type { ParquetViewConfig, SlidePanelConfig, ViewerConfig }
diff --git a/src/hooks/useConfig.ts b/src/hooks/useConfig.ts
new file mode 100644
index 00000000..1d31559a
--- /dev/null
+++ b/src/hooks/useConfig.ts
@@ -0,0 +1,60 @@
+import { createContext, useContext } from 'react'
+
+/**
+ * Config is a flat object of key-value pairs.
+ *
+ * Each key is generally the dromedaryCase name of a component. The namespace is global.
+ *
+ * It gives a way to pass additional values to the components, for example custom CSS classes.
+ */
+export interface Config {
+  highTable?: {
+    className?: string;
+  }
+  routes?: {
+    getSourceRouteUrl?: (params: { sourceId: string }) => string
+    getCellRouteUrl?: (params: { sourceId: string, col: number, row: number }) => string
+  },
+  slidePanel?: {
+    minWidth?: number
+    defaultWidth?: number
+  }
+}
+
+const ConfigContext = createContext<Config>({})
+
+/**
+ * Use the ConfigProvider to pass the Config object to the components that need it.
+ *
+ * Tip: memoize the Config object to avoid creating a new object on each render.
+ *
+ * @example
+ * const config: Config = useMemo(() => ({
+ *  highTable: {
+ *   className: 'my-custom-class'
+ *  }
+ * }), [])
+ *
+ * return (
+ *   <ConfigProvider value={config}>
+ *     <MyComponent />
+ *   </ConfigProvider>
+ * )
+ */
+export const ConfigProvider = ConfigContext.Provider
+
+/**
+ * Use the useConfig hook to access the Config object in your components.
+ *
+ * @example
+ * const { slidePanel } = useConfig()
+ *
+ * return (
+ *   <div style={{ width: slidePanel?.defaultWidth }}>
+ *     <MyComponent />
+ *   </div>
+ * )
+ */
+export function useConfig() {
+  return useContext(ConfigContext)
+}
diff --git a/src/index.ts b/src/index.ts
index 5b5ea33d..cf64c965 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,2 +1,4 @@
 export * from './components/index.js'
+export { ConfigProvider } from './hooks/useConfig.js'
+export type { Config } from './hooks/useConfig.js'
 export * from './lib/index.js'
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 58cfe589..046303f9 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,5 +1,4 @@
 export { appendSearchParams, replaceSearchParams } from './routes.js'
-export type { RoutesConfig } from './routes.js'
 export * from './sources/index.js'
 export { parquetDataFrame } from './tableProvider.js'
 export { asyncBufferFrom, cn, contentTypes, formatFileSize, getFileDate, getFileDateShort, imageTypes, parseFileSize } from './utils.js'
diff --git a/src/lib/routes.ts b/src/lib/routes.ts
index 8d2da9ca..f57927f9 100644
--- a/src/lib/routes.ts
+++ b/src/lib/routes.ts
@@ -1,10 +1,3 @@
-export interface RoutesConfig {
-  routes?: {
-    getSourceRouteUrl?: (params: { sourceId: string }) => string
-    getCellRouteUrl?: (params: { sourceId: string, col: number, row: number }) => string
-  }
-}
-
 /**
  * Replace the search params in the current url.
  *
diff --git a/test/components/File.test.tsx b/test/components/File.test.tsx
index f606eeb6..297a2c62 100644
--- a/test/components/File.test.tsx
+++ b/test/components/File.test.tsx
@@ -2,11 +2,12 @@ import { render } from '@testing-library/react'
 import { strict as assert } from 'assert'
 import React, { act } from 'react'
 import { describe, expect, it, vi } from 'vitest'
-import { File, RoutesConfig, getHttpSource, getHyperparamSource } from '../../src/index.js'
+import { Config, ConfigProvider } from '../../src/hooks/useConfig.js'
+import { File, getHttpSource, getHyperparamSource } from '../../src/index.js'
 
 const endpoint = 'http://localhost:3000'
 
-const config: RoutesConfig = {
+const config: Config = {
   routes: {
     getSourceRouteUrl: ({ sourceId }) => `/files?key=${sourceId}`,
     getCellRouteUrl: ({ sourceId, col, row }) => `/files?key=${sourceId}&col=${col}&row=${row}`,
@@ -25,7 +26,9 @@ describe('File Component', () => {
     assert(source?.kind === 'file')
 
     const { getByText } = await act(() => render(
-      <File source={source} config={config}/>
+      <ConfigProvider value={config}>
+        <File source={source}/>
+      </ConfigProvider>
     ))
 
     expect(getByText('/')).toBeDefined()
@@ -51,7 +54,9 @@ describe('File Component', () => {
     assert(source?.kind === 'file')
 
     const { getAllByRole } = await act(() => render(
-      <File source={source} config={config} />
+      <ConfigProvider value={config}>
+        <File source={source} />
+      </ConfigProvider>
     ))
 
     const links = getAllByRole('link')
diff --git a/test/components/Folder.test.tsx b/test/components/Folder.test.tsx
index 241003c3..b7ab9ab7 100644
--- a/test/components/Folder.test.tsx
+++ b/test/components/Folder.test.tsx
@@ -2,7 +2,8 @@ import { fireEvent, render, waitFor } from '@testing-library/react'
 import { strict as assert } from 'assert'
 import React, { act } from 'react'
 import { describe, expect, it, test, vi } from 'vitest'
-import { DirSource, FileMetadata, Folder, HyperparamFileMetadata, RoutesConfig, getHyperparamSource } from '../../src/index.js'
+import { Config, ConfigProvider } from '../../src/hooks/useConfig.js'
+import { DirSource, FileMetadata, Folder, HyperparamFileMetadata, getHyperparamSource } from '../../src/index.js'
 
 const endpoint = 'http://localhost:3000'
 const mockFiles: HyperparamFileMetadata[] = [
@@ -10,7 +11,7 @@ const mockFiles: HyperparamFileMetadata[] = [
   { key: 'file1.txt', fileSize: 8196, lastModified: '2023-01-01T12:00:00Z' },
 ]
 
-const config: RoutesConfig = {
+const config: Config = {
   routes: {
     getSourceRouteUrl: ({ sourceId }) => `/files?key=${sourceId}`,
   },
@@ -31,7 +32,10 @@ describe('Folder Component', () => {
     const source = getHyperparamSource(path, { endpoint })
     assert(source?.kind === 'directory')
 
-    const { findByText, getByText } = render(<Folder source={source} config={config} />)
+    const { findByText, getByText } = render(
+      <ConfigProvider value={config}>
+        <Folder source={source} />
+      </ConfigProvider>)
 
     const folderLink = await findByText('folder1/')
     expect(folderLink.closest('a')?.getAttribute('href')).toBe(`/files?key=${path}folder1/`)
@@ -86,7 +90,9 @@ describe('Folder Component', () => {
     const source = getHyperparamSource('subdir1/subdir2/', { endpoint })
     assert(source?.kind === 'directory')
 
-    const { findByText, getByText } = render(<Folder source={source} config={config} />)
+    const { findByText, getByText } = render(<ConfigProvider value={config}>
+      <Folder source={source} />
+    </ConfigProvider>)
     await waitFor(() => { expect(fetch).toHaveBeenCalled() })
 
     const subdir1Link = await findByText('subdir1/')
diff --git a/test/components/viewers/SlidePanel.test.tsx b/test/components/viewers/SlidePanel.test.tsx
index d2f45dce..cbe9717a 100644
--- a/test/components/viewers/SlidePanel.test.tsx
+++ b/test/components/viewers/SlidePanel.test.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/non-nullable-type-assertion-style */
+import { act, fireEvent, render } from '@testing-library/react'
 import React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { act, fireEvent, render } from '@testing-library/react'
 import SlidePanel from '../../../src/components/viewers/SlidePanel.js'
+import { ConfigProvider } from '../../../src/hooks/useConfig.js'
 
 describe('SlidePanel', () => {
   // Minimal localStorage mock
@@ -87,12 +88,13 @@ describe('SlidePanel', () => {
 
   it('respects minWidth from config', () => {
     const { container } = render(
-      <SlidePanel
-        mainContent={<div>Main</div>}
-        panelContent={<div>Panel</div>}
-        isPanelOpen
-        config={{ slidePanel: { minWidth: 300 } }}
-      />
+      <ConfigProvider value={{ slidePanel: { minWidth: 300 } }}>
+        <SlidePanel
+          mainContent={<div>Main</div>}
+          panelContent={<div>Panel</div>}
+          isPanelOpen
+        />
+      </ConfigProvider>
     )
     const resizer = container.querySelector('.resizer') as HTMLElement
     const panel = container.querySelector('.slidePanel') as HTMLElement
@@ -150,12 +152,13 @@ describe('SlidePanel', () => {
 
   it('uses config defaultWidth if valid', () => {
     const { container } = render(
-      <SlidePanel
-        mainContent={<div>Main</div>}
-        panelContent={<div>Panel</div>}
-        isPanelOpen
-        config={{ slidePanel: { defaultWidth: 500 } }}
-      />
+      <ConfigProvider value={{ slidePanel: { defaultWidth: 500 } }}>
+        <SlidePanel
+          mainContent={<div>Main</div>}
+          panelContent={<div>Panel</div>}
+          isPanelOpen
+        />
+      </ConfigProvider>
     )
     const panel = container.querySelector('.slidePanel') as HTMLElement
     expect(panel.style.width).toBe('500px')
@@ -163,12 +166,13 @@ describe('SlidePanel', () => {
 
   it('ignores negative config.defaultWidth and uses 400 instead', () => {
     const { container } = render(
-      <SlidePanel
-        mainContent={<div>Main</div>}
-        panelContent={<div>Panel</div>}
-        isPanelOpen
-        config={{ slidePanel: { defaultWidth: -10 } }}
-      />
+      <ConfigProvider value={{ slidePanel: { defaultWidth: -10 } }}>
+        <SlidePanel
+          mainContent={<div>Main</div>}
+          panelContent={<div>Panel</div>}
+          isPanelOpen
+        />
+      </ConfigProvider>
     )
     const panel = container.querySelector('.slidePanel') as HTMLElement
     expect(panel.style.width).toBe('400px')

From 5802e79471a09c13b7968cba9819247434b12bf2 Mon Sep 17 00:00:00 2001
From: Sylvain Lesage <severo@rednegra.net>
Date: Thu, 27 Mar 2025 17:15:43 +0100
Subject: [PATCH 2/2] comment

---
 src/components/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 3ddef9bc..6c83d572 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -12,7 +12,7 @@ export default function App() {
 
   const source = getHttpSource(sourceId) ?? getHyperparamSource(sourceId, { endpoint: location.origin })
 
-  // Use memo to avoid creating a new object on each render
+  // Memoize the config to avoid creating a new object on each render
   const config: Config = useMemo(() => ({
     routes: {
       getSourceRouteUrl: ({ sourceId }) => `/files?key=${sourceId}`,