Skip to content

Commit d37f57d

Browse files
bigabigbigabig
committed
fixed bug with annotation explorer & codes
1 parent 7ef0673 commit d37f57d

File tree

6 files changed

+52
-74
lines changed

6 files changed

+52
-74
lines changed

‎frontend/src/views/annotation/AnnotationExploer/AnnotationExplorer.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ function AnnotationExplorer<T extends AnnotationRead>({
105105
position: "relative",
106106
}}
107107
>
108-
{annotations ? (
108+
{annotations && codes ? (
109109
<>
110110
{annotations.length > 0
111111
? filteredAnnotations.length > 0
@@ -127,6 +127,7 @@ function AnnotationExplorer<T extends AnnotationRead>({
127127
>
128128
{renderAnnotationCard({
129129
annotation,
130+
code: codes[annotation.code_id],
130131
isSelected,
131132
cardProps: {
132133
variant: "outlined",

‎frontend/src/views/annotation/AnnotationExploer/BBoxAnnotationCard.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
Typography,
1010
} from "@mui/material";
1111
import { memo } from "react";
12-
import CodeHooks from "../../../api/CodeHooks.ts";
1312
import SdocHooks from "../../../api/SdocHooks.ts";
1413
import { AttachedObjectType } from "../../../api/openapi/models/AttachedObjectType.ts";
1514
import { BBoxAnnotationRead } from "../../../api/openapi/models/BBoxAnnotationRead.ts";
@@ -20,9 +19,14 @@ import AnnotationCardActionsMenu from "./AnnotationCardActionMenu.tsx";
2019
import AnnotationCardMemo from "./AnnotationCardMemo.tsx";
2120
import { AnnotationCardProps } from "./types/AnnotationCardProps.ts";
2221

23-
function BBoxAnnotationCard({ isSelected, annotation, onClick, cardProps }: AnnotationCardProps<BBoxAnnotationRead>) {
22+
function BBoxAnnotationCard({
23+
isSelected,
24+
annotation,
25+
code,
26+
onClick,
27+
cardProps,
28+
}: AnnotationCardProps<BBoxAnnotationRead>) {
2429
const sdocData = SdocHooks.useGetDocumentData(annotation.sdoc_id);
25-
const code = CodeHooks.useGetCode(annotation.code_id);
2630

2731
return (
2832
<Card {...cardProps}>
@@ -45,7 +49,7 @@ function BBoxAnnotationCard({ isSelected, annotation, onClick, cardProps }: Anno
4549
<Divider />
4650
<CardActionArea onClick={onClick}>
4751
<CardContent sx={{ p: 1, pb: "0px !important", textAlign: "center" }}>
48-
{sdocData.isSuccess && code.isSuccess ? (
52+
{sdocData.isSuccess ? (
4953
<ImageCropper
5054
imageUrl={encodeURI("/content/" + sdocData.data.repo_url)}
5155
x={annotation.x_min}
@@ -55,7 +59,7 @@ function BBoxAnnotationCard({ isSelected, annotation, onClick, cardProps }: Anno
5559
height={annotation.y_max - annotation.y_min}
5660
targetHeight={100}
5761
style={{
58-
border: "4px solid " + code.data.color,
62+
border: "4px solid " + code.color,
5963
}}
6064
/>
6165
) : (
@@ -68,14 +72,14 @@ function BBoxAnnotationCard({ isSelected, annotation, onClick, cardProps }: Anno
6872
</Stack>
6973
</CardContent>
7074
</CardActionArea>
71-
{isSelected && code.isSuccess && (
75+
{isSelected && (
7276
<>
7377
<Divider />
7478
<AnnotationCardMemo
7579
annotationId={annotation.id}
7680
annotationType={AttachedObjectType.BBOX_ANNOTATION}
7781
annotationText="Image"
78-
codeName={code.data.name}
82+
codeName={code.name}
7983
/>
8084
</>
8185
)}

‎frontend/src/views/annotation/AnnotationExploer/SentenceAnnotationCard.tsx‎

Lines changed: 15 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,4 @@
1-
import {
2-
Card,
3-
CardActionArea,
4-
CardContent,
5-
CardHeader,
6-
CircularProgress,
7-
Divider,
8-
Stack,
9-
Typography,
10-
} from "@mui/material";
11-
import CodeHooks from "../../../api/CodeHooks.ts";
1+
import { Card, CardActionArea, CardContent, CardHeader, Divider, Stack, Typography } from "@mui/material";
122
import { AttachedObjectType } from "../../../api/openapi/models/AttachedObjectType.ts";
133
import { SentenceAnnotationRead } from "../../../api/openapi/models/SentenceAnnotationRead.ts";
144
import CodeRenderer from "../../../components/Code/CodeRenderer.tsx";
@@ -20,11 +10,10 @@ import { AnnotationCardProps } from "./types/AnnotationCardProps.ts";
2010
function SentenceAnnotationCard({
2111
isSelected,
2212
annotation,
13+
code,
2314
onClick,
2415
cardProps,
2516
}: AnnotationCardProps<SentenceAnnotationRead>) {
26-
const code = CodeHooks.useGetCode(annotation.code_id);
27-
2817
return (
2918
<Card {...cardProps}>
3019
<CardHeader
@@ -46,35 +35,31 @@ function SentenceAnnotationCard({
4635
<Divider />
4736
<CardActionArea onClick={onClick}>
4837
<CardContent sx={{ pr: 1, pl: 1.5, pt: 1, pb: "0px !important" }}>
49-
{code.isSuccess ? (
50-
<Typography
51-
variant="body1"
52-
sx={{
53-
wordBreak: "break-word",
54-
borderLeft: "3px solid",
55-
borderColor: code.data.color,
56-
pl: 1,
57-
}}
58-
>
59-
This annotation spans sentence {annotation.sentence_id_start + 1} - {annotation.sentence_id_end + 1}.
60-
</Typography>
61-
) : (
62-
<CircularProgress />
63-
)}
38+
<Typography
39+
variant="body1"
40+
sx={{
41+
wordBreak: "break-word",
42+
borderLeft: "3px solid",
43+
borderColor: code.color,
44+
pl: 1,
45+
}}
46+
>
47+
This annotation spans sentence {annotation.sentence_id_start + 1} - {annotation.sentence_id_end + 1}.
48+
</Typography>
6449
<Stack direction="row" justifyContent="end" width="100%">
6550
<Typography variant="subtitle2" color="textDisabled" fontSize={12}>
6651
<UserName userId={annotation.user_id} />
6752
</Typography>
6853
</Stack>
6954
</CardContent>
7055
</CardActionArea>
71-
{isSelected && code.isSuccess && (
56+
{isSelected && (
7257
<>
7358
<Divider />
7459
<AnnotationCardMemo
7560
annotationId={annotation.id}
7661
annotationType={AttachedObjectType.SPAN_ANNOTATION}
77-
codeName={code.data.name}
62+
codeName={code.name}
7863
annotationText={"Sentence"}
7964
/>
8065
</>

‎frontend/src/views/annotation/AnnotationExploer/SpanAnnotationCard.tsx‎

Lines changed: 21 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,4 @@
1-
import {
2-
Card,
3-
CardActionArea,
4-
CardContent,
5-
CardHeader,
6-
CircularProgress,
7-
Divider,
8-
Stack,
9-
Typography,
10-
} from "@mui/material";
11-
import CodeHooks from "../../../api/CodeHooks.ts";
1+
import { Card, CardActionArea, CardContent, CardHeader, Divider, Stack, Typography } from "@mui/material";
122
import { AttachedObjectType } from "../../../api/openapi/models/AttachedObjectType.ts";
133
import { SpanAnnotationRead } from "../../../api/openapi/models/SpanAnnotationRead.ts";
144
import CodeRenderer from "../../../components/Code/CodeRenderer.tsx";
@@ -17,9 +7,13 @@ import AnnotationCardActionsMenu from "./AnnotationCardActionMenu.tsx";
177
import AnnotationCardMemo from "./AnnotationCardMemo.tsx";
188
import { AnnotationCardProps } from "./types/AnnotationCardProps.ts";
199

20-
function SpanAnnotationCard({ isSelected, annotation, onClick, cardProps }: AnnotationCardProps<SpanAnnotationRead>) {
21-
const code = CodeHooks.useGetCode(annotation.code_id);
22-
10+
function SpanAnnotationCard({
11+
isSelected,
12+
annotation,
13+
code,
14+
onClick,
15+
cardProps,
16+
}: AnnotationCardProps<SpanAnnotationRead>) {
2317
return (
2418
<Card {...cardProps}>
2519
<CardHeader
@@ -41,35 +35,31 @@ function SpanAnnotationCard({ isSelected, annotation, onClick, cardProps }: Anno
4135
<Divider />
4236
<CardActionArea onClick={onClick}>
4337
<CardContent sx={{ pr: 1, pl: 1.5, pt: 1, pb: "0px !important" }}>
44-
{code.isSuccess ? (
45-
<Typography
46-
variant="body1"
47-
sx={{
48-
wordBreak: "break-word",
49-
borderLeft: "3px solid",
50-
borderColor: code.data.color,
51-
pl: 1,
52-
}}
53-
>
54-
{annotation.text}
55-
</Typography>
56-
) : (
57-
<CircularProgress />
58-
)}
38+
<Typography
39+
variant="body1"
40+
sx={{
41+
wordBreak: "break-word",
42+
borderLeft: "3px solid",
43+
borderColor: code.color,
44+
pl: 1,
45+
}}
46+
>
47+
{annotation.text}
48+
</Typography>
5949
<Stack direction="row" justifyContent="end" width="100%">
6050
<Typography variant="subtitle2" color="textDisabled" fontSize={12}>
6151
<UserName userId={annotation.user_id} />
6252
</Typography>
6353
</Stack>
6454
</CardContent>
6555
</CardActionArea>
66-
{isSelected && code.isSuccess && (
56+
{isSelected && (
6757
<>
6858
<Divider />
6959
<AnnotationCardMemo
7060
annotationId={annotation.id}
7161
annotationType={AttachedObjectType.SPAN_ANNOTATION}
72-
codeName={code.data.name}
62+
codeName={code.name}
7363
annotationText={annotation.text}
7464
/>
7565
</>

‎frontend/src/views/annotation/AnnotationExploer/SpanAnnotationExplorer.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,7 @@ function SpanAnnotationExplorer({ sdocId }: { sdocId: number }) {
1313

1414
return (
1515
<AnnotationExplorer
16-
annotations={annotations.data?.map((annotation) => ({
17-
...annotation,
18-
code_id: annotation.code_id,
19-
span_text_id: 1,
20-
}))}
16+
annotations={annotations.data}
2117
filterByText={filterByText}
2218
renderAnnotationCard={SpanAnnotationCard}
2319
/>

‎frontend/src/views/annotation/AnnotationExploer/types/AnnotationCardProps.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { CardProps } from "@mui/material";
2+
import { CodeRead } from "../../../../api/openapi/models/CodeRead.ts";
23
import { AnnotationRead } from "./AnnotationRead.ts";
34

45
export interface AnnotationCardProps<T extends AnnotationRead> {
56
annotation: T;
7+
code: CodeRead;
68
onClick: () => void;
79
cardProps?: CardProps;
810
isSelected: boolean;

0 commit comments

Comments
 (0)