Renamed domain (in the file sense) into filepath

.env

@@ -8,15 +8,15 @@
 REACT_APP_DEFAULT_PATH=
 
 # HSDS parameters
-# URL, username, password and domain as strings
+# URL, username, password and filepath as strings
 REACT_APP_HSDS_URL=
 REACT_APP_HSDS_USERNAME=
 REACT_APP_HSDS_PASSWORD=
-REACT_APP_HSDS_FALLBACK_DOMAIN="/home/reader/water"
+REACT_APP_HSDS_FALLBACK_FILEPATH="/home/reader/water"
 
 # JupyterLab backend parameters
 REACT_APP_JLAB_URL=
-REACT_APP_JLAB_FALLBACK_DOMAIN="water_224.h5"
+REACT_APP_JLAB_FALLBACK_FILEPATH="water_224.h5"
 
 # Rendering performance profiling (local development only)
 REACT_APP_PROFILING_ENABLED=false

README.md

@@ -47,7 +47,7 @@ visualizations. Three demos are available, one per data provider:
 This demo is available at https://h5web.panosc.eu.
 
 The following HDF5 files can be reached with a URL of the form
-`https://h5web.panosc.eu/?domain=<name>`:
+`https://h5web.panosc.eu/?file=<name>`:
 
 - `water_224.h5` (**default**): A typical NeXUS file with various real-world
   datasets to demonstrate the visualizations.
@@ -61,7 +61,7 @@ The following HDF5 files can be reached with a URL of the form
 This demo is available at https://h5web.panosc.eu/hsds.
 
 The following HDF5 files can be reached with a URL of the form
-`https://h5web.panosc.eu/hsds?domain=<name>`:
+`https://h5web.panosc.eu/hsds?file=<name>`:
 
 - `/home/reader/water` (**default**): The file `water_224.h5`. Some datasets
   cannot be displayed as bitshuffle compression is not supported by HSDS yet.

src/demo-app/HsdsApp.tsx

@@ -5,18 +5,18 @@ import { App, HsdsProvider } from '../packages/app';
 const URL = process.env.REACT_APP_HSDS_URL || '';
 const USERNAME = process.env.REACT_APP_HSDS_USERNAME || '';
 const PASSWORD = process.env.REACT_APP_HSDS_PASSWORD || '';
-const DOMAIN = process.env.REACT_APP_HSDS_FALLBACK_DOMAIN || '';
+const FILEPATH = process.env.REACT_APP_HSDS_FALLBACK_FILEPATH || '';
 
 function HsdsApp(): ReactElement {
   const query = new URLSearchParams(useLocation().search);
-  const domain = query.get('domain');
+  const filepath = query.get('file');
 
   return (
     <HsdsProvider
       url={URL}
       username={USERNAME}
       password={PASSWORD}
-      domain={domain || DOMAIN}
+      filepath={filepath || FILEPATH}
     >
       <App />
     </HsdsProvider>

src/demo-app/JupyterApp.tsx

@@ -4,14 +4,14 @@ import JupyterProvider from '../h5web/providers/jupyter/JupyterProvider';
 import { App } from '../packages/app';
 
 const URL = process.env.REACT_APP_JLAB_URL || '';
-const DOMAIN = process.env.REACT_APP_JLAB_FALLBACK_DOMAIN || '';
+const FILEPATH = process.env.REACT_APP_JLAB_FALLBACK_DOMAIN || '';
 
 function JupyterApp(): ReactElement {
   const query = new URLSearchParams(useLocation().search);
-  const domain = query.get('domain');
+  const filepath = query.get('file');
 
   return (
-    <JupyterProvider url={URL} domain={domain || DOMAIN}>
+    <JupyterProvider url={URL} filepath={filepath || FILEPATH}>
       <App />
     </JupyterProvider>
   );

src/h5web/breadcrumbs/Breadcrumbs.tsx

@@ -7,20 +7,20 @@ import Crumb from './Crumb';
 interface Props {
   path: string;
   onSelect: (path: string) => void;
-  showDomain: boolean;
+  showFilepath: boolean;
 }
 
 function Breadcrumbs(props: Props): ReactElement {
-  const { path, onSelect, showDomain } = props;
+  const { path, onSelect, showFilepath } = props;
 
   assertAbsolutePath(path);
-  const { domain } = useContext(ProviderContext);
+  const { filepath } = useContext(ProviderContext);
 
   if (path === '/') {
     return (
       <h1 className={styles.breadCrumbs}>
         <span className={styles.crumb} data-current>
-          {domain}
+          {filepath}
         </span>
       </h1>
     );
@@ -31,7 +31,7 @@ function Breadcrumbs(props: Props): ReactElement {
 
   return (
     <h1 className={styles.breadCrumbs}>
-      {showDomain && <Crumb name={domain} onClick={() => onSelect('/')} />}
+      {showFilepath && <Crumb name={filepath} onClick={() => onSelect('/')} />}
       {crumbs.slice(0, -1).map((crumb, i) => {
         const crumbPath = `/${crumbs.slice(0, i + 1).join('/')}`;
         return (

src/h5web/breadcrumbs/BreadcrumbsBar.tsx

@@ -37,7 +37,7 @@ function BreadcrumbsBar(props: Props): ReactElement {
       <Breadcrumbs
         path={path}
         onSelect={setSelectedPath}
-        showDomain={!isExplorerOpen}
+        showFilepath={!isExplorerOpen}
       />
 
       <ToggleGroup

src/h5web/explorer/Explorer.module.css

@@ -35,7 +35,7 @@
   font-weight: bold;
 }
 
-.domainBtn {
+.fileBtn {
   composes: btn;
   margin: 0;
   padding: 1rem;
@@ -48,7 +48,7 @@
   padding-bottom: 0.125em;
 }
 
-.domainIcon {
+.fileIcon {
   composes: icon;
   font-size: 1.25em;
   margin-left: -0.375rem;

src/h5web/explorer/Explorer.test.tsx

@@ -1,38 +1,38 @@
 import { fireEvent, screen } from '@testing-library/react';
-import { mockDomain } from '../providers/mock/metadata';
+import { mockFilepath } from '../providers/mock/metadata';
 import { renderApp } from '../test-utils';
 
 describe('Explorer', () => {
   test('select root group by default', async () => {
     renderApp();
 
-    const title = await screen.findByRole('heading', { name: mockDomain });
+    const title = await screen.findByRole('heading', { name: mockFilepath });
     expect(title).toBeVisible();
 
-    const domainBtn = screen.getByRole('treeitem', { name: mockDomain });
-    expect(domainBtn).toBeVisible();
-    expect(domainBtn).toHaveAttribute('aria-selected', 'true');
+    const fileBtn = screen.getByRole('treeitem', { name: mockFilepath });
+    expect(fileBtn).toBeVisible();
+    expect(fileBtn).toHaveAttribute('aria-selected', 'true');
   });
 
   test('toggle explorer sidebar', async () => {
     renderApp();
 
-    const domainBtn = await screen.findByRole('treeitem', {
-      name: mockDomain,
+    const fileBtn = await screen.findByRole('treeitem', {
+      name: mockFilepath,
     });
     const sidebarBtn = screen.getByRole('button', {
       name: 'Toggle explorer sidebar',
     });
 
-    expect(domainBtn).toBeVisible();
+    expect(fileBtn).toBeVisible();
     expect(sidebarBtn).toHaveAttribute('aria-pressed', 'true');
 
     fireEvent.click(sidebarBtn);
-    expect(domainBtn).not.toBeVisible();
+    expect(fileBtn).not.toBeVisible();
     expect(sidebarBtn).toHaveAttribute('aria-pressed', 'false');
 
     fireEvent.click(sidebarBtn);
-    expect(domainBtn).toBeVisible();
+    expect(fileBtn).toBeVisible();
     expect(sidebarBtn).toHaveAttribute('aria-pressed', 'true');
   });
 

src/h5web/explorer/Explorer.tsx

@@ -11,19 +11,19 @@ interface Props {
 
 function Explorer(props: Props): ReactElement {
   const { selectedPath, onSelect } = props;
-  const { domain } = useContext(ProviderContext);
+  const { filepath } = useContext(ProviderContext);
 
   return (
     <div className={styles.explorer} role="tree">
       <button
-        className={styles.domainBtn}
+        className={styles.fileBtn}
         type="button"
         role="treeitem"
         aria-selected={selectedPath === '/'}
         onClick={() => onSelect('/')}
       >
-        <FiFileText className={styles.domainIcon} />
-        {domain}
+        <FiFileText className={styles.fileIcon} />
+        {filepath}
       </button>
 
       <Suspense

src/h5web/metadata-viewer/EntityTable.tsx

@@ -15,7 +15,7 @@ interface Props {
 function EntityTable(props: Props): ReactElement {
   const { entity } = props;
   const { name, path, kind } = entity;
-  const { domain } = useContext(ProviderContext);
+  const { filepath } = useContext(ProviderContext);
 
   return (
     <table className={styles.table}>
@@ -33,7 +33,7 @@ function EntityTable(props: Props): ReactElement {
         </tr>
         <tr>
           <th scope="row">Name</th>
-          <td>{path === '/' ? domain : name}</td>
+          <td>{path === '/' ? filepath : name}</td>
         </tr>
         {(isDataset(entity) || isDatatype(entity)) && (
           <tr>

src/h5web/providers/Provider.tsx

@@ -46,7 +46,7 @@ function Provider(props: Props): ReactElement {
   return (
     <ProviderContext.Provider
       value={{
-        domain: api.domain,
+        filepath: api.filepath,
         entitiesStore,
         valuesStore,
       }}

src/h5web/providers/context.ts

@@ -10,13 +10,13 @@ export interface GetValueParams {
 }
 
 export abstract class ProviderAPI {
-  abstract domain: string;
+  abstract filepath: string;
   abstract getEntity(path: string): Promise<Entity>;
   abstract getValue(params: GetValueParams): Promise<HDF5Value>;
 }
 
 export const ProviderContext = createContext<{
-  domain: string;
+  filepath: string;
   entitiesStore: FetchStore<Entity, string>;
   valuesStore: ObjectKeyStore<HDF5Value, GetValueParams>;
 }>({} as any); // eslint-disable-line @typescript-eslint/no-explicit-any

src/h5web/providers/hsds/HsdsProvider.tsx

@@ -6,15 +6,15 @@ interface Props {
   url: string;
   username: string;
   password: string;
-  domain: string;
+  filepath: string;
   children: ReactNode;
 }
 
 function HsdsProvider(props: Props): ReactElement {
-  const { url, username, password, domain, children } = props;
+  const { url, username, password, filepath, children } = props;
 
-  const api = useMemo(() => new HsdsApi(url, username, password, domain), [
-    domain,
+  const api = useMemo(() => new HsdsApi(url, username, password, filepath), [
+    filepath,
     password,
     url,
     username,

src/h5web/providers/hsds/api.ts

@@ -31,7 +31,7 @@ import {
 import { buildEntityPath, getChildEntity } from '../../utils';
 
 export class HsdsApi implements ProviderAPI {
-  public readonly domain: string;
+  public readonly filepath: string;
   private readonly client: AxiosInstance;
 
   private readonly entities = new Map<string, Entity>();
@@ -40,12 +40,12 @@ export class HsdsApi implements ProviderAPI {
     url: string,
     username: string,
     password: string,
-    domain: string
+    filepath: string
   ) {
-    this.domain = domain;
+    this.filepath = filepath;
     this.client = axios.create({
       baseURL: url,
-      params: { domain },
+      params: { domain: filepath },
       auth: { username, password },
     });
   }
@@ -57,7 +57,7 @@ export class HsdsApi implements ProviderAPI {
 
     if (path === '/') {
       const rootId = await this.fetchRootId();
-      const root = await this.processGroup(rootId, '/', this.domain, 1);
+      const root = await this.processGroup(rootId, '/', this.filepath, 1);
       this.entities.set(path, root);
       return root;
     }

src/h5web/providers/jupyter/JupyterProvider.tsx

@@ -4,13 +4,13 @@ import Provider from '../Provider';
 
 interface Props {
   url: string;
-  domain: string;
+  filepath: string;
   children: ReactNode;
 }
 
 function JupyterProvider(props: Props): ReactElement {
-  const { url, domain, children } = props;
-  const api = useMemo(() => new JupyterApi(url, domain), [domain, url]);
+  const { url, filepath, children } = props;
+  const api = useMemo(() => new JupyterApi(url, filepath), [filepath, url]);
 
   return <Provider api={api}>{children}</Provider>;
 }

src/h5web/providers/jupyter/api.ts

@@ -22,11 +22,11 @@ import {
 } from '../hdf5-models';
 
 export class JupyterApi implements ProviderAPI {
-  public readonly domain: string;
+  public readonly filepath: string;
   private readonly client: AxiosInstance;
 
-  public constructor(url: string, domain: string) {
-    this.domain = domain;
+  public constructor(url: string, filepath: string) {
+    this.filepath = filepath;
     this.client = axios.create({
       baseURL: `${url}/hdf`,
     });
@@ -40,28 +40,28 @@ export class JupyterApi implements ProviderAPI {
     const { path, selection = '' } = params;
 
     const { data } = await this.client.get<JupyterDataResponse>(
-      `/data/${this.domain}?uri=${path}${selection && `&ixstr=${selection}`}`
+      `/data/${this.filepath}?uri=${path}${selection && `&ixstr=${selection}`}`
     );
     return data;
   }
 
   private async fetchAttributes(path: string): Promise<JupyterAttrsResponse> {
     const { data } = await this.client.get<JupyterAttrsResponse>(
-      `/attrs/${this.domain}?uri=${path}`
+      `/attrs/${this.filepath}?uri=${path}`
     );
     return data;
   }
 
   private async fetchMetadata(path: string): Promise<JupyterMetaResponse> {
     const { data } = await this.client.get<JupyterMetaResponse>(
-      `/meta/${this.domain}?uri=${path}`
+      `/meta/${this.filepath}?uri=${path}`
     );
     return data;
   }
 
   private async fetchContents(path: string): Promise<JupyterContentResponse> {
     const { data } = await this.client.get<JupyterContentResponse>(
-      `/contents/${this.domain}?uri=${path}`
+      `/contents/${this.filepath}?uri=${path}`
     );
     return data;
   }