[Tutorials] Enable plotly support

The botorch tutorials are currently configured to output plots as images but our conversion script supports plotly. Let's enable plotly support to keep the conversion consistent between the botorch and ax repos since they use the same script.

We can update the tutorials to output plotly in the future.

website/package.json

@@ -19,8 +19,10 @@
     "@docusaurus/preset-classic": "^3.6.3",
     "bl": "^6.0.0",
     "clsx": "^1.1.1",
+    "plotly.js": "^2.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-plotly.js": "^2.5.1",
     "rehype-katex": "7",
     "remark-math": "6"
   }

website/src/components/Plotting.jsx

@@ -7,23 +7,22 @@
 
 import React from 'react';
 import Loadable from 'react-loadable';
-import BrowserOnly from '@docusaurus/BrowserOnly';
 
-// const Plotly = Loadable({
-//   loader: () => import(`react-plotly.js`),
-//   loading: ({timedOut}) =>
-//     timedOut ? (
-//       <blockquote>Error: Loading Plotly timed out.</blockquote>
-//     ) : (
-//       <div>loading...</div>
-//     ),
-//   timeout: 10000,
-// });
+const Plotly = Loadable({
+  loader: () => import(`react-plotly.js`),
+  loading: ({timedOut}) =>
+    timedOut ? (
+      <blockquote>Error: Loading Plotly timed out.</blockquote>
+    ) : (
+      <div>loading...</div>
+    ),
+  timeout: 10000,
+});
 
-// export const PlotlyFigure = React.memo(({data}) => {
-//   return (
-//     <div className="plotly-figure" style={{"overflow-x": "auto"}}>
-//       <Plotly data={data['data']} layout={data['layout']} />
-//     </div>
-//   );
-// });
+export const PlotlyFigure = React.memo(({data}) => {
+  return (
+    <div className="plotly-figure" style={{"overflow-x": "auto"}}>
+      <Plotly data={data['data']} layout={data['layout']} />
+    </div>
+  );
+});