Show NX badges in explorer where NX visualizations are actually supported

Author: axelboc

packages/app/src/__tests__/Explorer.test.tsx

@@ -3,6 +3,7 @@ import { page } from 'vitest/browser';
 
 import {
   getExplorerItem,
+  getNexusExplorerItem,
   mockDelay,
   renderApp,
   waitForAllLoaders,
@@ -178,7 +179,7 @@ test('navigate with home and end keys', async () => {
   const { user } = await renderApp();
 
   const root = getExplorerItem('source.h5');
-  const lastItem = getExplorerItem('resilience');
+  const lastItem = getNexusExplorerItem('resilience');
 
   // From root to last item
   await user.keyboard('{End}');

packages/app/src/__tests__/NexusPack.test.tsx

@@ -184,47 +184,47 @@ test('handle unknown/incompatible interpretation gracefully', async () => {
 
 test('show error/fallback for malformed NeXus entity', async () => {
   const errorSpy = mockConsoleMethod('error');
-  const { selectNexusExplorerNode } = await renderApp('/nexus_malformed');
+  const { selectExplorerNode } = await renderApp('/nexus_malformed');
 
   // `default` attribute points to non-existant entity
-  await selectNexusExplorerNode('default_not_found');
+  await selectExplorerNode('default_not_found');
   expect(page.getByText('No entity found at /test')).toBeVisible();
   errorSpy.mockClear();
 
   // No `signal` attribute
-  await selectNexusExplorerNode('no_signal');
+  await selectExplorerNode('no_signal');
   expect(page.getByText('Nothing to display')).toBeInTheDocument();
   expect(errorSpy).not.toHaveBeenCalled();
   errorSpy.mockClear();
 
   // `signal` attribute points to non-existant dataset
-  await selectNexusExplorerNode('signal_not_found');
+  await selectExplorerNode('signal_not_found');
   expect(
     page.getByText('Expected "unknown" signal entity to exist'),
   ).toBeVisible();
   errorSpy.mockClear();
 
   // Signal entity is not a dataset
-  await selectNexusExplorerNode('signal_not_dataset');
+  await selectExplorerNode('signal_not_dataset');
   expect(
     page.getByText('Expected "some_group" signal to be a dataset'),
   ).toBeVisible();
   errorSpy.mockClear();
 
   // Old-style signal entity is not a dataset
-  await selectNexusExplorerNode('signal_old-style_not_dataset');
+  await selectExplorerNode('signal_old-style_not_dataset');
   expect(
     page.getByText('Expected old-style "some_group" signal to be a dataset'),
   ).toBeVisible();
   errorSpy.mockClear();
 
   // Shape of signal dataset is not array
-  await selectNexusExplorerNode('signal_not_array');
+  await selectExplorerNode('signal_not_array');
   expect(page.getByText('Expected array shape')).toBeVisible();
   errorSpy.mockClear();
 
   // Type of signal dataset is not numeric
-  await selectNexusExplorerNode('signal_not_numeric');
+  await selectExplorerNode('signal_not_numeric');
   expect(
     page.getByText('Expected numeric, boolean, enum or complex type'),
   ).toBeVisible();
@@ -393,3 +393,8 @@ test('retry fetching automatically when selecting other NxHeatmap slice', async
   runAll();
   await expect.element(page.getByRole('figure')).toBeVisible();
 });
+
+test('visualize NXnote group', async () => {
+  await renderApp('/nexus_note');
+  expect(page.getByText('"energy": 10.2')).toBeVisible();
+});

packages/app/src/__tests__/Visualizer.test.tsx

@@ -4,6 +4,12 @@ import { page } from 'vitest/browser';
 import { mockConsoleMethod, mockDelay, renderApp } from '../test-utils';
 import { Vis } from '../vis-packs/core/visualizations';
 
+test('visualize default dataset', async () => {
+  const { selectExplorerNode } = await renderApp('/entities');
+  await selectExplorerNode('default_dataset');
+  expect(page.getByText('foo')).toBeVisible();
+});
+
 test('show fallback message when no visualization is supported', async () => {
   await renderApp('/entities'); // simple group
   expect(page.getByText('Nothing to display')).toBeVisible();

packages/app/src/explorer/EntityItem.tsx

@@ -10,7 +10,6 @@ import {
   useLayoutEffect,
   useRef,
 } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
 import { FiRefreshCw } from 'react-icons/fi';
 
 import EntityList from './EntityList';
@@ -132,11 +131,11 @@ function EntityItem(props: Props) {
         <Icon className={styles.icon} />
         <span className={styles.name}>{entity.name}</span>
 
-        <ErrorBoundary fallback={null}>
+        {isGroup(entity) && (
           <Suspense fallback={<span data-testid="LoadingNxBadge" />}>
-            <NxBadge entity={entity} />
+            <NxBadge group={entity} />
           </Suspense>
-        </ErrorBoundary>
+        )}
       </button>
 
       {isGroup(entity) && isExpanded && (

packages/app/src/explorer/NxBadge.tsx

@@ -1,19 +1,29 @@
-import { type ChildEntity } from '@h5web/shared/hdf5-models';
+import { type Group } from '@h5web/shared/hdf5-models';
 
 import { useDataContext } from '../providers/DataProvider';
+import { resolvePath } from '../visualizer/utils';
 import styles from './Explorer.module.css';
-import { needsNxBadge } from './utils';
 
 interface Props {
-  entity: ChildEntity;
+  group: Group;
 }
 
 function NxBadge(props: Props) {
-  const { entity } = props;
-  const { attrValuesStore } = useDataContext();
+  const { group } = props;
+  const { entitiesStore, attrValuesStore } = useDataContext();
 
-  if (!needsNxBadge(entity, attrValuesStore)) {
-    return null;
+  try {
+    const resolution = resolvePath(group.path, entitiesStore, attrValuesStore);
+
+    if (!resolution?.supportedVis.some((vis) => vis.name.startsWith('NX'))) {
+      return null;
+    }
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      return null; // no badge if malformed NeXus metadata
+    }
+
+    throw error; // Suspense promises
   }
 
   return (

packages/app/src/explorer/utils.ts

@@ -20,12 +20,7 @@ import { PiEmptyBold, PiGridFourBold } from 'react-icons/pi';
 import { RxDotFilled } from 'react-icons/rx';
 import { TbCube, TbTimeline } from 'react-icons/tb';
 
-import { type AttrValuesStore } from '../providers/models';
-import { hasAttribute } from '../utils';
-import { getNxClass } from '../vis-packs/nexus/utils';
-
 const DATASET_ICONS = [RxDotFilled, TbTimeline, PiGridFourBold, TbCube];
-const SUPPORTED_NX_CLASSES = new Set(['NXdata', 'NXentry', 'NXprocess']);
 
 export const EXPLORER_ID = 'h5web-explorer-tree';
 
@@ -49,22 +44,6 @@ export function getIcon(entity: ChildEntity, isExpanded: boolean): IconType {
   return FiLink;
 }
 
-export function needsNxBadge(
-  entity: ChildEntity,
-  attrValuesStore: AttrValuesStore,
-): boolean {
-  if (!isGroup(entity)) {
-    return false;
-  }
-
-  if (hasAttribute(entity, 'default')) {
-    return true;
-  }
-
-  const nxClass = getNxClass(entity, attrValuesStore);
-  return !!nxClass && SUPPORTED_NX_CLASSES.has(nxClass);
-}
-
 function getButtonList(
   parent = document.querySelector(`#${EXPLORER_ID}`),
 ): HTMLButtonElement[] {

packages/app/src/providers/mock/mock-file.ts

@@ -52,6 +52,9 @@ export function makeMockFile(): GroupWithChildren {
     children: [
       group('entities', [
         group('empty_group'),
+        group('default_dataset', [scalar('scalar_str', 'foo')], {
+          attributes: [scalarAttr('default', 'scalar_str')],
+        }),
         dataset('empty_dataset', nullShape(), unknownType(), null),
         datatype('datatype', compoundType([['int', intType()]])),
         scalar('raw', { int: 42 }),

packages/app/src/test-utils.tsx

@@ -72,17 +72,15 @@ export async function renderApp(
     ...renderResult,
 
     selectExplorerNode: async (name) => {
-      await page.getByRole('treeitem', { name, exact: true }).click();
+      await getExplorerItem(name).click();
 
       if (waitForLoaders) {
         await waitForAllLoaders();
       }
     },
 
     selectNexusExplorerNode: async (name) => {
-      await page
-        .getByRole('treeitem', { name: `${name} (NeXus group)`, exact: true })
-        .click();
+      await getNexusExplorerItem(name).click();
 
       if (waitForLoaders) {
         await waitForAllLoaders();
@@ -104,7 +102,14 @@ export async function waitForAllLoaders(): Promise<void> {
 }
 
 export function getExplorerItem(name: string): Locator {
-  return page.getByRole('treeitem', { name });
+  return page.getByRole('treeitem', { name, exact: true });
+}
+
+export function getNexusExplorerItem(name: string): Locator {
+  return page.getByRole('treeitem', {
+    name: `${name} (NeXus group)`,
+    exact: true,
+  });
 }
 
 function getVisSelector(): Locator {