lost-sia 1.2.0 → 2.0.0-alpha0

package/src/ImgBar.jsx

@@ -0,0 +1,123 @@
+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/InfoBoxes/AnnoDetails.jsx

@@ -0,0 +1,166 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { List, Divider, 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()
+    useEffect(() => {
+        if (props.anno) {
+            if (props.anno.comment) {
+                setComment(props.anno.comment)
+            } else {
+                setComment('')
+            }
+        }
+    }, [props.anno])
+
+    useEffect(() => {
+        if (tARef.current) {
+            tARef.current.focus()
+        }
+    }, [props.commentInputTrigger])
+
+    const onDismiss = () => {
+        if (props.onDismiss) {
+            props.onDismiss()
+        }
+    }
+
+    const onCommentUpdate = () => {
+        if (props.onCommentUpdate) {
+            props.onCommentUpdate(comment)
+        }
+        setShowSaveBtn(false)
+    }
+
+    const onMarkExampleClick = () => {
+        // setExample(!example)
+        if (props.onMarkExample) {
+            props.onMarkExample(props.anno)
+        }
+    }
+
+    const renderSaveBtn = () => {
+        if (showSaveBtn) {
+            return <Label as="a" corner="right" icon="save" color="red"></Label>
+        }
+    }
+
+    const renderComment = () => {
+        return (
+            <div>
+                <Form onClick={() => {}}>
+                    {renderSaveBtn()}
+                    <TextArea
+                        placeholder="Write a comment"
+                        ref={tARef}
+                        value={comment}
+                        rows={2}
+                        onBlur={() => onCommentUpdate()}
+                        onFocus={() => setShowSaveBtn(true)}
+                        onChange={(e) => setComment(e.target.value)}
+                    ></TextArea>
+                </Form>
+            </div>
+        )
+    }
+    const renderLabels = () => {
+        if (props.anno) {
+            const selectedLabelIds = props.anno.labelIds
+            if (!selectedLabelIds) return 'No Label'
+
+            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
+        } else {
+            return 'No Label'
+        }
+    }
+
+    const renderExampleMark = () => {
+        if (!props.allowedToMarkExample) return null
+        let color = 'grey'
+        let iconName = 'bookmark outline'
+        if (props.anno) {
+            if (props.anno.isExample) {
+                color = 'yellow'
+                iconName = 'bookmark'
+            }
+        }
+        const mark = (
+            <Label
+                as="a"
+                color={color}
+                style={{ opacity: 0.8 }}
+                size="medium"
+                corner="left"
+                onClick={() => {
+                    onMarkExampleClick()
+                }}
+            >
+                <Icon name={iconName} />
+            </Label>
+        )
+        return (
+            <PopUp
+                content="Mark this annotation as example for other annotators"
+                trigger={mark}
+            />
+        )
+    }
+
+    const renderDescription = () => {
+        if (props.anno) {
+            return (
+                <div>
+                    {renderExampleMark()}
+                    {/* <Header> 
+                            Labels
+                        </Header>
+                        <div>
+                            {renderLabels()}
+                        </div> */}
+                    <List>
+                        <List.Item icon="at" content={props.anno.id} />
+                        <List.Item icon="tag" content={renderLabels()} />
+                        <List.Item
+                            icon="time"
+                            content={`${props.anno.annoTime.toLocaleString('us', {
+                                minimumFractionDigits: 2,
+                                maximumFractionDigits: 2,
+                            })} seconds`}
+                        />
+                        {/* <List.Item icon='time' content={props.anno.annoTime} /> */}
+                    </List>
+                    {/* <Divider horizontal> Comment </Divider> */}
+                    {renderComment()}
+                </div>
+            )
+        } else {
+            return 'No annotation selected!'
+        }
+    }
+
+    return (
+        <InfoBox
+            header={'Annotation Details'}
+            content={renderDescription()}
+            visible={props.visible}
+            defaultPos={props.defaultPos}
+            onDismiss={(e) => onDismiss()}
+        />
+    )
+}
+
+export default AnnoDetails

package/src/InfoBoxes/AnnoStats.jsx

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

package/src/InfoBoxes/InfoBox.jsx

@@ -0,0 +1,78 @@
+import React, {Component} from 'react'
+import { Header, Message, Divider } from 'semantic-ui-react'
+import Draggable from 'react-draggable';
+
+class InfoBox extends Component{
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            style: {
+                position:'fixed', 
+                top: 200, 
+                left: 200, 
+                width: 250
+            }
+        }
+    }
+
+    componentDidMount(){
+        this.updateStyle()
+    }
+
+    componentDidUpdate(prevProps){
+        if (this.props.defaultPos !== prevProps.defaultPos){
+            this.updateStyle()
+        }
+    }
+
+    handleOnStop(e){
+        if (this.props.onStop){
+            this.props.onStop(e)
+        }
+    }
+
+    updateStyle(){
+        this.setState({
+            style: {...this.state.style,
+            ...this.props.defaultPos}
+        })
+    }
+
+    onDismiss(e){
+        if (this.props.onDismiss){
+            this.props.onDismiss(e)
+        }
+    }
+
+    
+    render(){
+        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)}}
+                size="small"
+            >
+                <Header textAlign='center' as='h5' className="handle" style={{cursor: 'grab'}}>{this.props.header}</Header>
+                {/* <Message.Header textAlign='center' className="handle" style={{cursor: 'grab'}}>{this.props.header}</Message.Header> */}
+                <Divider></Divider>
+                <Message.Content>
+                    {this.props.content}
+                </Message.Content>
+            </Message>
+
+            </div> 
+        
+        
+        </Draggable>
+        )
+    }
+}
+
+export default InfoBox

package/src/InfoBoxes/InfoBoxArea.jsx

@@ -0,0 +1,155 @@
+import React, {Component} from 'react'
+// import {connect} from 'react-redux'
+import AnnoDetails from './AnnoDetails'
+import AnnoStats from './AnnoStats'
+import LabelInfo from './LabelInfo'
+// import actions from '../../../../actions'
+// const { siaShowImgBar, siaSetUIConfig } = actions
+
+class InfoBoxes extends Component{
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            position: {
+                top: 0,
+                left: 0,
+            }
+        }
+    }
+
+    componentDidMount(){
+        this.updateLayout()
+        
+    }
+
+    componentDidUpdate(prevProps){
+
+        if (this.props.layoutUpdate !== prevProps.layoutUpdate){
+            this.updateLayout()
+        }
+        if (this.props.commentInputTrigger !== prevProps.commentInputTrigger){
+            if (!this.props.uiConfig.annoDetails.visible){
+                this.showAnnoDetails(true)
+            }
+        }
+    }
+
+    updateLayout(){
+        if (this.props.container.current){
+            const container = this.props.container.current.getBoundingClientRect()
+            this.setState({
+                position: {...this.state.position,
+                left: container.right - 250,
+                top: container.top,
+                }
+            })
+        }
+    }
+
+    showAnnoDetails(show=true){
+        this.props.onUiConfigUpdate(
+            {...this.props.uiConfig,
+                annoDetails: {
+                    ...this.props.uiConfig.annoDetails,
+                    visible: show
+                }
+            }
+        )
+    }
+
+    onDismiss(type){
+        if (this.props.onUiConfigUpdate){
+            switch (type){
+                case 'AnnoDetails':
+                    this.showAnnoDetails(false)
+                    break
+                case 'LabelInfo':
+                    this.props.onUiConfigUpdate(
+                        {...this.props.uiConfig,
+                            labelInfo: {
+                                ...this.props.uiConfig.labelInfo,
+                                visible: false
+                            }
+                        }
+                    )
+                    break
+                case 'AnnoStats':
+                    this.props.onUiConfigUpdate(
+                        {...this.props.uiConfig,
+                            annoStats: {
+                                ...this.props.uiConfig.annoStats,
+                                visible: false
+                            }
+                        }
+                    )
+                    break
+                default:
+                    break
+            }
+        }
+    }
+
+    onCommentUpdate(comment){
+        if (this.props.onCommentUpdate){
+            this.props.onCommentUpdate(comment)
+        }
+    }
+
+    onMarkExample(anno){
+        if (this.props.onMarkExample){
+            this.props.onMarkExample(anno)
+        }
+    }
+
+    onHideLbl(lbl, hide){
+        if(this.props.onHideLbl){
+            this.props.onHideLbl(lbl, hide)
+        }
+    }
+
+    render(){
+        if (!this.props.annos) return null
+        // if (!this.props.selectedAnno) return null
+        return(
+        <div >
+        <LabelInfo selectedAnno={this.props.selectedAnno}
+            possibleLabels={this.props.possibleLabels}
+            defaultPos={this.state.position}
+            onDismiss={() => this.onDismiss('LabelInfo')}
+            visible={this.props.uiConfig.labelInfo.visible}
+            onGetAnnoExample={(exampleArgs) => this.props.onGetAnnoExample ? this.props.onGetAnnoExample(exampleArgs):{} }
+            exampleImg={this.props.exampleImg}
+        />
+        <AnnoDetails anno={this.props.selectedAnno} 
+            possibleLabels={this.props.possibleLabels}
+            defaultPos={{
+                left: this.state.position.left - 300,
+                top: this.state.position.top
+            }}
+            onDismiss={() => this.onDismiss('AnnoDetails')}
+            onCommentUpdate={(comment) => this.onCommentUpdate(comment)}
+            onMarkExample={(anno) => this.onMarkExample(anno)}
+            allowedToMarkExample={this.props.allowedToMarkExample}
+            commentInputTrigger={this.props.commentInputTrigger}
+            visible={this.props.uiConfig.annoDetails.visible}
+        />
+        <AnnoStats selectedAnno={this.props.selectedAnno}
+            annos={this.props.annos}
+            possibleLabels={this.props.possibleLabels}
+            defaultPos={{
+                left: this.state.position.left,
+                top: this.state.position.top + 400
+            }}
+            // defaultPos={this.state.position}
+            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