HDF5 View 使用手册

安装与运行

• 本软件调试环境采用node.js，建议版本为v16.1.0，pnpm建议版本为v7.17.0，同时react react-dom 建议安装v16以上版本
• 使用pnpm build打包之后采用nginx部署，建议版本为v1.17.7

使用配置

url转换设置

• HDF5View软件链接通过明文调用，存储路径路径过于暴露，因此对url进行转换。url转换采用AES加密，同时数据服务前端调用HDF5 View插件需同步修改配置如下：
  • 在./h5web/apps/demo/src/start.tsx文件中配置secretKey、secretiv属性值；注意，调用HDF5View的相关软件也需配置AES加密以及secretKey、secretiv
  • ./h5web/apps/demo/src/start.tsx文件中function StratApp()函数为url解密转换过程，构建成h5serve可解析的参数，用户可根据实际需求自动修改此部分代码；
    • 高能所设置格式：http://127.0.0.1:5173/?file=tall.heps62_0.heps&fileExt=h5.nxs
    • 根据h5serv要求，将文件后缀名（.h5/.nxs）更换为h5serv的config.py文件中要求的domain值，省略config.py文件中配置的datapath路径，同时将路径逆置，并将路径中的“/”更换为“.”，在&后表明各个文件的真实后缀。如文件真实路径为：/hepsfs/central/4W1B/202306/Data/GB06-20230628-01/raw/J-100-1_0.h5，config.py文件中domain值为heps，配置的datapath路径为/hepsfs/central/，则对应链接为http://127.0.0.1:5173/?file=J-100-1_0.raw.GB06-20230628-01.Data.202306.4W1B.heps&fileExt=h5
  • ./h5web/apps/demo/src/start.tsx文件中HsdsProvider、APP函数需配置后端h5serv地址，h5serv默认端口为5000，可根据实际需求修改端口，在h5serv中配置账号密码

多文件预览

• 原生HDF5View不支持对多个文件的同时加载，无法满足一组数据集同时查看的需求，为了实现根据请求同时加载显示多个文件，主要对以下文件进行了修改：

  • ./h5web/packages/app/src/explorer/EntityItem.tsx

  • ./h5web/packages/app/src/explorer/EntityList.tsx

  • ./h5web/packages/app/src/explorer/Explorer.tsx

  • ./h5web/packages/app/src/explorer/SingleFile.tsx

  • ./h5web/packages/app/src/App.tsx

  • ./h5web/packages/app/src目录下增加了文件right.tsx

    • 实现方法：

      • 增加RightPart组件，将界面右端相关组件跟左边浏览侧分离，使用useState()和useDataContext()进行连接（变量控制），以实现右部View端能够根据左侧选择进行切换

        增加了onSelectPath函数用于控制选中的文件内部路径统一

        增加了onSelectFilePath函数用于控制选中的文件路径统一

        增加了onSelectFileIndex函数用于控制选中的文件序号统一（每次请求的文件被放入数组中记录）

相关链接

• H5web代码及介绍：整体框架与H5web一致，详情可参考如下链接

GitHub - silx-kit/h5web: React components for data visualization and exploration