feat(ui-debug): add icon and a component for images

webapp/src/components/App/Singlestudy/explore/Debug/Data/Image.tsx

@@ -0,0 +1,11 @@
+import ViewWrapper from "../../../../../common/page/ViewWrapper";
+
+function Image() {
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
+  return <ViewWrapper>Cannot diplay image</ViewWrapper>;
+}
+
+export default Image;

webapp/src/components/App/Singlestudy/explore/Debug/Data/index.tsx

@@ -1,18 +1,25 @@
 import Text from "./Text";
+import Image from "./Image";
 import Json from "./Json";
 import Matrix from "./Matrix";
-import type { FileInfo } from "../utils";
-import { Box } from "@mui/material";
+import type { FileInfo, FileType } from "../utils";
 
 interface Props extends FileInfo {
   studyId: string;
 }
 
-const componentByFileType = {
+interface DataComponentProps {
+  studyId: string;
+  path: string;
+}
+type DataComponent = React.ComponentType<DataComponentProps>;
+
+const componentByFileType: Record<FileType, DataComponent> = {
   matrix: Matrix,
   json: Json,
-  file: Text,
-  folder: Box,
+  text: Text,
+  image: Image,
+  folder: ({ path }) => path,
 } as const;
 
 function Data({ studyId, fileType, filePath }: Props) {

webapp/src/components/App/Singlestudy/explore/Debug/utils.ts

@@ -1,5 +1,6 @@
 import DataObjectIcon from "@mui/icons-material/DataObject";
 import TextSnippetIcon from "@mui/icons-material/TextSnippet";
+import ImageIcon from "@mui/icons-material/Image";
 import FolderIcon from "@mui/icons-material/Folder";
 import DatasetIcon from "@mui/icons-material/Dataset";
 import { SvgIconComponent } from "@mui/icons-material";
@@ -9,7 +10,7 @@ import * as RA from "ramda-adjunct";
 // Types
 ////////////////////////////////////////////////////////////////
 
-export type FileType = "json" | "matrix" | "file" | "folder";
+export type FileType = "json" | "matrix" | "text" | "image" | "folder";
 
 export interface FileInfo {
   fileType: FileType;
@@ -32,8 +33,9 @@ export type TreeData = TreeFolder | TreeFile;
 const iconByFileType: Record<FileType, SvgIconComponent> = {
   matrix: DatasetIcon,
   json: DataObjectIcon,
+  text: TextSnippetIcon,
+  image: ImageIcon,
   folder: FolderIcon,
-  file: TextSnippetIcon,
 } as const;
 
 /**
@@ -67,6 +69,9 @@ export function getFileType(treeData: TreeData): FileType {
     if (treeData.startsWith("json://") || treeData.endsWith(".json")) {
       return "json";
     }
+    if (treeData.startsWith("file://") && treeData.endsWith(".ico")) {
+      return "image";
+    }
   }
-  return isFolder(treeData) ? "folder" : "file";
+  return isFolder(treeData) ? "folder" : "text";
 }