Revize 6973d036
Přidáno uživatelem Lukáš Vlček před asi 2 roky(ů)
| webapp/components/annotation/AnnotationItem.tsx | ||
|---|---|---|
| 8 | 8 |
DownOutlined, |
| 9 | 9 |
DeleteOutlined, |
| 10 | 10 |
TagOutlined, |
| 11 |
EyeOutlined, |
|
| 11 | 12 |
} from '@ant-design/icons'; |
| 12 | 13 |
import { AnnotationContext } from '../../contexts/AnnotationContext';
|
| 13 | 14 |
import { ETagSentiment, TagInstanceInfo } from '../../api';
|
| ... | ... | |
| 20 | 21 |
* @returns The item that represents an annotation. |
| 21 | 22 |
*/ |
| 22 | 23 |
export function AnnotationItem(props: { tag: Tag }) {
|
| 23 |
const { markSelectedText } = useContext(AnnotationContext);
|
|
| 24 |
|
|
| 25 | 24 |
/** |
| 26 | 25 |
* Should properties of this annotation be visible? |
| 27 | 26 |
*/ |
| ... | ... | |
| 37 | 36 |
changeNote, |
| 38 | 37 |
changeSentiment, |
| 39 | 38 |
changeLength, |
| 39 |
selectedOccurrenceId, |
|
| 40 |
selectedInstanceId, |
|
| 41 |
setSelectedOccurrenceId, |
|
| 42 |
setSelectedInstanceId, |
|
| 40 | 43 |
} = useContext(AnnotationContext); |
| 41 | 44 |
|
| 42 | 45 |
/** |
| ... | ... | |
| 90 | 93 |
|
| 91 | 94 |
return ( |
| 92 | 95 |
<Container> |
| 93 |
<Row className="border rounded"> |
|
| 96 |
<Row |
|
| 97 |
className="border rounded" |
|
| 98 |
style={{
|
|
| 99 |
backgroundColor: |
|
| 100 |
selectedInstanceId === props.tag.instanceId ? '#FCF3CF' : 'white', |
|
| 101 |
}} |
|
| 102 |
> |
|
| 94 | 103 |
<Col sm="auto" className="d-flex align-items-center"> |
| 95 |
<TagOutlined /> |
|
| 104 |
<Button |
|
| 105 |
icon={<TagOutlined style={{ marginLeft: 0 }} />}
|
|
| 106 |
onClick={() => {
|
|
| 107 |
setSelectedInstanceId(props.tag.instanceId); |
|
| 108 |
setSelectedOccurrenceId(null); |
|
| 109 |
}} |
|
| 110 |
style={{
|
|
| 111 |
border: 'none', |
|
| 112 |
paddingLeft: 0, |
|
| 113 |
backgroundColor: |
|
| 114 |
selectedInstanceId === props.tag.instanceId |
|
| 115 |
? '#FCF3CF' |
|
| 116 |
: 'white', |
|
| 117 |
}} |
|
| 118 |
title={'Zvýraznit značky'}
|
|
| 119 |
/> |
|
| 96 | 120 |
</Col> |
| 97 | 121 |
<Col className="d-flex align-items-center"> |
| 98 | 122 |
{props.tag.tagName}
|
| ... | ... | |
| 119 | 143 |
<div>Výskyty:</div> |
| 120 | 144 |
{props.tag.occurrences.map((occurrence, index) => {
|
| 121 | 145 |
return ( |
| 122 |
<Container key={index} className="shadow-sm pb-1 pt-1">
|
|
| 123 |
<Row> |
|
| 146 |
<Container |
|
| 147 |
key={index}
|
|
| 148 |
className="shadow-sm" |
|
| 149 |
style={{
|
|
| 150 |
backgroundColor: |
|
| 151 |
selectedOccurrenceId === occurrence.occurenceId |
|
| 152 |
? '#D8E1E9' |
|
| 153 |
: 'white', |
|
| 154 |
}} |
|
| 155 |
> |
|
| 156 |
<Row className="mb-1 mt-1"> |
|
| 124 | 157 |
<Col> |
| 125 | 158 |
<Row> |
| 126 | 159 |
<Col>Pozice: {occurrence.position}</Col>
|
| ... | ... | |
| 180 | 213 |
</Row> |
| 181 | 214 |
)} |
| 182 | 215 |
</Col> |
| 183 |
<Col sm="auto" className="d-flex align-items-center"> |
|
| 216 |
<Col |
|
| 217 |
sm="auto" |
|
| 218 |
className="d-flex align-items-center flex-column justify-content-sm-evenly" |
|
| 219 |
> |
|
| 220 |
<Button |
|
| 221 |
icon={<EyeOutlined />}
|
|
| 222 |
onClick={() => {
|
|
| 223 |
setSelectedOccurrenceId( |
|
| 224 |
occurrence.occurenceId ?? null |
|
| 225 |
); |
|
| 226 |
setSelectedInstanceId( |
|
| 227 |
props.tag.instanceId |
|
| 228 |
); |
|
| 229 |
}} |
|
| 230 |
title={'Zvýraznit výskyt'}
|
|
| 231 |
/> |
|
| 184 | 232 |
<Button |
| 185 | 233 |
icon={<DeleteOutlined />}
|
| 186 | 234 |
onClick={onDeleteOccurrence(occurrence)}
|
| 187 | 235 |
danger |
| 188 |
></Button>
|
|
| 236 |
/>
|
|
| 189 | 237 |
</Col> |
| 190 | 238 |
</Row> |
| 191 | 239 |
</Container> |
Také k dispozici: Unified diff
Selected tags highlighting
On click in the middle panel or on click on highlight buttons in the right panel