lost-sia 2.0.1-alpha13 → 2.0.1-alpha14

package/src/Canvas/LabelInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState } from 'react'
 import {
   CDropdown,
   CDropdownMenu,
@@ -7,17 +7,17 @@ import {
   CDropdownDivider,
   CDropdownToggle,
   CPopover,
-} from "@coreui/react";
-import { Label } from "../types";
+} from '@coreui/react'
+import { Label } from '../types'
 
 type LabelInputProps = {
-  defaultLabelId?: number;
-  isVisible: boolean;
-  selectedLabelsIds: number[];
-  possibleLabels: Label[];
-  isMultilabel?: boolean;
-  onLabelSelect: (selectedLabelIds: number[]) => void;
-};
+  defaultLabelId?: number
+  isVisible: boolean
+  selectedLabelsIds: number[]
+  possibleLabels: Label[]
+  isMultilabel?: boolean
+  onLabelSelect: (selectedLabelIds: number[]) => void
+}
 
 const LabelInput = ({
   defaultLabelId,
@@ -27,32 +27,32 @@ const LabelInput = ({
   isMultilabel = false,
   onLabelSelect,
 }: LabelInputProps) => {
-  const [filter, setFilter] = useState("");
+  const [filter, setFilter] = useState('')
 
   const filteredLabels: Label[] = possibleLabels.filter((label: Label) =>
     label.name.toLowerCase().includes(filter.toLowerCase()),
-  );
+  )
 
   const updateSelectedLabels = (clickedLabel: Label) => {
-    let newLabelIds: number[] = [];
+    let newLabelIds: number[] = []
 
     if (isMultilabel) {
-      newLabelIds = [...selectedLabelsIds];
+      newLabelIds = [...selectedLabelsIds]
       // check if item in list (get its index if so)
-      const foundIndex: number = selectedLabelsIds.indexOf(clickedLabel.id);
+      const foundIndex: number = selectedLabelsIds.indexOf(clickedLabel.id)
       // add label if not in list, remove label if in list
-      if (foundIndex !== -1) newLabelIds.splice(foundIndex, 1);
-      else newLabelIds.push(clickedLabel.id);
+      if (foundIndex !== -1) newLabelIds.splice(foundIndex, 1)
+      else newLabelIds.push(clickedLabel.id)
     }
     // single-label: just replace list with clicked item
-    else newLabelIds = [clickedLabel.id];
+    else newLabelIds = [clickedLabel.id]
 
-    onLabelSelect(newLabelIds);
-  };
+    onLabelSelect(newLabelIds)
+  }
 
   const defaultLabel: Label | undefined = defaultLabelId
     ? possibleLabels.find((label: Label) => label.id === defaultLabelId)
-    : undefined;
+    : undefined
 
   return (
     <>
@@ -63,13 +63,9 @@ const LabelInput = ({
         <div style={{ marginLeft: 80 }} />
       </CPopover>
 
-      <CDropdown
-        visible={isVisible}
-        autoClose={false}
-        style={{ marginTop: -25 }}
-      >
+      <CDropdown visible={isVisible} autoClose={false} style={{ marginTop: -25 }}>
         {/* this invisible toggle has to be here, othervise the menu is not showing as intended */}
-        <CDropdownToggle style={{ display: "none" }} />
+        <CDropdownToggle style={{ display: 'none' }} />
         <CDropdownMenu>
           <div className="px-3 py-2">
             <CFormInput
@@ -82,10 +78,7 @@ const LabelInput = ({
           <CDropdownDivider />
           {filteredLabels.length > 0 ? (
             filteredLabels.map((label: Label) => (
-              <CDropdownItem
-                key={label.id}
-                onClick={() => updateSelectedLabels(label)}
-              >
+              <CDropdownItem key={label.id} onClick={() => updateSelectedLabels(label)}>
                 {label.name}
               </CDropdownItem>
             ))
@@ -95,7 +88,7 @@ const LabelInput = ({
         </CDropdownMenu>
       </CDropdown>
     </>
-  );
-};
+  )
+}
 
-export default LabelInput;
+export default LabelInput

package/src/IconButton.tsx

@@ -0,0 +1,119 @@
+import { faSync, IconDefinition } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { CButton, CTooltip } from '@coreui/react'
+import { CSSProperties } from 'react'
+import { SizeProp } from '@fortawesome/fontawesome-svg-core'
+
+type IconButtonProps = {
+  loadingSize?: SizeProp
+  isLoading?: boolean
+  margin?: number
+  icon?: IconDefinition
+  text?: string
+  size?: 'sm' | 'lg' | undefined
+  isTextLeft?: boolean
+  style?: CSSProperties
+  id?: string
+  type?: 'button' | 'submit' | 'reset' | undefined
+  disabled?: boolean
+  onClick?: () => void
+  className?: string
+  color?: string
+  isOutline?: boolean
+  tooltip?: string
+  ttipPlacement?: 'top' | 'left' | 'right' | 'auto' | 'bottom' | undefined
+  shape?: string
+}
+
+const IconButton = ({
+  loadingSize = '1x',
+  isLoading = false,
+  margin = 5,
+  icon,
+  text = '',
+  size,
+  isTextLeft = false,
+  style = {},
+  id = undefined,
+  type = 'button',
+  disabled = false,
+  onClick,
+  className = '',
+  color = 'primary',
+  isOutline = true,
+  tooltip = '',
+  ttipPlacement = 'top',
+  shape = '',
+}: IconButtonProps) => {
+  const iconButtonIcon: IconDefinition | undefined = icon
+
+  const buttonVariant: 'ghost' | 'outline' | undefined = isOutline ? 'outline' : undefined
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <div className="flex justify-center items-center">
+          <FontAwesomeIcon
+            className="mr-3"
+            size={loadingSize || '2x'}
+            icon={faSync}
+            spin
+          />
+          <span className="text-center">Loading</span>
+        </div>
+      )
+    }
+    const ic =
+      iconButtonIcon && iconButtonIcon.iconName && iconButtonIcon.prefix ? (
+        <FontAwesomeIcon key="icon" icon={iconButtonIcon} size={loadingSize || '2x'} />
+      ) : null
+    const iconButtonText = text ? (
+      <span key="text" style={{ marginLeft: margin, marginRight: margin }}>
+        {text}
+      </span>
+    ) : null
+    if (isTextLeft) {
+      return [iconButtonText, ic]
+    }
+    return [ic, iconButtonText]
+  }
+
+  // because visible=false does not seem to work...
+  if (tooltip != '') {
+    return (
+      <CTooltip content={tooltip} placement={ttipPlacement}>
+        <CButton
+          id={id}
+          size={size}
+          // type={type}
+          className={className}
+          style={style}
+          variant={buttonVariant}
+          disabled={disabled || isLoading}
+          onClick={onClick}
+          color={disabled || isLoading ? 'secondary' : color}
+          shape={shape}
+        >
+          {renderContent()}
+        </CButton>
+      </CTooltip>
+    )
+  }
+
+  return (
+    <CButton
+      size={size}
+      type={type}
+      className={className}
+      style={style}
+      variant={buttonVariant}
+      disabled={disabled || isLoading}
+      onClick={onClick}
+      color={disabled || isLoading ? 'secondary' : color}
+    >
+      {renderContent()}
+    </CButton>
+  )
+}
+
+export default IconButton

package/src/InfoBoxes/AnnoDetails.jsx

@@ -1,54 +1,54 @@
-import React, { useState, useEffect, useRef } from "react";
-import { List, TextArea, Form, Label, Icon } from "semantic-ui-react";
-import InfoBox from "./InfoBox";
-import PopUp from "../SiaPopup";
+import React, { useState, useEffect, useRef } from 'react'
+import { List, TextArea, Form, Label, Icon } from 'semantic-ui-react'
+import InfoBox from './InfoBox'
+import PopUp from '../SiaPopup'
 
 const AnnoDetails = (props) => {
-  const [comment, setComment] = useState("");
-  const [example, setExample] = useState(false);
-  const [showSaveBtn, setShowSaveBtn] = useState(false);
-  const tARef = useRef();
+  const [comment, setComment] = useState('')
+  const [example, setExample] = useState(false)
+  const [showSaveBtn, setShowSaveBtn] = useState(false)
+  const tARef = useRef()
   useEffect(() => {
     if (props.anno) {
       if (props.anno.comment) {
-        setComment(props.anno.comment);
+        setComment(props.anno.comment)
       } else {
-        setComment("");
+        setComment('')
       }
     }
-  }, [props.anno]);
+  }, [props.anno])
 
   useEffect(() => {
     if (tARef.current) {
-      tARef.current.focus();
+      tARef.current.focus()
     }
-  }, [props.commentInputTrigger]);
+  }, [props.commentInputTrigger])
 
   const onDismiss = () => {
     if (props.onDismiss) {
-      props.onDismiss();
+      props.onDismiss()
     }
-  };
+  }
 
   const onCommentUpdate = () => {
     if (props.onCommentUpdate) {
-      props.onCommentUpdate(comment);
+      props.onCommentUpdate(comment)
     }
-    setShowSaveBtn(false);
-  };
+    setShowSaveBtn(false)
+  }
 
   const onMarkExampleClick = () => {
     // setExample(!example)
     if (props.onMarkExample) {
-      props.onMarkExample(props.anno);
+      props.onMarkExample(props.anno)
     }
-  };
+  }
 
   const renderSaveBtn = () => {
     if (showSaveBtn) {
-      return <Label as="a" corner="right" icon="save" color="red"></Label>;
+      return <Label as="a" corner="right" icon="save" color="red"></Label>
     }
-  };
+  }
 
   const renderComment = () => {
     return (
@@ -66,36 +66,36 @@ const AnnoDetails = (props) => {
           ></TextArea>
         </Form>
       </div>
-    );
-  };
+    )
+  }
   const renderLabels = () => {
     if (props.anno) {
-      const selectedLabelIds = props.anno.labelIds;
-      if (!selectedLabelIds) return "No Label";
+      const selectedLabelIds = props.anno.labelIds
+      if (!selectedLabelIds) return 'No Label'
 
-      let lbls = "";
+      let lbls = ''
       props.anno.labelIds.forEach((lbl, idx) => {
         const labelObject = props.possibleLabels.find((el) => {
-          return el.id === lbl;
-        });
-        if (idx > 0) lbls += ", ";
-        lbls += labelObject.label;
-      });
-      if (!lbls) return "No Label";
-      return lbls;
+          return el.id === lbl
+        })
+        if (idx > 0) lbls += ', '
+        lbls += labelObject.label
+      })
+      if (!lbls) return 'No Label'
+      return lbls
     } else {
-      return "No Label";
+      return 'No Label'
     }
-  };
+  }
 
   const renderExampleMark = () => {
-    if (!props.allowedToMarkExample) return null;
-    let color = "grey";
-    let iconName = "bookmark outline";
+    if (!props.allowedToMarkExample) return null
+    let color = 'grey'
+    let iconName = 'bookmark outline'
     if (props.anno) {
       if (props.anno.isExample) {
-        color = "yellow";
-        iconName = "bookmark";
+        color = 'yellow'
+        iconName = 'bookmark'
       }
     }
     const mark = (
@@ -106,19 +106,19 @@ const AnnoDetails = (props) => {
         size="medium"
         corner="left"
         onClick={() => {
-          onMarkExampleClick();
+          onMarkExampleClick()
         }}
       >
         <Icon name={iconName} />
       </Label>
-    );
+    )
     return (
       <PopUp
         content="Mark this annotation as example for other annotators"
         trigger={mark}
       />
-    );
-  };
+    )
+  }
 
   const renderDescription = () => {
     if (props.anno) {
@@ -136,7 +136,7 @@ const AnnoDetails = (props) => {
             <List.Item icon="tag" content={renderLabels()} />
             <List.Item
               icon="time"
-              content={`${props.anno.annoTime.toLocaleString("us", {
+              content={`${props.anno.annoTime.toLocaleString('us', {
                 minimumFractionDigits: 2,
                 maximumFractionDigits: 2,
               })} seconds`}
@@ -145,21 +145,21 @@ const AnnoDetails = (props) => {
           </List>
           {renderComment()}
         </div>
-      );
+      )
     } else {
-      return "No annotation selected!";
+      return 'No annotation selected!'
     }
-  };
+  }
 
   return (
     <InfoBox
-      header={"Annotation Details"}
+      header={'Annotation Details'}
       content={renderDescription()}
       visible={props.visible}
       defaultPos={props.defaultPos}
       onDismiss={(e) => onDismiss()}
     />
-  );
-};
+  )
+}
 
-export default AnnoDetails;
+export default AnnoDetails

package/src/InfoBoxes/AnnoStats.jsx

@@ -1,41 +1,41 @@
-import React, { useState, useEffect } from "react";
-import { List, Label } from "semantic-ui-react";
-import InfoBox from "./InfoBox";
-import * as colorlut from "../utils/color";
+import React, { useState, useEffect } from 'react'
+import { List, Label } from 'semantic-ui-react'
+import InfoBox from './InfoBox'
+import * as colorlut from '../utils/color'
 // import actions from '../../../../actions'
 // import * as transform from '../utils/transform'
 // const { siaShowImgBar } = actions
 
 const AnnoStats = (props) => {
-  const [hideList, setHideList] = useState([]);
+  const [hideList, setHideList] = useState([])
 
   useEffect(() => {
-    setHideList([]);
-  }, [props.imgLoadCount]);
+    setHideList([])
+  }, [props.imgLoadCount])
 
   const onDismiss = () => {
     if (props.onDismiss) {
-      props.onDismiss();
+      props.onDismiss()
     }
-  };
+  }
 
   const onLblClick = (lbl) => {
-    let hideLbl = false;
+    let hideLbl = false
     if (hideList.includes(lbl.id)) {
-      setHideList(hideList.filter((e) => e !== lbl.id));
-      hideLbl = false;
+      setHideList(hideList.filter((e) => e !== lbl.id))
+      hideLbl = false
     } else {
       // hideList.push(lbl.id)
-      setHideList([...hideList, lbl.id]);
-      hideLbl = true;
+      setHideList([...hideList, lbl.id])
+      hideLbl = true
     }
     if (props.onHideLbl) {
-      props.onHideLbl(lbl, hideLbl);
+      props.onHideLbl(lbl, hideLbl)
     }
-  };
+  }
 
   const renderRow = (s) => {
-    const opacity = hideList.includes(s.id) ? 0.5 : 1.0;
+    const opacity = hideList.includes(s.id) ? 0.5 : 1.0
     return (
       <List.Item key={s.id}>
         <List.Content>
@@ -50,57 +50,57 @@ const AnnoStats = (props) => {
           </Label>
         </List.Content>
       </List.Item>
-    );
-  };
+    )
+  }
 
   const renderRows = () => {
-    let stats = {};
+    let stats = {}
     props.annos.forEach((a) => {
       // // console.log('render rows', a)
-      if (a.status !== "deleted") {
+      if (a.status !== 'deleted') {
         a.labelIds.forEach((lblId) => {
           if (lblId in stats) {
-            stats[lblId] += 1;
+            stats[lblId] += 1
           } else {
-            stats[lblId] = 1;
+            stats[lblId] = 1
           }
-        });
+        })
         if (a.labelIds.length === 0) {
           if ((-1) in stats) {
-            stats[-1] += 1;
+            stats[-1] += 1
           } else {
-            stats[-1] = 1;
+            stats[-1] = 1
           }
         }
       }
-    });
+    })
     const res = Object.entries(stats).map(([key, value]) => {
       let lbl = props.possibleLabels.find((e) => {
-        return e.id === parseInt(key);
-      });
+        return e.id === parseInt(key)
+      })
       if (!lbl) {
-        lbl = { id: -1, label: "No Label", color: colorlut.getDefaultColor() };
+        lbl = { id: -1, label: 'No Label', color: colorlut.getDefaultColor() }
       }
 
-      lbl.amount = value;
+      lbl.amount = value
       // return renderRow({class:idToLbl[key], amount:value, color:idToColor[key]})
-      return renderRow(lbl);
-    });
-    return res;
-  };
+      return renderRow(lbl)
+    })
+    return res
+  }
   const renderDescription = () => {
-    return <List>{renderRows()}</List>;
-  };
+    return <List>{renderRows()}</List>
+  }
 
   return (
     <InfoBox
-      header={"Annotations per Label"}
+      header={'Annotations per Label'}
       content={renderDescription()}
       visible={props.visible}
       defaultPos={props.defaultPos}
       onDismiss={(e) => onDismiss()}
     />
-  );
-};
+  )
+}
 
-export default AnnoStats;
+export default AnnoStats

package/src/InfoBoxes/InfoBox.jsx

@@ -1,57 +1,57 @@
-import React, { Component } from "react";
-import { Header, Message } from "semantic-ui-react";
-import Draggable from "react-draggable";
+import React, { Component } from 'react'
+import { Header, Message } from 'semantic-ui-react'
+import Draggable from 'react-draggable'
 
 class InfoBox extends Component {
   constructor(props) {
-    super(props);
+    super(props)
     this.state = {
       style: {
-        position: "fixed",
+        position: 'fixed',
         top: 200,
         left: 200,
         width: 250,
       },
-    };
+    }
   }
 
   componentDidMount() {
-    this.updateStyle();
+    this.updateStyle()
   }
 
   componentDidUpdate(prevProps) {
     if (this.props.defaultPos !== prevProps.defaultPos) {
-      this.updateStyle();
+      this.updateStyle()
     }
   }
 
   handleOnStop(e) {
     if (this.props.onStop) {
-      this.props.onStop(e);
+      this.props.onStop(e)
     }
   }
 
   updateStyle() {
     this.setState({
       style: { ...this.state.style, ...this.props.defaultPos },
-    });
+    })
   }
 
   onDismiss(e) {
     if (this.props.onDismiss) {
-      this.props.onDismiss(e);
+      this.props.onDismiss(e)
     }
   }
 
   render() {
-    if (!this.props.visible) return null;
+    if (!this.props.visible) return null
     return (
       <Draggable handle=".handle" onStop={(e) => this.handleOnStop(e)}>
         <div style={this.state.style}>
           <Message
             style={{ opacity: 0.98 }}
             onDismiss={(e) => {
-              this.onDismiss(e);
+              this.onDismiss(e)
             }}
             size="small"
           >
@@ -59,7 +59,7 @@ class InfoBox extends Component {
               textAlign="center"
               as="h5"
               className="handle"
-              style={{ cursor: "grab" }}
+              style={{ cursor: 'grab' }}
             >
               {this.props.header}
             </Header>
@@ -69,8 +69,8 @@ class InfoBox extends Component {
           </Message>
         </div>
       </Draggable>
-    );
+    )
   }
 }
 
-export default InfoBox;
+export default InfoBox