lost-sia 2.0.1-alpha8 → 3.0.0

package/src/ToolBar.jsx

@@ -1,463 +0,0 @@
-import {
-  faPaperPlane,
-  faSquare,
-  faTrashCan,
-} from "@fortawesome/free-regular-svg-icons";
-import {
-  faArrowLeft,
-  faArrowRight,
-  faBan,
-  faCheck,
-  faMaximize,
-  faMinusCircle,
-  faPlusCircle,
-  faQuestion,
-  faSave,
-  faSearch,
-  faTag,
-  faTrash,
-  faVectorSquare,
-} from "@fortawesome/free-solid-svg-icons";
-import React, { useEffect, useRef, useState } from "react";
-import { Button, Card } from "semantic-ui-react";
-import Prompt from "./Prompt";
-import SIAFilterButton from "./SIAFilterButton";
-import SIASettingButton from "./SIASettingButton";
-import "./Toolbar.css";
-
-import { CSidebar, CSidebarNav } from "@coreui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import ToolbarItem from "./ToolbarItem";
-import * as tbe from "./types/toolbarEvents";
-import * as TOOLS from "./types/tools";
-import * as siaIcons from "./utils/siaIcons";
-
-const ToolBar = (props) => {
-  const [position, setPosition] = useState({
-    left: 0,
-    top: 5,
-    width: 40,
-  });
-  const [showFinishPrompt, setShowFinishPrompt] = useState(false);
-  const [showHelp, setShowHelp] = useState(false);
-
-  const toolBarGroup = useRef(null);
-
-  const toolbarItemStyle = { background: "#1b1c1d" };
-
-  // if (prevState.fullscreenMode !== this.state.fullscreenMode){
-  //     this.props.siaSetFullscreen(this.state.fullscreenMode)
-  // }
-
-  useEffect(() => {
-    calcPosition();
-  }, [props.layoutUpdate, props.svg]);
-
-  const onClick = (e, tool) => {
-    triggerToolBarEvent(tbe.TOOL_SELECTED, tool);
-  };
-
-  const calcPosition = () => {
-    if (!props.enabled) return;
-    const tb = toolBarGroup.current.getBoundingClientRect();
-    if (tb) {
-      if (props.svg) {
-        let toolBarTop = props.svg.top + props.svg.height / 6;
-        setPosition({
-          ...position,
-          left: props.svg.left - 55,
-          top: toolBarTop,
-        });
-      }
-    }
-  };
-
-  const getNextImg = () => {
-    // this.props.siaGetNextImage(this.props.imageMeta.id)
-    triggerToolBarEvent(tbe.GET_NEXT_IMAGE);
-  };
-
-  const getPrevImg = () => {
-    // this.props.siaGetPrevImage(this.props.imageMeta.id)
-    triggerToolBarEvent(tbe.GET_PREV_IMAGE);
-  };
-
-  const setFinished = () => {
-    // this.props.siaSetTaskFinished()
-    triggerToolBarEvent(tbe.TASK_FINISHED);
-  };
-
-  const toggleFinishPrompt = () => {
-    setShowFinishPrompt(!showFinishPrompt);
-  };
-
-  const toggleFullscreen = () => {
-    // this.setState({
-    //     fullscreenMode: !this.state.fullscreenMode
-    // })
-    triggerToolBarEvent(tbe.SET_FULLSCREEN);
-  };
-
-  const toggleImgLabelInput = () => {
-    // this.props.siaShowImgLabelInput(!this.props.imgLabelInput.show)
-    triggerToolBarEvent(tbe.SHOW_IMAGE_LABEL_INPUT);
-  };
-
-  const toggleJunk = () => {
-    // this.props.siaImgIsJunk(!this.props.isJunk)
-    triggerToolBarEvent(tbe.IMG_IS_JUNK);
-  };
-
-  const toggleHelp = () => {
-    setShowHelp(!showHelp);
-  };
-
-  const handleOnDeleteAllAnnos = () => {
-    triggerToolBarEvent(tbe.DELETE_ALL_ANNOS);
-  };
-
-  const handleSave = () => {
-    triggerToolBarEvent(tbe.SAVE);
-  };
-
-  const triggerToolBarEvent = (event, data) => {
-    if (props.onToolBarEvent) {
-      props.onToolBarEvent(event, data);
-    }
-  };
-
-  const renderToolButtons = () => {
-    if (!props.canvasConfig) return null;
-    if (!props.enabled.toolSelection) return null;
-    if (!props.canvasConfig.annos.actions.draw) return null;
-    let btns = [];
-
-    if (props.canvasConfig.tools.sam) {
-      btns.push(
-        <ToolbarItem
-          color="#0081FB"
-          active={props.active.selectedTool === TOOLS.POSITIVE_POINT}
-          onClick={(e) => onClick(e, TOOLS.POSITIVE_POINT)}
-          faIcon={faPlusCircle}
-        />,
-      );
-
-      btns.push(
-        <ToolbarItem
-          color="#0081FB"
-          active={props.active.selectedTool === TOOLS.NEGATIVE_POINT}
-          onClick={(e) => onClick(e, TOOLS.NEGATIVE_POINT)}
-          faIcon={faMinusCircle}
-        />,
-      );
-
-      btns.push(
-        <ToolbarItem
-          color="#0081FB"
-          active={props.active.selectedTool === TOOLS.SAM_BBOX}
-          onClick={(e) => onClick(e, TOOLS.SAM_BBOX)}
-          faIcon={faSquare}
-        />,
-      );
-
-      btns.push(
-        <ToolbarItem
-          color="#0081FB"
-          onClick={(e) => triggerToolBarEvent(tbe.CLEAR_SAM_HELPER_ANNOS)}
-          faIcon={faTrashCan}
-        />,
-      );
-    }
-
-    if (props.canvasConfig.tools.point) {
-      btns.push(
-        <ToolbarItem
-          active={props.active.selectedTool === TOOLS.POINT}
-          onClick={(e) => onClick(e, TOOLS.POINT)}
-          siaIcon={siaIcons.pointIcon()}
-        />,
-      );
-    }
-    if (props.canvasConfig.tools.line) {
-      btns.push(
-        <ToolbarItem
-          active={props.active.selectedTool === TOOLS.LINE}
-          onClick={(e) => onClick(e, TOOLS.LINE)}
-          siaIcon={siaIcons.lineIcon()}
-        />,
-      );
-    }
-    if (props.canvasConfig.tools.bbox) {
-      btns.push(
-        <ToolbarItem
-          active={props.active.selectedTool === TOOLS.BBOX}
-          onClick={(e) => onClick(e, TOOLS.BBOX)}
-          faIcon={faVectorSquare}
-        />,
-      );
-    }
-    if (props.canvasConfig.tools.polygon) {
-      btns.push(
-        <ToolbarItem
-          active={props.active.selectedTool === TOOLS.POLYGON}
-          onClick={(e) => onClick(e, TOOLS.POLYGON)}
-          siaIcon={siaIcons.polygonIcon()}
-        />,
-      );
-    }
-    return btns;
-  };
-
-  const renderFinishPrompt = () => {
-    return (
-      <Prompt
-        active={showFinishPrompt}
-        header={
-          <div>
-            <FontAwesomeIcon icon={faPaperPlane} />
-            &nbsp; Do you wish to FINISH this SIA Task?
-          </div>
-        }
-        content={
-          <div>
-            <Button basic color="green" inverted onClick={() => setFinished()}>
-              <FontAwesomeIcon icon={faCheck} /> &nbsp; Yes
-            </Button>
-            <Button
-              basic
-              color="red"
-              inverted
-              onClick={() => toggleFinishPrompt()}
-            >
-              <FontAwesomeIcon icon={faBan} /> &nbsp; No
-            </Button>
-          </div>
-        }
-      />
-    );
-  };
-  /**
-   * Render next and prev image buttons
-   *
-   */
-  const renderNavigation = () => {
-    let btns = [];
-    if (!props.enabled.nextPrev) return null;
-    if (props.imageMeta) {
-      if (props.imageMeta.isLast) {
-        btns.push(
-          <>
-            <ToolbarItem
-              onClick={() => toggleFinishPrompt()}
-              faIcon={faPaperPlane}
-            />
-            {renderFinishPrompt()}
-          </>,
-        );
-      } else {
-        btns.push(
-          <ToolbarItem onClick={() => getNextImg()} faIcon={faArrowRight} />,
-        );
-      }
-      btns.push(
-        <ToolbarItem
-          disabled={props.imageMeta.isFirst}
-          onClick={() => getPrevImg()}
-          faIcon={faArrowLeft}
-        />,
-      );
-    }
-    return btns;
-  };
-
-  const renderJunkButton = () => {
-    if (!props.enabled.junk) return null;
-
-    return (
-      <ToolbarItem
-        active={props.active.isJunk}
-        onClick={() => toggleJunk()}
-        faIcon={faBan}
-      />
-    );
-  };
-
-  const renderDeleteAllAnnosButton = () => {
-    if (!props.enabled.deleteAll) return null;
-    return (
-      <ToolbarItem onClick={() => handleOnDeleteAllAnnos()} faIcon={faTrash} />
-    );
-  };
-
-  const renderSaveButton = () => {
-    if (!props.enabled.save) return null;
-    return <ToolbarItem onClick={() => handleSave()} faIcon={faSave} />;
-  };
-
-  const renderHelpButton = () => {
-    if (!props.enabled.help) return null;
-    return (
-      <>
-        <ToolbarItem onClick={() => toggleHelp()} faIcon={faQuestion} />
-        <Prompt
-          active={showHelp}
-          onClick={() => toggleHelp()}
-          content={
-            <div>
-              <Card.Group>
-                <Card>
-                  <Card.Content header="How to draw?" />
-                  <Card.Content description="1.) Select a Tool in the toolbar 2.) Draw with RIGHT CLICK on Canvas" />
-                </Card>
-                <Card>
-                  <Card.Content header="How to delete an annotation?" />
-                  <Card.Content description="1.) Select an annotation with LEFT CLICK 2.) Press DELETE or BACKSPACE" />
-                </Card>
-                <Card>
-                  <Card.Content header="How to assign a label?" />
-                  <Card.Content description="1.) Select an annotation with LEFT CLICK 2.) Hit ENTER 3.) Type into the input field 4.) Hit ENTER to confirm 5.) Hit ESCAPE to close the input field" />
-                </Card>
-                <Card>
-                  <Card.Content header="Undo/ Redo" />
-                  <Card.Content description="Undo: Hit STRG + Z" />
-                  <Card.Content description="Redo: Hit STRG + R" />
-                </Card>
-                <Card>
-                  <Card.Content header="Add/ Remove a node to Line/Polygon" />
-                  <Card.Content description="Add: Hit STRG + Click left on the line" />
-                  <Card.Content description="Remove: Hit STRG + Click left on the node to delete" />
-                </Card>
-                <Card>
-                  <Card.Content header="Remove a node from Line/Polygon in create mode" />
-                  <Card.Content description="Press DELETE or BACKSPACE" />
-                </Card>
-                <Card>
-                  <Card.Content header="Edit Line/Polygon" />
-                  <Card.Content description="1.) Click on the Annotation you want to edit." />
-                  <Card.Content description='2.) Press "e". New nodes can now be added using right click' />
-                </Card>
-                <Card>
-                  <Card.Content header="Zoom/ Move Canvas" />
-                  <Card.Content description="Zoom: Use MOUSE WHEEL to zoom in/out" />
-                  <Card.Content description="Move: Hold MOUSE WHEEL and move mouse. Or Use W/A/S/D keys to move camera up/left/down/right" />
-                </Card>
-                <Card>
-                  <Card.Content header="TAB navigation" />
-                  <Card.Content description="You can traverse all visible annotation by hitting TAB." />
-                </Card>
-                <Card>
-                  <Card.Content header="Next/Prev image navigation" />
-                  <Card.Content description="Get next image by hitting ARROW_RIGHT key. Get previous image by hitting ARROW_LEFT key." />
-                </Card>
-                <Card>
-                  <Card.Content header="Copy and Paste annotations" />
-                  <Card.Content description="Copy: 1.) Select annotation 2.) Hit STRG + C" />
-                  <Card.Content description="Paste: STRG + V" />
-                </Card>
-                <Card>
-                  <Card.Content header="Mark image as junk" />
-                  <Card.Content description="1.) Press J key" />
-                </Card>
-                <Card>
-                  <Card.Content header="Assign a comment to a 2D annoation" />
-                  <Card.Content description="1.) Select annotation 2.) Hit C key" />
-                </Card>
-              </Card.Group>
-            </div>
-          }
-        />
-      </>
-    );
-  };
-
-  const renderImgLabelInput = () => {
-    if (!props.enabled.imgLabel) return null;
-    if (props.canvasConfig.img.actions.label) {
-      return (
-        <ToolbarItem
-          // active={this.props.imgLabelInput.show}
-          onClick={() => toggleImgLabelInput()}
-          faIcon={faTag}
-        />
-      );
-    }
-  };
-
-  const renderImageSearch = () => {
-    if (!props.enabled.imgSearch) return null;
-
-    return (
-      <ToolbarItem
-        faIcon={faSearch}
-        onClick={() => {
-          if (props.onImgageSearchClicked) return props.onImgageSearchClicked();
-        }}
-      />
-    );
-  };
-
-  const renderFullscreenBtn = () => {
-    if (!props.enabled.fullscreen) return null;
-    return (
-      <ToolbarItem
-        active={props.active.fullscreen}
-        onClick={() => toggleFullscreen()}
-        faIcon={faMaximize}
-      />
-    );
-  };
-
-  const renderSettingBtn = () => {
-    if (!props.enabled.settings) return null;
-
-    return (
-      <SIASettingButton
-        enabled={props.enabled.settings}
-        uiConfig={props.uiConfig}
-        onSettingEvent={(e, data) => triggerToolBarEvent(e, data)}
-        toolbarItemStyle={toolbarItemStyle}
-      />
-    );
-  };
-
-  const renderFilterBtn = () => {
-    if (!props.enabled.filter) return null;
-    if (!props.filter) return null;
-    return (
-      <SIAFilterButton
-        enabled={props.enabled.filter}
-        onFilterEvent={(e, data) => triggerToolBarEvent(e, data)}
-        filter={props.filter}
-        imageMeta={props.imageMeta}
-        toolbarItemStyle={toolbarItemStyle}
-      />
-    );
-  };
-
-  if (!props.enabled) return null;
-
-  return (
-    <div
-      ref={toolBarGroup}
-      style={{ position: "fixed", top: position.top, left: position.left }}
-    >
-      <CSidebar narrow className="sia-toolbar">
-        <CSidebarNav>
-          {renderSettingBtn()}
-          {renderFilterBtn()}
-          {renderSaveButton()}
-          {renderImgLabelInput()}
-          {renderImageSearch()}
-          {renderNavigation()}
-          {renderToolButtons()}
-          {renderJunkButton()}
-          {renderDeleteAllAnnosButton()}
-          {renderFullscreenBtn()}
-          {renderHelpButton()}
-        </CSidebarNav>
-      </CSidebar>
-    </div>
-  );
-};
-
-export default ToolBar;

package/src/Toolbar/NavigationButtons.tsx

@@ -1,21 +0,0 @@
-import { CButton, CButtonGroup } from "@coreui/react";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-type NavigationButtonProps = {};
-
-const NavigationButtons = ({}: NavigationButtonProps) => {
-  return (
-    <CButtonGroup>
-      <CButton color="primary" variant="outline" onClick={() => {}}>
-        <FontAwesomeIcon icon={faArrowLeft as IconProp} size="lg" />
-      </CButton>
-      <CButton color="primary" variant="outline" onClick={() => {}}>
-        <FontAwesomeIcon icon={faArrowRight as IconProp} size="lg" />
-      </CButton>
-    </CButtonGroup>
-  );
-};
-
-export default NavigationButtons;

package/src/Toolbar/ToolbarItem.jsx

@@ -1,30 +0,0 @@
-import { CNavItem } from "@coreui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-const ToolbarItem = ({
-  active = false,
-  disabled = false,
-  faIcon,
-  siaIcon,
-  onClick,
-}) => {
-  let color = "white";
-  if (active) color = "red";
-  if (disabled) color = "grey";
-
-  return (
-    <CNavItem>
-      <div
-        className="sia-toolbar-item"
-        onClick={() => {
-          if (!disabled && onClick) onClick();
-        }}
-      >
-        {faIcon && <FontAwesomeIcon icon={faIcon} size="lg" color={color} />}
-        {siaIcon && <span style={{ color: color }}>{siaIcon}</span>}
-      </div>
-    </CNavItem>
-  );
-};
-
-export default ToolbarItem;

package/src/Toolbar/ToolbarItems/ImageToolItems/ImageLabel.tsx

@@ -1,62 +0,0 @@
-import { useState } from "react";
-import { CCol, CContainer, CRow } from "@coreui/react";
-import TagLabel from "./TagLabel";
-import LabelInput from "../../../Canvas/LabelInput";
-import Label from "../../../models/Label";
-
-type ImageLabelProps = {
-  possibleLabels: Label[];
-  selectedLabelIds?: number[];
-  onImageLabelsChanged?: (selectedImageIds: number[]) => void;
-};
-
-const ImageLabel = ({
-  possibleLabels,
-  selectedLabelIds = [],
-  onImageLabelsChanged = () => {},
-}: ImageLabelProps) => {
-  const getSelectedLabels = () => {
-    const selectedLabels: Label[] = possibleLabels.filter((label: Label) =>
-      selectedLabelIds.includes(label.id),
-    );
-
-    return selectedLabels;
-  };
-
-  const renderLabels = () => {
-    const selectedLabels = getSelectedLabels();
-    return selectedLabels.map((label: Label) => (
-      <CCol>
-        <TagLabel name={label.name} color={label.color} />
-      </CCol>
-    ));
-  };
-
-  return (
-    <CContainer>
-      <CRow>
-        <CCol>
-          <CRow>
-            <b>Selected Labels:</b>
-          </CRow>
-          <CRow xs={{ gutterY: 1 }}>{renderLabels()}</CRow>
-        </CCol>
-        <CCol>
-          <CRow>
-            <b>Change selection:</b>
-          </CRow>
-          <CRow style={{ minWidth: 250, minHeight: 100 }}>
-            <LabelInput
-              isMultilabel={true}
-              selectedLabelsIds={selectedLabelIds}
-              possibleLabels={possibleLabels}
-              onLabelSelect={onImageLabelsChanged}
-            />
-          </CRow>
-        </CCol>
-      </CRow>
-    </CContainer>
-  );
-};
-
-export default ImageLabel;

package/src/Toolbar.css

@@ -1,13 +0,0 @@
-.sia-toolbar {
-  border-radius: 0 5px 5px 0;
-  background: #1b1c1d;
-  width: 55px;
-  cursor: pointer;
-  padding-bottom: 0;
-}
-
-.sia-toolbar-item {
-  padding: 13px 0px;
-  display: flex;
-  justify-content: center;
-}

package/src/ToolbarItem.jsx

@@ -1,31 +0,0 @@
-import { CNavItem } from "@coreui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import "./Toolbar.css";
-
-const ToolbarItem = ({
-  active = false,
-  disabled = false,
-  faIcon,
-  siaIcon,
-  onClick,
-  color = "white",
-}) => {
-  if (active) color = "red";
-  if (disabled) color = "grey";
-
-  return (
-    <CNavItem>
-      <div
-        className="sia-toolbar-item"
-        onClick={() => {
-          if (!disabled && onClick) onClick();
-        }}
-      >
-        {faIcon && <FontAwesomeIcon icon={faIcon} size="lg" color={color} />}
-        {siaIcon && <span style={{ color: color }}>{siaIcon}</span>}
-      </div>
-    </CNavItem>
-  );
-};
-
-export default ToolbarItem;

package/src/filterTools.js

@@ -1,5 +0,0 @@
-function active(filter) {
-  return filter.clahe.active || filter.rotate.active;
-}
-
-export default { active };

package/src/models/AllowedTools.tsx

@@ -1,9 +0,0 @@
-type AllowedTools = {
-  bbox: boolean;
-  junk: boolean;
-  line: boolean;
-  point: boolean;
-  polygon: boolean;
-};
-
-export default AllowedTools;

package/src/models/AnnotationSettings.tsx

@@ -1,9 +0,0 @@
-type AnnotationSettings = {
-  minimalArea: number; // @TODO needs to be implemented
-  canHaveMultipleLabels: boolean;
-  canEdit: boolean;
-  canCreate: boolean;
-  canLabel: boolean;
-};
-
-export default AnnotationSettings;

package/src/models/ExternalAnnotation.ts

@@ -1,15 +0,0 @@
-import AnnotationStatus from "./AnnotationStatus";
-import AnnotationTool from "./AnnotationTool";
-import { Point } from "../types";
-
-type ExternalAnnotation = {
-  externalId?: string;
-  annoTime?: number;
-  coordinates: Point[];
-  status: AnnotationStatus;
-  labelIds: number[];
-  type: AnnotationTool;
-  timestamp?: DOMHighResTimeStamp;
-};
-
-export default ExternalAnnotation;

package/src/models/Label.tsx

@@ -1,8 +0,0 @@
-interface Label {
-  id: number;
-  name: string;
-  description: string;
-  color?: string;
-}
-
-export default Label;

package/src/models/UiConfig.tsx

@@ -1,6 +0,0 @@
-interface UiConfig {
-  strokeWidth: number;
-  nodeRadius: number;
-}
-
-export default UiConfig;