lost-sia 2.0.1-alpha8 → 3.0.0

package/src/InfoBoxes/InfoBoxArea.jsx

@@ -1,44 +1,44 @@
-import { Component } from "react";
-import AnnoDetails from "./AnnoDetails";
-import AnnoStats from "./AnnoStats";
-import LabelInfo from "./LabelInfo";
+import { Component } from 'react'
+import AnnoDetails from './AnnoDetails'
+import AnnoStats from './AnnoStats'
+import LabelInfo from './LabelInfo'
 
 class InfoBoxes extends Component {
   constructor(props) {
-    super(props);
+    super(props)
     this.state = {
       position: {
         top: 0,
         left: 0,
       },
-    };
+    }
   }
 
   componentDidMount() {
-    this.updateLayout();
+    this.updateLayout()
   }
 
   componentDidUpdate(prevProps) {
     if (this.props.layoutUpdate !== prevProps.layoutUpdate) {
-      this.updateLayout();
+      this.updateLayout()
     }
     if (this.props.commentInputTrigger !== prevProps.commentInputTrigger) {
       if (!this.props.uiConfig.annoDetails.visible) {
-        this.showAnnoDetails(true);
+        this.showAnnoDetails(true)
       }
     }
   }
 
   updateLayout() {
     if (this.props.container.current) {
-      const container = this.props.container.current.getBoundingClientRect();
+      const container = this.props.container.current.getBoundingClientRect()
       this.setState({
         position: {
           ...this.state.position,
           left: container.right - 250,
           top: container.top,
         },
-      });
+      })
     }
   }
 
@@ -49,59 +49,59 @@ class InfoBoxes extends Component {
         ...this.props.uiConfig.annoDetails,
         visible: show,
       },
-    });
+    })
   }
 
   onDismiss(type) {
     if (this.props.onUiConfigUpdate) {
       switch (type) {
-        case "AnnoDetails":
-          this.showAnnoDetails(false);
-          break;
-        case "LabelInfo":
+        case 'AnnoDetails':
+          this.showAnnoDetails(false)
+          break
+        case 'LabelInfo':
           this.props.onUiConfigUpdate({
             ...this.props.uiConfig,
             labelInfo: {
               ...this.props.uiConfig.labelInfo,
               visible: false,
             },
-          });
-          break;
-        case "AnnoStats":
+          })
+          break
+        case 'AnnoStats':
           this.props.onUiConfigUpdate({
             ...this.props.uiConfig,
             annoStats: {
               ...this.props.uiConfig.annoStats,
               visible: false,
             },
-          });
-          break;
+          })
+          break
         default:
-          break;
+          break
       }
     }
   }
 
   onCommentUpdate(comment) {
     if (this.props.onCommentUpdate) {
-      this.props.onCommentUpdate(comment);
+      this.props.onCommentUpdate(comment)
     }
   }
 
   onMarkExample(anno) {
     if (this.props.onMarkExample) {
-      this.props.onMarkExample(anno);
+      this.props.onMarkExample(anno)
     }
   }
 
   onHideLbl(lbl, hide) {
     if (this.props.onHideLbl) {
-      this.props.onHideLbl(lbl, hide);
+      this.props.onHideLbl(lbl, hide)
     }
   }
 
   render() {
-    if (!this.props.annos) return null;
+    if (!this.props.annos) return null
     // if (!this.props.selectedAnno) return null
     return (
       <div>
@@ -109,12 +109,10 @@ class InfoBoxes extends Component {
           selectedAnno={this.props.selectedAnno}
           possibleLabels={this.props.possibleLabels}
           defaultPos={this.state.position}
-          onDismiss={() => this.onDismiss("LabelInfo")}
+          onDismiss={() => this.onDismiss('LabelInfo')}
           visible={this.props.uiConfig.labelInfo.visible}
           onGetAnnoExample={(exampleArgs) =>
-            this.props.onGetAnnoExample
-              ? this.props.onGetAnnoExample(exampleArgs)
-              : {}
+            this.props.onGetAnnoExample ? this.props.onGetAnnoExample(exampleArgs) : {}
           }
           exampleImg={this.props.exampleImg}
         />
@@ -125,7 +123,7 @@ class InfoBoxes extends Component {
             left: this.state.position.left - 300,
             top: this.state.position.top,
           }}
-          onDismiss={() => this.onDismiss("AnnoDetails")}
+          onDismiss={() => this.onDismiss('AnnoDetails')}
           onCommentUpdate={(comment) => this.onCommentUpdate(comment)}
           onMarkExample={(anno) => this.onMarkExample(anno)}
           allowedToMarkExample={this.props.allowedToMarkExample}
@@ -141,14 +139,14 @@ class InfoBoxes extends Component {
             top: this.state.position.top + 400,
           }}
           // defaultPos={this.state.position}
-          onDismiss={() => this.onDismiss("AnnoStats")}
+          onDismiss={() => this.onDismiss('AnnoStats')}
           onHideLbl={(lbl, hide) => this.onHideLbl(lbl, hide)}
           visible={this.props.uiConfig.annoStats.visible}
           imgLoadCount={this.props.imgLoadCount}
         />
       </div>
-    );
+    )
   }
 }
 
-export default InfoBoxes;
+export default InfoBoxes

package/src/InfoBoxes/LabelInfo.jsx

@@ -1,51 +1,51 @@
-import React, { useEffect, useState } from "react";
-import InfoBox from "./InfoBox";
-import SiaPopup from "../SiaPopup";
-import AnnoExampleViewer from "../AnnoExampleViewer";
+import React, { useEffect, useState } from 'react'
+import InfoBox from './InfoBox'
+import SiaPopup from '../SiaPopup'
+import AnnoExampleViewer from '../AnnoExampleViewer'
 const LabelInfo = (props) => {
-  const [showExampleViewer, setShowExampleViewer] = useState(false);
-  const [myLbl, setMyLbl] = useState(undefined);
+  const [showExampleViewer, setShowExampleViewer] = useState(false)
+  const [myLbl, setMyLbl] = useState(undefined)
   // const { data: exampleImg, mutate: getAnnoExample } = exampleApi.useGetAnnoExampleImg({})
   useEffect(() => {
     if (props.selectedAnno) {
-      const selectedLabelIds = props.selectedAnno.labelIds;
+      const selectedLabelIds = props.selectedAnno.labelIds
       if (selectedLabelIds) {
         const lbl = props.possibleLabels.find((e) => {
-          return selectedLabelIds[0] === e.id;
-        });
+          return selectedLabelIds[0] === e.id
+        })
         if (lbl) {
           if (lbl !== myLbl) {
-            setMyLbl(lbl);
+            setMyLbl(lbl)
             if (props.visible)
               // getAnnoExample({llId:lbl.id, type:'annoBased', drawAnno: true, addContext:0.05})
-              requestImg(lbl, props.selectedAnno);
+              requestImg(lbl, props.selectedAnno)
           }
         }
       }
     }
-  }, [props.selectedAnno]);
+  }, [props.selectedAnno])
   const onDismiss = () => {
     if (props.onDismiss) {
-      props.onDismiss();
+      props.onDismiss()
     }
-  };
+  }
 
   const requestImg = (lbl, anno) => {
     if (props.onGetAnnoExample) {
-      props.onGetAnnoExample({ lbl: lbl, anno: anno });
+      props.onGetAnnoExample({ lbl: lbl, anno: anno })
     }
-  };
+  }
 
   const handleImgClick = () => {
     // setShowExampleViewer(true)
     // requestImg(myLbl, props.selectedAnno)
 
-    setShowExampleViewer(true);
+    setShowExampleViewer(true)
     // getAnnoExample({llId:myLbl.id, type:'annoBased', drawAnno: true, addContext:0.05})
-  };
+  }
 
   const renderExampleImg = () => {
-    if (!props.exampleImg) return null;
+    if (!props.exampleImg) return null
     return (
       <div>
         <h4 onClick={() => handleImgClick()}>Example:</h4>
@@ -54,14 +54,14 @@ const LabelInfo = (props) => {
             <img
               src={props.exampleImg.img}
               onClick={() => handleImgClick()}
-              style={{ borderRadius: 25, width: "100%" }}
+              style={{ borderRadius: 25, width: '100%' }}
             />
           }
-          content={"Click on image to view more examples"}
+          content={'Click on image to view more examples'}
         />
       </div>
-    );
-  };
+    )
+  }
 
   const renderDescription = () => {
     // if (props.selectedAnno){
@@ -71,7 +71,7 @@ const LabelInfo = (props) => {
     // const lbl = props.possibleLabels.find( e => {
     //     return selectedLabelIds[0] === e.id
     // })
-    if (!myLbl) return "No Label";
+    if (!myLbl) return 'No Label'
     return (
       <div>
         <h4>{myLbl.label}</h4>
@@ -80,18 +80,18 @@ const LabelInfo = (props) => {
         <AnnoExampleViewer
           onRequestExample={() => requestImg(myLbl, props.selectedAnno)}
           onClose={() => {
-            setShowExampleViewer(false);
+            setShowExampleViewer(false)
           }}
           active={showExampleViewer}
           lbl={myLbl}
           exampleImg={props.exampleImg}
         />
       </div>
-    );
+    )
     // } else {
     //     return 'No Label'
     // }
-  };
+  }
 
   return (
     <InfoBox
@@ -101,7 +101,7 @@ const LabelInfo = (props) => {
       defaultPos={props.defaultPos}
       onDismiss={() => onDismiss()}
     />
-  );
-};
+  )
+}
 
-export default LabelInfo;
+export default LabelInfo

package/src/SIASettingButton.jsx

@@ -1,38 +1,38 @@
-import React, { Component } from "react";
+import React, { Component } from 'react'
 
-import * as tbe from "./types/toolbarEvents";
-import { faCog } from "@fortawesome/free-solid-svg-icons";
-import { CFormSwitch, CPopover } from "@coreui/react";
-import ToolbarItem from "./ToolbarItem";
+import * as tbe from './types/toolbarEvents'
+import { faCog } from '@fortawesome/free-solid-svg-icons'
+import { CFormSwitch, CPopover } from '@coreui/react'
+import ToolbarItem from './ToolbarItem'
 class SIASettingButton extends Component {
   constructor(props) {
-    super(props);
-    this.state = {};
+    super(props)
+    this.state = {}
   }
 
   triggerEvent(e, data) {
     if (this.props.onSettingEvent) {
-      this.props.onSettingEvent(e, data);
+      this.props.onSettingEvent(e, data)
     }
   }
   toggleAnnoDetails() {
-    this.triggerEvent(tbe.SHOW_ANNO_DETAILS);
+    this.triggerEvent(tbe.SHOW_ANNO_DETAILS)
   }
 
   toggleLabelInfo() {
-    this.triggerEvent(tbe.SHOW_LABEL_INFO);
+    this.triggerEvent(tbe.SHOW_LABEL_INFO)
   }
 
   toggleAnnoStats() {
-    this.triggerEvent(tbe.SHOW_ANNO_STATS);
+    this.triggerEvent(tbe.SHOW_ANNO_STATS)
   }
 
   handleStrokeWidthChange(e) {
-    this.triggerEvent(tbe.EDIT_STROKE_WIDTH, parseInt(e.target.value));
+    this.triggerEvent(tbe.EDIT_STROKE_WIDTH, parseInt(e.target.value))
   }
 
   handleNodeRadiusChange(e) {
-    this.triggerEvent(tbe.EDIT_NODE_RADIUS, parseInt(e.target.value));
+    this.triggerEvent(tbe.EDIT_NODE_RADIUS, parseInt(e.target.value))
   }
 
   renderInfoBoxContent() {
@@ -58,26 +58,26 @@ class SIASettingButton extends Component {
           onClick={() => this.toggleAnnoStats()}
         />
       </div>
-    );
+    )
   }
   renderInfoBoxes() {
-    if (!this.props.enabled) return null;
+    if (!this.props.enabled) return null
     if (this.props.enabled === true) {
-      return this.renderInfoBoxContent();
+      return this.renderInfoBoxContent()
     } else {
       if (this.props.enabled.infoBoxes) {
-        return this.renderInfoBoxContent();
+        return this.renderInfoBoxContent()
       }
     }
   }
 
   renderAnnoStyle() {
-    if (!this.props.enabled) return null;
+    if (!this.props.enabled) return null
     if (this.props.enabled === true) {
-      return this.renderAnnoStyleContent();
+      return this.renderAnnoStyleContent()
     } else {
       if (this.props.enabled.annoStyle) {
-        return this.renderAnnoStyleContent();
+        return this.renderAnnoStyleContent()
       }
     }
   }
@@ -102,25 +102,25 @@ class SIASettingButton extends Component {
           onChange={(e) => this.handleNodeRadiusChange(e)}
         />
       </div>
-    );
+    )
   }
 
   render() {
-    if (!this.props.uiConfig) return null;
+    if (!this.props.uiConfig) return null
     const popupContent = (
       <div>
         {this.renderInfoBoxes()}
         {this.renderAnnoStyle()}
       </div>
-    );
+    )
     return (
       <CPopover content={popupContent} placement="right">
         <span>
           <ToolbarItem faIcon={faCog} />
         </span>
       </CPopover>
-    );
+    )
   }
 }
 
-export default SIASettingButton;
+export default SIASettingButton