Update UI : label and simplify component

src/AnnotationCreation.js

@@ -12,7 +12,7 @@ import HubIcon from '@mui/icons-material/Hub';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
 import AnnotationDrawing from './annotationForm/AnnotationDrawing';
 import AnnotationFormContent from './annotationForm/AnnotationFormContent';
-import AnnotationFormTime from './annotationForm/AnnotationFormTime';
+import AnnotationFormTarget from './annotationForm/AnnotationFormTarget';
 import {
   defaultToolState,
   geomFromAnnoTarget, timeFromAnnoTarget,
@@ -417,28 +417,31 @@ function AnnotationCreation(props) {
               icon={<HighlightAltIcon />}
               aria-label="TargetSelector"
               value={TARGET_VIEW}
+              tooltip="Target"
             />
             <StyledTab
               icon={<LayersIcon />}
-              aria-label="TargetSelector"
+              aria-label="OverlaySelector"
               value={OVERLAY_VIEW}
+              tooltip="Overlay"
             />
             <StyledTab
               icon={<LocalOfferIcon />}
-              aria-label="TargetSelector"
+              aria-label="InfosSelector"
               value={TAG_VIEW}
+              tooltip="Infos"
             />
             <StyledTab
               icon={<HubIcon />}
-              aria-label="TargetSelector"
+              aria-label="ManifestNetworkSelector"
               value={MANIFEST_LINK_VIEW}
+              tooltip="Manifest Network"
             />
           </TabList>
           <StyledTabPanel
             value={TARGET_VIEW}
           >
-            {mediaIsVideo && (
-              <AnnotationFormTime
+            <AnnotationFormTarget
               mediaIsVideo={mediaIsVideo}
               videoDuration={videoDuration}
               value={valueTime}
@@ -451,7 +454,6 @@ function AnnotationCreation(props) {
               tend={tend}
               updateTend={updateTend}
             />
-            )}
           </StyledTabPanel>
           <StyledTabPanel
             value={OVERLAY_VIEW}

src/annotationForm/AnnotationFormContent.js

@@ -4,15 +4,13 @@ import PropTypes from 'prop-types';
 import TextEditor from '../TextEditor';
 
 /** Form part for edit annotation content and body */
-function AnnotationFormContent({textBody, updateTextBody, textEditorStateBustingKey,
-}) {
+function AnnotationFormContent({ textBody, updateTextBody, textEditorStateBustingKey }) {
   return (
-    <Paper style={{padding:"5px"}}>
+    <Paper style={{ padding: '5px' }}>
       <Typography variant="overline">
         Metadata
       </Typography>
-      <Grid
-      >
+      <Grid>
         <TextEditor
           key={textEditorStateBustingKey}
           annoHtml={textBody}
@@ -24,10 +22,9 @@ function AnnotationFormContent({textBody, updateTextBody, textEditorStateBusting
 }
 
 AnnotationFormContent.propTypes = {
-  onChange: PropTypes.func,
-  textBody: PropTypes.string,
-  textEditorStateBustingKey: PropTypes.string,
-  updateTextBody: PropTypes.func,
+  textBody: PropTypes.string.isRequired,
+  textEditorStateBustingKey: PropTypes.string.isRequired,
+  updateTextBody: PropTypes.func.isRequired,
 };
 
 export default AnnotationFormContent;

src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayTool.js

@@ -71,32 +71,31 @@ function AnnotationFormOverlayTool({
               <Typography variant="overline">
                 Selected object
               </Typography>
-
-              <ul>
-                {
-                  Object.keys(currentShape).sort().map((key) => (
-                    <>
-                      { key !== 'lines' && key !== 'image' && (
-                        <li key={key}>
-                          {key}
-                          :
-                          {currentShape[key]}
-                        </li>
-                      )}
-                    </>
-                  ))
-                }
-              </ul>
+              {/* <ul> // useful for debug */}
+              {/*   { */}
+              {/*     Object.keys(currentShape).sort().map((key) => ( */}
+              {/*       <> */}
+              {/*         { key !== 'lines' && key !== 'image' && ( */}
+              {/*           <li key={key}> */}
+              {/*             {key} */}
+              {/*             : */}
+              {/*             {currentShape[key]} */}
+              {/*           </li> */}
+              {/*         )} */}
+              {/*       </> */}
+              {/*     )) */}
+              {/*   } */}
+              {/* </ul> */}
               <AnnotationFormOverlayToolOptions
                 toolState={{
                   ...toolState,
                   activeTool: currentShape.type,
                   closedMode: currentShape.closedMode,
                   fillColor: currentShape.fill,
+                  image: { id: currentShape.url },
                   strokeColor: currentShape.stroke,
                   strokeWidth: currentShape.strokeWidth,
                   text: currentShape.text,
-                  image: { id: currentShape.url },
                 }}
                 updateToolState={customUpdateToolState}
 
@@ -104,12 +103,21 @@ function AnnotationFormOverlayTool({
             </Paper>
             )
             }
+            {
+              shapes.length > 0 && (
+                <>
+                  <Typography variant="overline">
+                    Object lists
+                  </Typography>
                   <AccordionShapes
                     currentShapeId={currentShape?.id}
                     shapes={shapes}
                     deleteShape={deleteShape}
                   />
                 </>
+              )
+            }
+          </>
 
           )
       }

src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js

@@ -164,9 +164,6 @@ function AnnotationFormOverlayToolOptions({ updateToolState, toolState }) {
       {
         isShapesTool(toolState.activeTool) && (
           <Grid container>
-            <Typography variant="overline">
-              Object styles
-            </Typography>
             <Grid item xs={12}>
               <Typography variant="overline">
                 Style

src/annotationForm/AnnotationFormTime.js → src/annotationForm/AnnotationFormTarget.js

-import { Divider, Grid, Paper } from '@mui/material';
+import { Grid, Paper } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import Slider from '@mui/material/Slider';
 import ToggleButton from '@mui/material/ToggleButton';
@@ -16,8 +16,8 @@ const StyledPaper = styled(Paper)(({ theme }) => ({
 }));
 
 const ContainerSlider = styled('div')(({ theme }) => ({
-  paddingRight: '20px',
   paddingLeft: '20px',
+  paddingRight: '20px',
 }));
 
 const StyledSlider = styled(Slider)(({ theme }) => ({
@@ -59,10 +59,12 @@ const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
 }));
 
 /** Form part with time mangement, dual slider + double input. Mange Tstart and Tend value */
-function AnnotationFormTime({
-  videoDuration, value, handleChangeTime, windowid, setTstartNow, tstart, updateTstart, setTendNow, tend, updateTend, ...props
+function AnnotationFormTarget({
+  videoDuration, value, handleChangeTime, windowid, setTstartNow, tstart, updateTstart, setTendNow, tend, updateTend, mediaIsVideo,
 }) {
   return (
+    <>
+      { mediaIsVideo && (
         <StyledPaper>
           <Grid
             item
@@ -123,10 +125,13 @@ function AnnotationFormTime({
             </StyledDivTimeSelector>
           </StyledDivFormTimeContainer>
         </StyledPaper>
+      )}
+    </>
+
   );
 }
 
-AnnotationFormTime.propTypes = {
+AnnotationFormTarget.propTypes = {
   handleChangeTime: PropTypes.func.isRequired,
   mediaIsVideo: PropTypes.bool.isRequired,
   setTendNow: PropTypes.func.isRequired,
@@ -140,4 +145,4 @@ AnnotationFormTime.propTypes = {
   windowid: PropTypes.any.isRequired,
 };
 
-export default AnnotationFormTime;
+export default AnnotationFormTarget;