How to hide the sidebar and the toolbar in h5web/app in react permanently?

HDF5 Library
1

image
image1920×855 163 KB

I am trying to visualize h5 files only. and need the slider and the heatmap. I have tried achieving the same with h5web/lib but the image showing does not match and not clear enough.

const getData = async () => {
    const dataPath = `/DATA`; 
    const selection = sliderValue;
    const flatten = false;
    axios({
      url: `${url}/h5/data/?path=${dataPath}&selection=${selection}&flatten=${flatten}&resolve_links=only_valid&file=${fileName}`,
      method: "GET",
      responseType: "arraybuffer",
      headers: {
        "Content-Type": "application/octet-stream",
      },
      decompress: false,
    })
      .then((response) => {
        const data = response.data;

        const uint8Array = new Uint8Array(data);
        const valid_length = uint8Array.length - (uint8Array.length % 4);
        const trimmed_array = uint8Array.slice(0, valid_length);
        if (shape) {
          const data8Arr = ndarray(trimmed_array, [shape[1], shape[2]]);
          dispatch(updateFileArray(data8Arr));
          const domain_d = getDomain(data8Arr);

          {
            domain_d && dispatch(updateDomain(domain_d));
          }
          setDomain(domain_d);
        }
      })
      .catch((err) => {
        console.error("Error", err);
      });
  };
<VisCanvas>
<HeatmapMesh
               magFilter={1006}
               values={fileArray}
               domain={domain}
               scaleType={scaleType}
               colorMap={color}
               isMesh={true}
               onClick={() => {
                 setPersistedDataSelection(undefined);
               }}
            />
</VisCanvas>

enter image description here

I am trying to visualize h5 files only. and need the slider and the heatmap. I have tried achieving the same with h5web/lib but the image showing does not match and not clear enough.

const getData = async () => {
    const dataPath = `/DATA`; 
    const selection = sliderValue;
    const flatten = false;
    axios({
      url: `${url}/h5/data/?path=${dataPath}&selection=${selection}&flatten=${flatten}&resolve_links=only_valid&file=${fileName}`,
      method: "GET",
      responseType: "arraybuffer",
      headers: {
        "Content-Type": "application/octet-stream",
      },
      decompress: false,
    })
      .then((response) => {
        const data = response.data;

        const uint8Array = new Uint8Array(data);
        const valid_length = uint8Array.length - (uint8Array.length % 4);
        const trimmed_array = uint8Array.slice(0, valid_length);
        if (shape) {
          const data8Arr = ndarray(trimmed_array, [shape[1], shape[2]]);
          dispatch(updateFileArray(data8Arr));
          const domain_d = getDomain(data8Arr);

          {
            domain_d && dispatch(updateDomain(domain_d));
          }
          setDomain(domain_d);
        }
      })
      .catch((err) => {
        console.error("Error", err);
      });
  };
<VisCanvas>
<HeatmapMesh
               magFilter={1006}
               values={fileArray}
               domain={domain}
               scaleType={scaleType}
               colorMap={color}
               isMesh={true}
               onClick={() => {
                 setPersistedDataSelection(undefined);
               }}
            />
</VisCanvas>

This is what appears with heatmapmesh

image
image1326×1108 283 KB

2

Would you please report this to Issues · silx-kit/h5web (github.com)?

3

Hello,
I am back with another h5web/app query. is there a way to restrict the path of the sidebar panel? For example:
In the given screen shot , i want to expose the following path , water_224.h5/0_measurement/images and hide the other paths. I thought i could acheive the same but setting the file path in as given below:

{fileName && scans &&(
        <H5GroveProvider
          url={`${url}`}
          
          filepath={`/${fileName}/0_measurement/images`}
       
          axiosConfig={{
            params: {
              file: `${fileName}`,
            },
          }}
        >
          <Suspense fallback={<span>Loading...</span>}>
            <App sidebarOpen={false} propagateErrors={true} />
          </Suspense>
        </H5GroveProvider>

But thats not the answer.

image
image480×1062 38.2 KB

Any suggestions appreciated.