Error with brainmaps authentication BRAINMAPS_CLIENT_ID

[tkakar]

Hello - thanks for developing this wrapper around neuroglancer. I was trying to use the Neuroglancer component with our own data, however ran into some authentication error stating Error: BRAINMAPS_CLIENT_ID is not defined pointing to the underlying code.

var init_register_credentials_provider3 = __esm({
  "../../node_modules/.pnpm/@[email protected]/node_modules/@janelia-flyem/neuroglancer/dist/module/neuroglancer/datasource/brainmaps/register_credentials_provider.js"() {
    init_default_manager();
    init_api4();
    init_credentials_provider4();
    defaultCredentialsManager.register(credentialsKey3, () => new BrainmapsCredentialsProvider(BRAINMAPS_CLIENT_ID));
  }
});

Any help is appreciated.

[neomorphic]

@tkakar you will need to add the brainMapsClientId prop to the Neuroglancer component when you create it, like this:

 <Neuroglancer
   perspectiveZoom={80}
   viewerState={viewerState}
   brainMapsClientId="NOT_A_VALID_ID"
   ngServer="https://clio-ng.janelia.org"
   onViewerStateChanged={onViewerStateChanged}
 />

If you are not using the BrainMaps datasource, then you can use "NOT_A_VALID_ID" or whatever you wish and that should get you past the error that you are seeing.

[tkakar]

Thanks for the quick response.

[tkakar]

@neomorphic Thanks for adding the readme, it's very helpful. I was using the example ViewerState you provided (assuming the links were pointing to correct datasets) before using our own data with a simple react app. Below is how the UI looks,

there are

[neomorphic]

You are missing the stylesheets. The solution that has been used to integrate this into neuprintExplorer is to use the copyWebpackPlugin in our webpack config and copy the css from the @janelia-flyem/neuroglancer module into the released application. You can see how this has been done by looking at the following files in the neuprintExplorer repo:

webpack.config.js

index.html

You will also probably need the chunk_worker.bundle.js and async_computation.bundle.js files. A way to include these can be seen in the webpack.config.js file, just above the ng.css copying code.

[tkakar]

@neomorphic thanks for responding. I just got a chance to work on it. I imported the files and only included the .css in the index file (not the bundles).
I still get a lot of errors, particularly with the data itself. Apologies, but I could not figure it out and any guidance is appreciated.

My code is simple based on the example provided in readme

import Neuroglancer from '@janelia-flyem/react-neuroglancer';
const NeuroglancerViewer = (props) => {
  const viewerState =
  {
    layers: {
        grayscale: {
            type: "image",
            source:
              "dvid://https://flyem.dvid.io/ab6e610d4fe140aba0e030645a1d7229/grayscalejpeg"
        },
        segmentation: {
            type: "segmentation",
            source:
              "dvid://https://flyem.dvid.io/d925633ed0974da78e2bb5cf38d01f4d/segmentation"
        }
    },
    perspectiveZoom: 20,
    navigation: {
        zoomFactor: 8
    }
}
  return (
    <>
      <Neuroglancer
        viewerState={viewerState}
        brainMapsClientId="NOT_A_VALID_ID"
        // ngServer="https://clio-ng.janelia.org"
      />
    </>
  );
};

[neomorphic]

I created an example repo that starts with a basic create react app and includes the neuroglancer window.
https://github.com/neuroglancerhub/react-neuroglancer-example
If you look at the changes I made in the commits, you should be able to see what needed to be added to get the neuroglancer component working.

[tkakar]

Appreciate it. thank you.