Fixing image carousel in viewer

src/viewer/package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.19",
+    "@mui/material": "^5.14.19",
     "@protobuf-ts/plugin": "^2.9.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

src/viewer/src/App.tsx

@@ -44,14 +44,18 @@ function App() {
       >
         <h1 style={{ textAlign: "center" }}>Cost Matrix Viewer</h1>
         <div className="costMatrix" style={{ backgroundColor: "ghostwhite" }}>
-          <ProtoLoader
-            onLoad={setCostMatrixProto}
-            messageType={MessageType.CostMatrix}
-          />
-          <ProtoLoader
-            onLoad={setMatchingResultProto}
-            messageType={MessageType.MatchingResult}
-          />
+          <div style={{display: "flex", flexDirection: "column", alignItems: "center"}}>
+            <div>
+              <ProtoLoader
+                onLoad={setCostMatrixProto}
+                messageType={MessageType.CostMatrix}
+              />
+              <ProtoLoader
+                onLoad={setMatchingResultProto}
+                messageType={MessageType.MatchingResult}
+              />
+            </div>
+          </div>
           {costMatrix && (
             <CostMatrixComponent
               costMatrix={costMatrix}

src/viewer/src/CostMatrixComponent.tsx

@@ -5,6 +5,8 @@ import { ImageCostMatrix, ZoomBlockParams } from "./ImageCostMatrix";
 import { MatchingResultElement } from "./matchingResult";
 import InteractiveCostMatrix from "./InteractiveCostMatrix";
 
+import { FormGroup, FormControlLabel, Switch } from "@mui/material";
+
 function getMatchingResultInZoomBlock(
   results: MatchingResultElement[],
   zoomParams: ZoomBlockParams
@@ -82,10 +84,24 @@ function CostMatrixComponent(props: CostMatrixProps): React.ReactElement {
         flexDirection: "column",
       }}
     >
-      <div>
-        <input id="checkbox" type="checkbox" onChange={showMatchingResult} />
-        <label htmlFor="checkbox">Show matching result</label>
-      </div>
+      <FormGroup
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "center",
+        }}
+      >
+        <FormControlLabel
+          disabled={matchingResult ? false : true}
+          control={<Switch onChange={showMatchingResult} color="secondary" />}
+          label="Matching result"
+        />
+        <FormControlLabel
+          disabled
+          control={<Switch onChange={showMatchingResult} />}
+          label="Expanded nodes"
+        />
+      </FormGroup>
       <div
         style={{
           display: "flex",

src/viewer/src/ImageCostMatrix.tsx

@@ -39,6 +39,7 @@ const ZoomTooltip = forwardRef((props: ZoomTooltipProps, pixelZoomRef: any) => {
         left: props.coordX + "px",
         border: "3px solid pink",
         visibility: props.coordX && props.coordY ? "visible" : "hidden",
+        zIndex: 2
       }}
     >
       <canvas ref={pixelZoomRef}></canvas>
@@ -262,6 +263,7 @@ function ImageCostMatrix(props: ImageCostMatrixProps): React.ReactElement {
           maxWidth: "800px",
           overflow: "auto",
           margin: "10px",
+          zIndex: 2,
         }}
       >
         <canvas

src/viewer/src/ImagesLoader.css

@@ -0,0 +1,45 @@
+.imageCarousel{
+    position: relative;
+    min-width: 200px;
+    min-height: 100px;
+    width: 600px;
+    height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+}
+
+.slide{
+    border-radius: 0.5rem;
+    box-shadow: 0px 0px 7px #666;
+    width: 100%;
+    height:100%;
+}
+
+.info{
+    position: absolute;
+    background-color:rgba(255,255,255,.8);
+    top: -1rem;
+}
+
+.arrow{
+    position: absolute;
+    width: 3rem;
+    height: 3rem;
+    color: black;
+    background-color: white;
+    box-shadow: 0px 0px 7px #666;
+    border-radius: 0.5rem;
+}
+.arrow:hover{
+    cursor: pointer;
+}
+
+.arrow-right{
+    right: 2rem;
+}
+
+.arrow-left{
+    left: 2rem;
+}

src/viewer/src/ImagesLoader.tsx

@@ -1,5 +1,11 @@
 import { useState, useEffect } from "react";
 
+import "./ImagesLoader.css"
+
+import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRounded';
+import ArrowBackIosRoundedIcon from '@mui/icons-material/ArrowBackIosRounded';
+import { Input } from '@mui/material';
+
 function readImageAsync(file: Blob) {
   return new Promise<string>((resolve, reject) => {
     let reader = new FileReader();
@@ -95,17 +101,18 @@ function ImagesLoader(props: ImageLoaderProps) {
       {images &&
         images.length > currentImageId &&
         images[currentImageId] !== undefined && (
-          <div>
-            <img src={images[currentImageId].base64Encoding} alt="preview" />
-            <p>
+          <div className="imageCarousel">
+            <img src={images[currentImageId].base64Encoding} alt="preview"  className="slide"/>
+            <p className="info">
               id: {images[currentImageId].id}; filename:{" "}
               {images[currentImageId].fileName}
             </p>
+
+            <ArrowForwardIosRoundedIcon className ="arrow arrow-right" onClick={handleNextClick}></ArrowForwardIosRoundedIcon>
+            <ArrowBackIosRoundedIcon className ="arrow arrow-left" onClick={handlePrevClick}></ArrowBackIosRoundedIcon>
           </div>
         )}
       <div>
-        <button onClick={handlePrevClick}>prev</button>
-        <button onClick={handleNextClick}>next</button>
       </div>
     </div>
   );

src/viewer/src/ProtoLoader.tsx

@@ -75,7 +75,7 @@ function ProtoLoader(props: ProtoLoaderProps): React.ReactElement {
   return (
     <div>
       <label htmlFor="folder">
-        Select *.{props.messageType.toString()}.proto file{" "}
+        Select <b>*.{props.messageType.toString()}.proto</b> file{" "}
       </label>
       <input type="file" id="fileInput" onChange={processFile}></input>
     </div>