# 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](https://github.com/silx-kit/h5web)