Build packages by Rollup instead of tsc

optuna_dashboard/package.json

@@ -3,30 +3,30 @@
   "private": true,
   "version": "0.0.1",
   "description": "Dashboard for Optuna",
-  "main": "pkg/pkg_index.js",
-  "types": "types/pkg_index.d.ts",
+  "module": "pkg/pkg_index.js",
+  "types": "pkg/pkg_index.d.ts",
   "scripts": {
     "watch": "NODE_ENV=development TYPESCRIPT_LOADER=esbuild-loader webpack --watch",
     "build": "webpack",
     "build:dev": "NODE_ENV=development TYPESCRIPT_LOADER=esbuild-loader webpack",
     "build:prd": "NODE_ENV=production webpack",
-    "build:pkg": "tsc -d --project tsconfig.pkg.json",
+    "build:pkg": "rollup --config",
     "type-check": "tsc --noEmit"
   },
   "author": "Masashi Shibata",
   "license": "MIT",
   "dependencies": {
-    "@emotion/react": "file:../tslib/react/node_modules/@emotion/react",
-    "@emotion/styled": "file:../tslib/react/node_modules/@emotion/styled",
-    "@mui/icons-material": "file:../tslib/react/node_modules/@mui/icons-material",
-    "@mui/lab": "file:../tslib/react/node_modules/@mui/lab",
-    "@mui/material": "file:../tslib/react/node_modules/@mui/material",
-    "@mui/system": "file:../tslib/react/node_modules/@mui/system",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.16.1",
+    "@mui/lab": "^5.0.0-alpha.172",
+    "@mui/material": "^5.16.1",
+    "@mui/system": "^5.16.1",
     "@optuna/react": "../tslib/react",
     "@react-three/drei": "^9.96.4",
     "@react-three/fiber": "^8.15.15",
     "@tanstack/react-query": "^5.18.1",
-    "@tanstack/react-table": "file:../tslib/react/node_modules/@tanstack/react-table",
+    "@tanstack/react-table": "^8.19.2",
     "@tanstack/react-virtual": "^3.1.2",
     "@types/papaparse": "^5.3.14",
     "@types/three": "^0.160.0",
@@ -35,7 +35,7 @@
     "notistack": "^3.0.1",
     "papaparse": "^5.4.1",
     "plotly.js-dist-min": "^2.28.0",
-    "react": "file:../tslib/react/node_modules/react",
+    "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.21.3",
@@ -54,15 +54,18 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@optuna/types": "../tslib/types/",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@types/plotly.js": "^2.12.32",
-    "@types/react": "file:../tslib/react/node_modules/@types/react",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.2.18",
     "@types/react-syntax-highlighter": "^15.5.11",
     "compression-webpack-plugin": "^11.0.0",
     "css-loader": "^6.9.1",
     "esbuild-loader": "^4.0.3",
+    "rollup": "^4.18.1",
     "style-loader": "^3.3.4",
     "ts-loader": "^9.5.1",
+    "tslib": "^2.6.3",
     "typescript": "^5.3.3",
     "webpack": "^5.90.0",
     "webpack-cli": "^5.1.4"

optuna_dashboard/rollup.config.mjs

@@ -0,0 +1,20 @@
+import typescript from "@rollup/plugin-typescript"
+import packageJson from "./package.json" assert { type: "json" }
+
+export default {
+    input: "ts/pkg_index.tsx",
+    output: {
+        dir: "pkg",
+        format: "es",
+        exports: "named",
+        sourcemap: true,
+    },
+    external: [
+        ...Object.keys(packageJson.dependencies || {}),
+    ],
+    plugins: [typescript({
+        declaration: true,
+        declarationDir: "pkg",
+        outDir: "pkg",
+    })],
+}

optuna_dashboard/ts/components/App.tsx

@@ -5,8 +5,7 @@ import {
   createTheme,
   useMediaQuery,
 } from "@mui/material"
-import blue from "@mui/material/colors/blue"
-import pink from "@mui/material/colors/pink"
+import { blue, pink } from "@mui/material/colors"
 import { SnackbarProvider } from "notistack"
 import React, { FC, useMemo, useState, useEffect } from "react"
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom"

optuna_dashboard/ts/components/AppDrawer.tsx

@@ -1,26 +1,32 @@
-import AutoGraphIcon from "@mui/icons-material/AutoGraph"
-import Brightness4Icon from "@mui/icons-material/Brightness4"
-import Brightness7Icon from "@mui/icons-material/Brightness7"
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"
-import ChevronRightIcon from "@mui/icons-material/ChevronRight"
-import RateReviewIcon from "@mui/icons-material/RateReview"
-import SettingsIcon from "@mui/icons-material/Settings"
-import SyncIcon from "@mui/icons-material/Sync"
-import SyncDisabledIcon from "@mui/icons-material/SyncDisabled"
-import TableViewIcon from "@mui/icons-material/TableView"
-import ViewListIcon from "@mui/icons-material/ViewList"
-import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar"
-import Box from "@mui/material/Box"
-import Divider from "@mui/material/Divider"
-import MuiDrawer from "@mui/material/Drawer"
-import IconButton from "@mui/material/IconButton"
-import List from "@mui/material/List"
-import ListItem from "@mui/material/ListItem"
-import ListItemButton from "@mui/material/ListItemButton"
-import ListItemIcon from "@mui/material/ListItemIcon"
-import ListItemText from "@mui/material/ListItemText"
-import Modal from "@mui/material/Modal"
-import Toolbar from "@mui/material/Toolbar"
+import {
+  AutoGraph as AutoGraphIcon,
+  Brightness4 as Brightness4Icon,
+  Brightness7 as Brightness7Icon,
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+  RateReview as RateReviewIcon,
+  Settings as SettingsIcon,
+  Sync as SyncIcon,
+  SyncDisabled as SyncDisabledIcon,
+  TableView as TableViewIcon,
+  ViewList as ViewListIcon,
+} from "@mui/icons-material"
+import {
+  AppBarProps as MuiAppBarProps,
+  Box,
+  Divider,
+  Drawer as MuiDrawer,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Modal,
+  Switch,
+  Toolbar,
+} from "@mui/material"
+import MuiAppBar from "@mui/material/AppBar"
 import { CSSObject, Theme, styled, useTheme } from "@mui/material/styles"
 import React, { FC } from "react"
 import { Link } from "react-router-dom"
@@ -32,14 +38,15 @@ import {
 } from "../state"
 import { Settings } from "./Settings"
 
-import GitHubIcon from "@mui/icons-material/GitHub"
-import HistoryIcon from "@mui/icons-material/History"
-import LanIcon from "@mui/icons-material/Lan"
-import MenuIcon from "@mui/icons-material/Menu"
-import OpenInNewIcon from "@mui/icons-material/OpenInNew"
-import QueryStatsIcon from "@mui/icons-material/QueryStats"
-import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"
-import { Switch } from "@mui/material"
+import {
+  GitHub as GitHubIcon,
+  History as HistoryIcon,
+  Lan as LanIcon,
+  Menu as MenuIcon,
+  OpenInNew as OpenInNewIcon,
+  QueryStats as QueryStatsIcon,
+  ThumbUpAlt as ThumbUpAltIcon,
+} from "@mui/icons-material"
 import { actionCreator } from "../action"
 
 const drawerWidth = 240

optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx

@@ -1,7 +1,9 @@
-import DeleteIcon from "@mui/icons-material/Delete"
-import DownloadIcon from "@mui/icons-material/Download"
-import FullscreenIcon from "@mui/icons-material/Fullscreen"
-import UploadFileIcon from "@mui/icons-material/UploadFile"
+import {
+  Delete as DeleteIcon,
+  Download as DownloadIcon,
+  Fullscreen as FullscreenIcon,
+  UploadFile as UploadFileIcon,
+} from "@mui/icons-material"
 import {
   Box,
   Card,

optuna_dashboard/ts/components/Artifact/TableArtifactViewer.tsx

@@ -1,6 +1,5 @@
-import ClearIcon from "@mui/icons-material/Clear"
-import { Box, Modal, useTheme } from "@mui/material"
-import IconButton from "@mui/material/IconButton"
+import { Clear as ClearIcon } from "@mui/icons-material"
+import { Box, IconButton, Modal, useTheme } from "@mui/material"
 import { DataGrid } from "@optuna/react"
 import { useSnackbar } from "notistack"
 import Papa from "papaparse"

optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx

@@ -1,6 +1,5 @@
-import ClearIcon from "@mui/icons-material/Clear"
-import { Box, Modal, useTheme } from "@mui/material"
-import IconButton from "@mui/material/IconButton"
+import { Clear as ClearIcon } from "@mui/icons-material"
+import { Box, IconButton, Modal, useTheme } from "@mui/material"
 import { GizmoHelper, GizmoViewport, OrbitControls } from "@react-three/drei"
 import { Canvas } from "@react-three/fiber"
 import React, { useEffect, useState, ReactNode } from "react"

optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx

@@ -1,7 +1,9 @@
-import DeleteIcon from "@mui/icons-material/Delete"
-import DownloadIcon from "@mui/icons-material/Download"
-import FullscreenIcon from "@mui/icons-material/Fullscreen"
-import UploadFileIcon from "@mui/icons-material/UploadFile"
+import {
+  Delete as DeleteIcon,
+  Download as DownloadIcon,
+  Fullscreen as FullscreenIcon,
+  UploadFile as UploadFileIcon,
+} from "@mui/icons-material"
 import {
   Box,
   Card,

optuna_dashboard/ts/components/BestTrialsCard.tsx

@@ -1,4 +1,4 @@
-import LinkIcon from "@mui/icons-material/Link"
+import { Link as LinkIcon } from "@mui/icons-material"
 import {
   Box,
   Button,

optuna_dashboard/ts/components/CompareStudies.tsx

@@ -1,24 +1,26 @@
-import ChevronRightIcon from "@mui/icons-material/ChevronRight"
-import HomeIcon from "@mui/icons-material/Home"
+import {
+  ChevronRight as ChevronRightIcon,
+  Home as HomeIcon,
+} from "@mui/icons-material"
 import {
   Box,
   Card,
   CardContent,
+  Chip,
+  Divider,
   FormControl,
+  FormControlLabel,
+  Grid,
   IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  ListSubheader,
   Switch,
   Typography,
   useTheme,
 } from "@mui/material"
-import Chip from "@mui/material/Chip"
-import Divider from "@mui/material/Divider"
-import FormControlLabel from "@mui/material/FormControlLabel"
-import Grid from "@mui/material/Grid"
-import List from "@mui/material/List"
-import ListItem from "@mui/material/ListItem"
-import ListItemButton from "@mui/material/ListItemButton"
-import ListItemText from "@mui/material/ListItemText"
-import ListSubheader from "@mui/material/ListSubheader"
 import * as Optuna from "@optuna/types"
 import { useSnackbar } from "notistack"
 import React, { FC, useEffect, useMemo, useState } from "react"
@@ -143,7 +145,9 @@ export const CompareStudies: FC<{
                 return (
                   <ListItem key={study.study_id} disablePadding>
                     <ListItemButton
-                      onClick={(e) => {
+                      onClick={(
+                        e: React.MouseEvent<HTMLDivElement, MouseEvent>
+                      ) => {
                         if (e.shiftKey) {
                           let next: number[]
                           const selectedIds = selected.map((s) => s.study_id)

optuna_dashboard/ts/components/CreateStudyDialog.tsx

@@ -1,5 +1,4 @@
-import AddIcon from "@mui/icons-material/Add"
-import RemoveIcon from "@mui/icons-material/Remove"
+import { Add as AddIcon, Remove as RemoveIcon } from "@mui/icons-material"
 import {
   Button,
   Dialog,

optuna_dashboard/ts/components/GraphHistory.tsx

@@ -203,7 +203,7 @@ export const GraphHistory: FC<{
             min={1}
             max={10}
             step={1}
-            onChange={(e) => {
+            onChange={(e: Event) => {
               // @ts-ignore
               setMarkerSize(e.target.value as number)
             }}

optuna_dashboard/ts/components/Note.tsx

@@ -1,10 +1,12 @@
-import CloseIcon from "@mui/icons-material/Close"
-import EditIcon from "@mui/icons-material/Edit"
-import HtmlIcon from "@mui/icons-material/Html"
-import ModeEditIcon from "@mui/icons-material/ModeEdit"
-import SaveIcon from "@mui/icons-material/Save"
-import UploadFileIcon from "@mui/icons-material/UploadFile"
-import LoadingButton from "@mui/lab/LoadingButton"
+import {
+  Close as CloseIcon,
+  Edit as EditIcon,
+  Html as HtmlIcon,
+  ModeEdit as ModeEditIcon,
+  Save as SaveIcon,
+  UploadFile as UploadFileIcon,
+} from "@mui/icons-material"
+import { LoadingButton } from "@mui/lab"
 import {
   Box,
   Button,

optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx

@@ -2,11 +2,11 @@ import {
   Box,
   Card,
   CardContent,
+  Grid,
   Paper,
   Typography,
   useTheme,
 } from "@mui/material"
-import Grid from "@mui/material/Grid"
 import { DataGrid } from "@optuna/react"
 import * as Optuna from "@optuna/types"
 import React, { FC } from "react"
@@ -67,6 +67,7 @@ export const PreferentialAnalytics: FC<{ studyId: number }> = ({ studyId }) => {
               >
                 Study User Attributes
               </Typography>
+              {/* @ts-ignore */}
               <DataGrid data={userAttrs} columns={columns} />
             </CardContent>
           </Card>

optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx

@@ -1,17 +1,19 @@
-import ClearIcon from "@mui/icons-material/Clear"
-import DeleteIcon from "@mui/icons-material/Delete"
-import OpenInFullIcon from "@mui/icons-material/OpenInFull"
-import RestoreFromTrashIcon from "@mui/icons-material/RestoreFromTrash"
+import {
+  Clear as ClearIcon,
+  Delete as DeleteIcon,
+  OpenInFull as OpenInFullIcon,
+  RestoreFromTrash as RestoreFromTrashIcon,
+} from "@mui/icons-material"
 import {
   Box,
   Card,
   CardActions,
   CardContent,
+  IconButton,
+  Modal,
   Typography,
   useTheme,
 } from "@mui/material"
-import IconButton from "@mui/material/IconButton"
-import Modal from "@mui/material/Modal"
 import { red } from "@mui/material/colors"
 import React, { FC, useState } from "react"