lost-sia 3.1.2 → 3.2.0-alpha0

package/src/AnnoExampleViewer.jsx

@@ -1,69 +0,0 @@
-import Prompt from './Prompt'
-import React from 'react'
-import { Card, Image } from 'semantic-ui-react'
-
-const LabelExampleViewer = (props) => {
-  const requestExample = (e) => {
-    e.stopPropagation()
-    if (props.onRequestExample) {
-      props.onRequestExample()
-    }
-  }
-  const renderContent = () => {
-    if (!props.lbl) return null
-    if (!props.exampleImg) return null
-    const description = (
-      <div>
-        {props.lbl.description}
-        <h4>Comment:</h4>
-        {props.exampleImg.anno ? props.exampleImg.anno.comment : 'no comment'}
-      </div>
-    )
-    return (
-      <div>
-        <Card
-
-        // image={props.exampleImg.img}
-        // description={props.lbl.description}
-        // header={props.lbl.label}
-        // // description={props.exampleImg.anno.comment}
-        // extra={props.exampleImg.anno.comment}
-        >
-          <Image
-            onClick={(e) => requestExample(e)}
-            src={props.exampleImg.img}
-            wrapped
-            ui={false}
-          />
-          <Card.Content>
-            <Card.Header>{props.lbl.label}</Card.Header>
-            {/* <Card.Description>{props.lbl.description}</Card.Description> */}
-            <Card.Description>{description}</Card.Description>
-            {/* <Card.Description>{props.exampleImg.anno.comment}</Card.Description> */}
-          </Card.Content>
-        </Card>
-        {/* <Header inverted>{props.lbl.label}</Header>
-            {props.lbl.description}
-            <Image src={props.exampleImg.img} centered size='medium'></Image> */}
-      </div>
-    )
-  }
-
-  const handlePromptClick = () => {
-    if (props.onClose) {
-      props.onClose()
-    }
-  }
-
-  return (
-    <Prompt
-      onClick={() => {
-        handlePromptClick()
-      }}
-      active={props.active}
-      content={renderContent()}
-    />
-  )
-}
-
-export default LabelExampleViewer

package/src/InfoBoxes/AnnoDetails.jsx

@@ -1,165 +0,0 @@
-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()
-  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>
-          {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

@@ -1,106 +0,0 @@
-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([])
-
-  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

@@ -1,76 +0,0 @@
-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)
-    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> */}
-            <hr />
-            <Message.Content>{this.props.content}</Message.Content>
-          </Message>
-        </div>
-      </Draggable>
-    )
-  }
-}
-
-export default InfoBox

package/src/InfoBoxes/InfoBoxArea.jsx

@@ -1,152 +0,0 @@
-import { Component } from 'react'
-import AnnoDetails from './AnnoDetails'
-import AnnoStats from './AnnoStats'
-import LabelInfo from './LabelInfo'
-
-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

package/src/InfoBoxes/LabelInfo.jsx

@@ -1,107 +0,0 @@
-import React, { useEffect, useState } from '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 = () => {
-    // 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>
-        <h4 onClick={() => handleImgClick()}>Example:</h4>
-        <SiaPopup
-          trigger={
-            <img
-              src={props.exampleImg.img}
-              onClick={() => handleImgClick()}
-              style={{ borderRadius: 25, width: '100%' }}
-            />
-          }
-          content={'Click on image to view more examples'}
-        />
-      </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>
-        <h4>{myLbl.label}</h4>
-        <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