lost-sia 2.0.1-alpha8 → 3.0.0

package/src/ImgBar.jsx

@@ -1,131 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Menu } from "semantic-ui-react";
-
-const ImgBar = ({
-  svg,
-  imgLabelIds,
-  possibleLabels,
-  imageMeta,
-  annos,
-  annoTaskId,
-  visible,
-  onLabelUpdate,
-  onMouseEnter,
-  onClose,
-}) => {
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-
-  useEffect(() => {
-    if (svg) {
-      setPosition({
-        ...position,
-        left: svg.left,
-        top: svg.top,
-      });
-    }
-  }, [svg]);
-
-  // const handleLabelUpdate = (label) => {
-  //     if (onLabelUpdate) {
-  //         onLabelUpdate(label)
-  //     }
-  // }
-
-  // const handleClose = () => {
-  //     if (onClose) {
-  //         onClose()
-  //     }
-  // }
-
-  const handleMouseEnter = (e) => {
-    if (onMouseEnter) {
-      onMouseEnter(e);
-    }
-  };
-
-  // renderImgLabelInput(){
-  //     if (this.props.allowedActions.label){
-  //         return <Menu.Item style={{padding: "5px"}}>
-  //             <LabelInput
-  //                 // multilabels={true}
-  //                 multilabels={this.props.multilabels}
-  //                 relatedId={this.props.annos.image.id}
-  //                 visible={this.props.visible}
-  //                 onLabelUpdate={label => this.handleLabelUpdate(label)}
-  //                 possibleLabels={this.props.possibleLabels}
-  //                 initLabelIds={this.props.imgLabelIds}
-  //                 relatedId={this.props.annos.image.id}
-  //                 disabled={!this.props.allowedActions.label}
-  //                 />
-  //         </Menu.Item>
-  //     } else {
-  //         return null
-  //     }
-  // }
-
-  const renderImgLabels = () => {
-    let label = "";
-    if (imgLabelIds && imgLabelIds.length > 0) {
-      let labelObject;
-      imgLabelIds.forEach((lbl, idx) => {
-        labelObject = possibleLabels.find((el) => {
-          return el.id === lbl;
-        });
-        if (idx > 0) label += ", ";
-        label += labelObject.label;
-      });
-      return <Menu.Item>{label}</Menu.Item>;
-    } else {
-      return null;
-    }
-  };
-
-  const renderImgDescription = () => {
-    if (imageMeta.description) {
-      return <Menu.Item>{imageMeta.description}</Menu.Item>;
-    } else {
-      return null;
-    }
-  };
-
-  const renderAnnoTaskId = () => {
-    if (!annoTaskId) return null;
-
-    return <Menu.Item>Annotask ID: {annoTaskId}</Menu.Item>;
-  };
-
-  if (!visible) return null;
-  if (!imageMeta) return null;
-
-  return (
-    <div
-      style={{
-        position: "fixed",
-        top: position.top,
-        left: position.left,
-        width: svg.width,
-        minWidth: "300px",
-      }}
-      onMouseEnter={(e) => {
-        handleMouseEnter(e);
-      }}
-    >
-      <Menu
-        inverted
-        style={{ opacity: 0.9, justifyContent: "center", alignItems: "center" }}
-      >
-        {/* { renderImgLabelInput() } */}
-        {renderImgDescription()}
-        {renderAnnoTaskId()}
-        <Menu.Item>
-          {/* { annos.image.url.split('/').pop() +" (ID: " + annos.image.id + ")" } */}
-          {"ID: " + imageMeta.id}
-        </Menu.Item>
-        <Menu.Item>{imageMeta.number + " / " + imageMeta.amount}</Menu.Item>
-        {renderImgLabels()}
-      </Menu>
-    </div>
-  );
-};
-
-export default ImgBar;

package/src/LabelInput.jsx

@@ -1,238 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { Dropdown, Ref, Popup, Header } from "semantic-ui-react";
-
-const LabelInput = ({
-  defaultLabel,
-  disabled,
-  focusOnRender,
-  initLabelIds,
-  multilabels,
-  possibleLabelsProp,
-  relatedId,
-  renderPopup,
-  visible,
-  open,
-  onClose,
-  onLabelConfirmed,
-  onLabelUpdate,
-}) => {
-  const [label, setLabel] = useState([]);
-  const [possibleLabels, setPossibleLabels] = useState([]);
-  const [performInit, setPerformInit] = useState(true);
-  const [confirmLabel, setConfirmLabel] = useState(0);
-
-  const inputRef = useRef(null);
-
-  useEffect(() => {
-    updatePossibleLabels();
-  }, []);
-
-  useEffect(() => {
-    if (initLabelIds) {
-      setPerformInit(true);
-    }
-  }, [initLabelIds]);
-
-  useEffect(() => {
-    if (visible) {
-      if (focusOnRender) {
-        if (inputRef.current) {
-          inputRef.current.click();
-        }
-      }
-    }
-
-    if (confirmLabel !== 0) {
-      annoLabelUpdate(label);
-      closeLabelInput();
-    }
-
-    if (initLabelIds) {
-      if (performInit) {
-        setPerformInit(false);
-
-        if (initLabelIds.length > 0) {
-          setLabel(initLabelIds);
-        } else {
-          setLabel([]);
-        }
-      }
-    }
-  }, [
-    visible,
-    focusOnRender,
-    label,
-    confirmLabel,
-    possibleLabelsProp,
-    initLabelIds,
-    relatedId,
-  ]);
-
-  const onKeyDown = (e) => {
-    e.stopPropagation();
-    performKeyAction(e.key);
-  };
-
-  const onChange = (e, item) => {
-    let lbl;
-
-    if (multilabels) {
-      lbl = item.value !== -1 ? item.value : [];
-    } else {
-      lbl = item.value !== -1 ? [item.value] : [];
-    }
-
-    setLabel(lbl);
-    annoLabelUpdate(lbl);
-  };
-
-  const onItemClick = (e, item) => {
-    incrementConfirmLabel();
-  };
-
-  const updatePossibleLabels = () => {
-    let _possibleLabels = [];
-    let _defaultLabel;
-
-    if (defaultLabel) {
-      if (Number.isInteger(defaultLabel)) {
-        _defaultLabel = undefined;
-      } else {
-        _defaultLabel = defaultLabel;
-      }
-    } else {
-      _defaultLabel = "no label";
-    }
-
-    if (possibleLabelsProp.length > 0) {
-      _possibleLabels = possibleLabelsProp.map((e) => {
-        return {
-          key: e.id,
-          value: e.id,
-          text: e.label,
-          content: (
-            <div onClick={(event) => onItemClick(event, e.id)}>{e.label}</div>
-          ),
-        };
-      });
-    }
-
-    if (_defaultLabel) {
-      _possibleLabels.unshift({
-        key: -1,
-        value: -1,
-        text: _defaultLabel,
-        content: (
-          <div onClick={(event) => onItemClick(event, -1)}>{_defaultLabel}</div>
-        ),
-      });
-    }
-
-    setPossibleLabels(_possibleLabels);
-  };
-
-  const performKeyAction = (key) => {
-    switch (key) {
-      case "Enter":
-        if (!multilabels) {
-          if (visible) incrementConfirmLabel();
-        }
-        break;
-      case "Escape":
-        closeLabelInput();
-        break;
-      default:
-        break;
-    }
-  };
-
-  const annoLabelUpdate = (label) => {
-    // console.log("LabelInput -> annoLabelUpdate ", label);
-
-    if (onLabelUpdate) {
-      onLabelUpdate(label.filter((val) => val !== -1));
-    }
-  };
-
-  const incrementConfirmLabel = () => {
-    setConfirmLabel(confirmLabel + 1);
-  };
-
-  const closeLabelInput = () => {
-    // console.log("LabelInput -> closeLabelInput");
-
-    if (onLabelConfirmed) onLabelConfirmed(label.filter((val) => val !== -1));
-    if (onClose) onClose();
-  };
-
-  const renderLabelInput = () => {
-    let lbl;
-
-    if (multilabels) lbl = label;
-    else {
-      lbl = label.length > 0 ? label[0] : -1;
-    }
-
-    return (
-      <Ref innerRef={inputRef}>
-        <Dropdown
-          multiple={multilabels}
-          search
-          selection
-          closeOnChange
-          icon="search"
-          options={possibleLabels}
-          placeholder="Enter label"
-          tabIndex={0}
-          onKeyDown={(e) => onKeyDown(e)}
-          value={lbl}
-          onChange={(e, item) => onChange(e, item)}
-          style={{ opacity: 0.8 }}
-          disabled={disabled}
-          open={open}
-        />
-      </Ref>
-    );
-  };
-
-  const renderLabelInfo = () => {
-    if (!label) return null;
-
-    let lbl = undefined;
-
-    if (label.length > 0) {
-      lbl = possibleLabels.find((e) => label[label.length - 1] === e.id);
-    }
-
-    if (!lbl) return "No label";
-
-    return (
-      <div>
-        <Header>{lbl.label}</Header>
-        <div dangerouslySetInnerHTML={{ __html: lbl.description }} />
-      </div>
-    );
-  };
-
-  const renderPopupContent = () => {
-    return <div>{renderLabelInfo()}</div>;
-  };
-
-  if (!visible) return null;
-
-  if (renderPopup) {
-    return (
-      <Popup
-        trigger={renderLabelInput()}
-        content={renderPopupContent()}
-        open
-        position="right center"
-        style={{ opacity: 0.9 }}
-      />
-    );
-  } else {
-    return renderLabelInput();
-  }
-};
-
-export default LabelInput;

package/src/Prompt.jsx

@@ -1,45 +0,0 @@
-import React, { Component } from "react";
-import { Dimmer, Header } from "semantic-ui-react";
-
-class Prompt extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      active: false,
-    };
-  }
-
-  handleClick(e) {
-    if (this.props.onClick) {
-      this.props.onClick(e);
-    }
-  }
-
-  componentDidMount() {
-    this.setState({ active: this.props.active });
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.active !== prevProps.active) {
-      this.setState({ active: this.props.active });
-    }
-  }
-
-  render() {
-    return (
-      <Dimmer
-        page
-        active={this.state.active}
-        style={{ zIndex: 7000 }}
-        onClick={(e) => this.handleClick(e)}
-      >
-        <Header as="h3" inverted style={{ background: "rgba(0,0,0,0)" }}>
-          {this.props.header}
-        </Header>
-        {this.props.content}
-      </Dimmer>
-    );
-  }
-}
-
-export default Prompt;

package/src/SIAFilterButton.jsx

@@ -1,186 +0,0 @@
-import React, { Component } from "react";
-// import * as filterTools from "./filterTools";
-import * as tbe from "./types/toolbarEvents";
-import { faFilter } from "@fortawesome/free-solid-svg-icons";
-import { CFormSwitch, CPopover } from "@coreui/react";
-import ToolbarItem from "./ToolbarItem";
-class SIAFilterButton extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      clipLimit: 3,
-      active: false,
-      color: undefined,
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    if (
-      prevProps.filter.clahe.clipLimit !== this.props.filter.clahe.clipLimit
-    ) {
-      this.setState({ clipLimit: this.props.filter.clahe.clipLimit });
-    }
-    if (this.props.filter !== prevProps.filter) {
-      if (filterTools.active(this.props.filter)) {
-        this.setState({ color: "red", active: true });
-      } else {
-        this.setState({ color: "white", active: false });
-      }
-    }
-  }
-
-  triggerEvent(e, data) {
-    if (this.props.onFilterEvent) {
-      this.props.onFilterEvent(e, data);
-    }
-  }
-
-  handleClipLimitChange(e) {
-    const cl = parseInt(e.target.value);
-    this.setState({ clipLimit: cl });
-    // this.claheFilter(cl)
-  }
-
-  rotateImg(angle) {
-    const active = !(
-      this.props.filter.rotate.active &&
-      this.props.filter.rotate.angle === angle
-    );
-    const myAngle = active ? angle : 0;
-    this.triggerEvent(tbe.APPLY_FILTER, {
-      ...this.props.filter,
-      rotate: { angle: myAngle, active: active },
-    });
-
-    // this.props.siaApplyFilter({
-    //     ...this.props.filter,
-    //     rotate: {angle:myAngle, active:active}
-    // })
-  }
-
-  claheFilter(clipLimit) {
-    const filter = {
-      clahe: {
-        clipLimit: clipLimit,
-        active: !this.props.filter.clahe.active,
-      },
-    };
-    this.triggerEvent(tbe.APPLY_FILTER, {
-      ...this.props.filter,
-      clahe: filter.clahe,
-    });
-    // this.props.siaApplyFilter({
-    //     ...this.props.filter,
-    //     clahe: filter.clahe
-    // })
-  }
-
-  releaseCLAHESlider(e) {
-    const filter = {
-      clahe: {
-        clipLimit: parseInt(e.target.value),
-        active: true,
-      },
-    };
-    this.triggerEvent(tbe.APPLY_FILTER, {
-      ...this.props.filter,
-      clahe: filter.clahe,
-    });
-    // this.props.siaApplyFilter({
-    //     ...this.props.filter,
-    //     clahe: filter.clahe
-    // })
-  }
-
-  renderRotateContent() {
-    const filter = this.props.filter;
-    return (
-      <div>
-        <h4>Rotate</h4>
-        <CFormSwitch
-          checked={filter.rotate.active && filter.rotate.angle === 90}
-          label="Rotate 90"
-          size="xl"
-          onClick={() => this.rotateImg(90)}
-        />
-        <CFormSwitch
-          checked={filter.rotate.active && filter.rotate.angle === -90}
-          label="Rotate -90"
-          size="xl"
-          onClick={() => this.rotateImg(-90)}
-        />
-        <CFormSwitch
-          checked={filter.rotate.active && filter.rotate.angle === 180}
-          label="Rotate 180"
-          size="xl"
-          onClick={() => this.rotateImg(180)}
-        />
-      </div>
-    );
-  }
-
-  renderRotate() {
-    if (!this.props.enabled) return null;
-    if (this.props.enabled === true) {
-      return this.renderRotateContent();
-    } else {
-      if (this.props.enabled.rotate) {
-        return this.renderRotateContent();
-      }
-    }
-  }
-
-  renderClaheContent() {
-    const filter = this.props.filter;
-    return (
-      <div>
-        <h4>Histogram equalization</h4>
-        <CFormSwitch
-          checked={filter.clahe.active}
-          label="Histogram equalization"
-          size="xl"
-          onClick={() => this.claheFilter(this.state.clipLimit)}
-        />
-        <div>Cliplimit: {this.state.clipLimit}</div>
-        <input
-          type="range"
-          min={0}
-          max={40}
-          value={this.state.clipLimit}
-          onChange={(e) => this.handleClipLimitChange(e)}
-          onMouseUp={(e) => this.releaseCLAHESlider(e)}
-        />
-      </div>
-    );
-  }
-
-  renderClahe() {
-    if (!this.props.enabled) return null;
-    if (this.props.enabled === true) {
-      return this.renderClaheContent();
-    } else {
-      if (this.props.enabled.clahe) {
-        return this.renderClaheContent();
-      }
-    }
-  }
-
-  render() {
-    if (!this.props.imageMeta) return null;
-    const popupContent = (
-      <div>
-        {this.renderRotate()}
-        {this.renderClahe()}
-      </div>
-    );
-    return (
-      <CPopover content={popupContent} placement="right">
-        <span>
-          <ToolbarItem faIcon={faFilter} />
-        </span>
-      </CPopover>
-    );
-  }
-}
-
-export default SIAFilterButton;