New import sample data button

frontend/src/api/workflow/Workflow.ts

@@ -45,3 +45,12 @@ export async function importWorkflowConfigApi(
   const response = await axios.post(`${BASE_URL}/workflow/import`, formData)
   return response.data
 }
+
+export async function importSampleDataApi(
+  workspace_id: number,
+): Promise<boolean> {
+  const response = await axios.get(
+    `${BASE_URL}/workflow/sample_data/${workspace_id}`,
+  )
+  return response.data
+}

frontend/src/components/Layout/Tooltips.tsx

@@ -1,30 +1,106 @@
-import { FC } from "react"
+import { FC, MouseEvent, useState } from "react"
+import { useDispatch, useSelector } from "react-redux"
 
-import GitHubIcon from "@mui/icons-material/GitHub"
-import MenuBookIcon from "@mui/icons-material/MenuBook"
-import { Tooltip } from "@mui/material"
+import { useSnackbar } from "notistack"
+
+import { Addchart, GitHub, MenuBook, OpenInNew } from "@mui/icons-material"
+import {
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Tooltip,
+} from "@mui/material"
 import IconButton from "@mui/material/IconButton"
 
+import { ConfirmDialog } from "components/common/ConfirmDialog"
+import { getExperiments } from "store/slice/Experiments/ExperimentsActions"
+import { reset } from "store/slice/VisualizeItem/VisualizeItemSlice"
+import { importSampleData } from "store/slice/Workflow/WorkflowActions"
+import { selectCurrentWorkspaceId } from "store/slice/Workspace/WorkspaceSelector"
+import { AppDispatch } from "store/store"
+
 const Tooltips: FC = () => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const menuId = "documentation-menu"
+  const open = Boolean(anchorEl)
+  const handleClickMenuIcon = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+  const handleGoToDocClick = () => {
+    window.open("https://optinist.readthedocs.io/en/latest/", "_blank")
+  }
+
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  const dispatch: AppDispatch = useDispatch()
+  const { enqueueSnackbar } = useSnackbar()
+  const workspaceId = useSelector(selectCurrentWorkspaceId)
+  const handleImportSampleDataClick = () => {
+    if (typeof workspaceId === "number") {
+      dispatch(importSampleData({ workspaceId }))
+        .unwrap()
+        .then(() => {
+          enqueueSnackbar("Sample data import success", { variant: "success" })
+          dispatch(reset())
+          dispatch(getExperiments())
+        })
+        .catch(() => {
+          enqueueSnackbar("Sample data import error", { variant: "error" })
+        })
+    }
+  }
+
   return (
     <>
       <Tooltip title="GitHub repository">
-        <IconButton
-          sx={{ mr: 1 }}
-          href="https://github.com/oist/optinist"
-          target="_blank"
-        >
-          <GitHubIcon />
+        <IconButton href="https://github.com/oist/optinist" target="_blank">
+          <GitHub />
         </IconButton>
       </Tooltip>
       <Tooltip title="Documentation">
-        <IconButton
-          href="https://optinist.readthedocs.io/en/latest/"
-          target="_blank"
-        >
-          <MenuBookIcon />
+        <IconButton onClick={handleClickMenuIcon}>
+          <MenuBook />
         </IconButton>
       </Tooltip>
+      <Menu
+        id={menuId}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          "aria-labelledby": menuId,
+          role: "listbox",
+        }}
+      >
+        <MenuItem onClick={handleGoToDocClick}>
+          <ListItemIcon>
+            <OpenInNew />
+          </ListItemIcon>
+          <ListItemText>Go to documentation page</ListItemText>
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            setDialogOpen(true)
+          }}
+        >
+          <ListItemIcon>
+            <Addchart />
+          </ListItemIcon>
+          <ListItemText>Import sample data</ListItemText>
+        </MenuItem>
+      </Menu>
+      <ConfirmDialog
+        open={dialogOpen}
+        setOpen={setDialogOpen}
+        onConfirm={handleImportSampleDataClick}
+        title="Import sample data?"
+        content={"sample data files and tutorial records will be imported."}
+        iconType="info"
+      />
     </>
   )
 }

frontend/src/components/Workspace/FlowChart/Buttons/ImportWorkflowConfig.tsx

@@ -39,7 +39,7 @@ export const ImportWorkflowConfigButton = memo(
     }
 
     return (
-      <Tooltip title="Import workflow from config file">
+      <Tooltip title="Import workflow yaml file">
         <IconButton onClick={onClick}>
           <UploadFile color="primary" />
           <input

frontend/src/store/slice/FilesTree/FilesTreeSlice.ts

@@ -9,6 +9,7 @@ import {
 import { convertToTreeNodeType } from "store/slice/FilesTree/FilesTreeUtils"
 import { uploadFile } from "store/slice/FileUploader/FileUploaderActions"
 import { FILE_TYPE_SET } from "store/slice/InputNode/InputNodeType"
+import { importSampleData } from "store/slice/Workflow/WorkflowActions"
 
 export const initialState: FilesTree = {}
 export const filesTreeSlice = createSlice({
@@ -87,6 +88,18 @@ export const filesTreeSlice = createSlice({
           state[FILE_TREE_TYPE_SET.ALL].isLatest = false
         }
       })
+      .addCase(importSampleData.fulfilled, (state) => {
+        ;[
+          FILE_TREE_TYPE_SET.IMAGE,
+          FILE_TREE_TYPE_SET.CSV,
+          FILE_TREE_TYPE_SET.HDF5,
+          FILE_TREE_TYPE_SET.ALL,
+        ].forEach((fileType) => {
+          if (state[fileType] != null) {
+            state[fileType].isLatest = false
+          }
+        })
+      })
   },
 })
 

frontend/src/store/slice/Workflow/WorkflowActions.ts

@@ -4,6 +4,7 @@ import {
   fetchWorkflowApi,
   reproduceWorkflowApi,
   importWorkflowConfigApi,
+  importSampleDataApi,
   WorkflowConfigDTO,
   WorkflowWithResultDTO,
 } from "api/workflow/Workflow"
@@ -50,3 +51,18 @@ export const importWorkflowConfig = createAsyncThunk<
     }
   },
 )
+
+export const importSampleData = createAsyncThunk<
+  boolean,
+  { workspaceId: number }
+>(
+  `${WORKFLOW_SLICE_NAME}/importSampleData`,
+  async ({ workspaceId }, thunkAPI) => {
+    try {
+      const response = await importSampleDataApi(workspaceId)
+      return response
+    } catch (e) {
+      return thunkAPI.rejectWithValue(e)
+    }
+  },
+)