lost-sia 1.3.0 → 2.0.0-alpha1

package/src/InfoBoxes/LabelInfo.jsx

@@ -0,0 +1,95 @@
+import React, {useEffect, useState} from 'react'
+import { Divider, Image, Header } from 'semantic-ui-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 { data: exampleImg, mutate: getAnnoExample } = exampleApi.useGetAnnoExampleImg({})
+    useEffect(() => {
+        if (props.selectedAnno){
+            const selectedLabelIds = props.selectedAnno.labelIds
+            if (selectedLabelIds) {
+                const lbl = props.possibleLabels.find( e => {
+                    return selectedLabelIds[0] === e.id
+                })
+                if (lbl){
+                    if (lbl !== myLbl){
+                        setMyLbl(lbl)
+                        if (props.visible)
+                            // getAnnoExample({llId:lbl.id, type:'annoBased', drawAnno: true, addContext:0.05})
+                            requestImg(lbl, props.selectedAnno)
+                    }
+                }
+            }
+        }
+    }, [props.selectedAnno])
+    const onDismiss = () => {
+        if (props.onDismiss){
+            props.onDismiss()
+        }
+    }
+
+    const requestImg = (lbl, anno) => {
+        if (props.onGetAnnoExample){
+            props.onGetAnnoExample({lbl:lbl, anno:anno})
+        }
+    }
+
+    const handleImgClick = () => {
+        console.log('clicked img')
+        // setShowExampleViewer(true)
+        // requestImg(myLbl, props.selectedAnno)
+
+        setShowExampleViewer(true)
+        // getAnnoExample({llId:myLbl.id, type:'annoBased', drawAnno: true, addContext:0.05})
+    }
+
+    const renderExampleImg = () => {
+        if (!props.exampleImg) return null
+        return <div>
+              <Divider onClick={() => handleImgClick()} horizontal> Example </Divider>
+              <SiaPopup trigger={<Image src={props.exampleImg.img} rounded centered size='medium'
+                onClick={() => handleImgClick()}
+              />}
+                content={'Click on image to view more examples'} />
+              {/* <Image src='https://www.gstatic.com/webp/gallery3/1.png'/> */}
+        </div>
+    }
+
+    const renderDescription = () => {
+        // if (props.selectedAnno){
+        // if (myLbl){
+            // const selectedLabelIds = props.selectedAnno.labelIds
+            // if (!selectedLabelIds) return 'No Label'
+            // const lbl = props.possibleLabels.find( e => {
+            //     return selectedLabelIds[0] === e.id
+            // })
+            if (!myLbl) return "No Label"
+            return <div>
+                <Header>{
+                    myLbl.label
+                }</Header>
+              <div dangerouslySetInnerHTML={{__html: myLbl.description}} />
+              {renderExampleImg()}
+              <AnnoExampleViewer onRequestExample={() => requestImg(myLbl, props.selectedAnno)} onClose={() => {setShowExampleViewer(false)}} active={showExampleViewer} lbl={myLbl} exampleImg={props.exampleImg} />
+            </div>
+        // } else {
+        //     return 'No Label'
+        // }
+    }
+
+
+    return <InfoBox
+        header="Label Info"
+        content={renderDescription()}
+        visible={props.visible}
+        defaultPos={props.defaultPos}
+        onDismiss={() => onDismiss()}
+    />
+}
+
+
+export default LabelInfo

package/src/LabelInput.jsx

@@ -0,0 +1,224 @@
+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

@@ -0,0 +1,46 @@
+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/SIA.scss

@@ -0,0 +1,10 @@
+.sia-fullscreen{
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 6000;
+    width: 100%;
+    height: 100%;
+    background-color: #FFFF;
+}
+

package/src/SIAFilterButton.jsx

@@ -0,0 +1,178 @@
+import React, { Component } from 'react'
+import { Popup, Icon, Menu, Divider, Checkbox } from 'semantic-ui-react'
+import * as filterTools from './filterTools'
+import * as tbe from './types/toolbarEvents'
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
+import { 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>
+            <Divider horizontal>Rotate</Divider>
+            <Checkbox
+                checked={filter.rotate.active && filter.rotate.angle === 90}
+                label="Rotate 90" toggle
+                onClick={() => this.rotateImg(90)}
+            />
+            <Checkbox
+                checked={filter.rotate.active && filter.rotate.angle === -90}
+                label="Rotate -90" toggle
+                onClick={() => this.rotateImg(-90)}
+            />
+            <Checkbox
+                checked={filter.rotate.active && filter.rotate.angle === 180}
+                label="Rotate 180" toggle
+                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>
+            <Divider horizontal>Histogram equalization</Divider>
+            <Checkbox
+                checked={filter.clahe.active}
+                label="Histogram equalization" toggle
+                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

package/src/SIASettingButton.jsx

@@ -0,0 +1,122 @@
+import React, { Component } from 'react'
+
+import { Popup, Icon, Menu, Divider, Checkbox } from 'semantic-ui-react'
+import * as tbe from './types/toolbarEvents'
+import { faCog } from '@fortawesome/free-solid-svg-icons'
+import { CPopover } from '@coreui/react'
+import ToolbarItem from './ToolbarItem'
+class SIASettingButton extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+
+        }
+    }
+
+    triggerEvent(e, data) {
+        if (this.props.onSettingEvent) {
+            this.props.onSettingEvent(e, data)
+        }
+    }
+    toggleAnnoDetails() {
+        this.triggerEvent(tbe.SHOW_ANNO_DETAILS)
+    }
+
+    toggleLabelInfo() {
+        this.triggerEvent(tbe.SHOW_LABEL_INFO)
+    }
+
+    toggleAnnoStats() {
+        this.triggerEvent(tbe.SHOW_ANNO_STATS)
+    }
+
+    handleStrokeWidthChange(e) {
+        this.triggerEvent(tbe.EDIT_STROKE_WIDTH, parseInt(e.target.value))
+    }
+
+    handleNodeRadiusChange(e) {
+        this.triggerEvent(tbe.EDIT_NODE_RADIUS, parseInt(e.target.value))
+    }
+
+    renderInfoBoxContent() {
+        return <div>
+            <Divider horizontal>Info Boxes</Divider>
+            <Checkbox
+                checked={this.props.uiConfig.annoDetails.visible}
+                label="Annotation Details" toggle
+                onClick={() => this.toggleAnnoDetails()}
+            />
+            <Checkbox
+                checked={this.props.uiConfig.labelInfo.visible}
+                label="Label Info" toggle
+                onClick={() => this.toggleLabelInfo()}
+            />
+            <Checkbox
+                checked={this.props.uiConfig.annoStats.visible}
+                label="Anno Stats" toggle
+                onClick={() => this.toggleAnnoStats()}
+            />
+        </div>
+    }
+    renderInfoBoxes() {
+        if (!this.props.enabled) return null
+        if (this.props.enabled === true) {
+            return this.renderInfoBoxContent()
+        } else {
+            if (this.props.enabled.infoBoxes) {
+                return this.renderInfoBoxContent()
+            }
+        }
+    }
+
+    renderAnnoStyle() {
+        if (!this.props.enabled) return null
+        if (this.props.enabled === true) {
+            return this.renderAnnoStyleContent()
+        } else {
+            if (this.props.enabled.annoStyle) {
+                return this.renderAnnoStyleContent()
+            }
+        }
+    }
+    renderAnnoStyleContent() {
+        return <div>
+            <Divider horizontal>Anno Appearance</Divider>
+            <div>Stroke width: {this.props.uiConfig.strokeWidth}</div>
+            <input
+                type='range'
+                min={1}
+                max={10}
+                value={this.props.uiConfig.strokeWidth}
+                onChange={e => this.handleStrokeWidthChange(e)}
+            />
+            <div>Node radius: {this.props.uiConfig.nodeRadius}</div>
+            <input
+                type='range'
+                min={1}
+                max={10}
+                value={this.props.uiConfig.nodeRadius}
+                onChange={e => this.handleNodeRadiusChange(e)}
+            />
+        </div>
+    }
+
+    render() {
+
+        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