Swap react to use createRoot in v18 style, formatting.

galaxyproject · Aug 3, 2023 · 86caa8e · 86caa8e
1 parent 49d67b3
commit 86caa8e
Showing 1 changed file with 16 additions and 27 deletions.
diff --git a/config/plugins/visualizations/h5web/src/script.js b/config/plugins/visualizations/h5web/src/script.js
@@ -1,46 +1,35 @@
 /**
  * Visualizer interface for h5web (https://github.com/silx-kit/h5web)
- * 
+ *
  * This relies on Galaxy being able to serve files using the
- * h5grove protocol (https://silx-kit.github.io/h5grove/). 
+ * h5grove protocol (https://silx-kit.github.io/h5grove/).
  * This provides efficient access to the contents of the
  * HDF5 file and avoids having to read the whole file at any
  * point.
  */
 
-import './styles.css';
-import React from 'react'
-import {render as reactRender} from 'react-dom'
-import {App, H5GroveProvider} from '@h5web/app'
+import "./styles.css";
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App, H5GroveProvider } from "@h5web/app";
 
 function MyApp(props) {
     return (
-          <H5GroveProvider
-            url={props.url}
-            filepath={props.name}
-            axiosConfig={{ params: { file: props.name } }}
-          >
+        <H5GroveProvider url={props.url} filepath={props.name} axiosConfig={{ params: { file: props.name } }}>
             <App explorerOpen={props.explorer} />
-          </H5GroveProvider>
-      );
+        </H5GroveProvider>
+    );
 }
 
 window.bundleEntries = window.bundleEntries || {};
 window.bundleEntries.load = function (options) {
-    var dataset = options.dataset;
-    var settings = options.chart.settings;
-    var explorer = settings.get('explorer');
-    var url = window.location.origin + "/api/datasets/" + dataset.id + "/content";
-    reactRender(
-      <MyApp 
-        url={url} 
-        name={dataset.name} 
-        filepath={dataset.file_name} 
-        explorer={explorer}
-      />,
-      document.getElementById(options.target)
-    )
-    options.chart.state('ok', 'Chart drawn.');
+    const dataset = options.dataset;
+    const settings = options.chart.settings;
+    const explorer = settings.get("explorer");
+    const url = window.location.origin + "/api/datasets/" + dataset.id + "/content";
+    const root = createRoot(document.getElementById(options.target));
+    root.render(<MyApp url={url} name={dataset.name} filepath={dataset.file_name} explorer={explorer} />);
+    options.chart.state("ok", "Chart drawn.");
     options.process.resolve();
 };