Skip to content

Commit 1a69c55

Browse files
damianpumardamianpumar
authored
🚑 Remove resizable layout when no records and fix undefined prop (#5162)
1 parent e484fb2 commit 1a69c55

File tree

2 files changed

+132
-102
lines changed

2 files changed

+132
-102
lines changed

‎argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
11
<template>
22
<span class="bulk__container">
33
<LoadLine v-if="isSubmitting || isDraftSaving || isDiscarding" />
4+
5+
<div v-if="!records.hasRecordsToAnnotate">
6+
<section class="wrapper__records">
7+
<DatasetFilters :recordCriteria="recordCriteria" />
8+
</section>
9+
10+
<div class="wrapper--empty">
11+
<p class="wrapper__text --heading3" v-text="noRecordsMessage" />
12+
</div>
13+
</div>
14+
415
<VerticalResizable
5-
class="wrapper"
16+
v-else
617
:id="`${recordCriteria.datasetId}-r-v-rz`"
18+
class="wrapper"
719
>
820
<template #left>
921
<HorizontalResizable
@@ -86,11 +98,7 @@
8698
/>
8799
<PaginationFeedbackTask :recordCriteria="recordCriteria" />
88100
</div>
89-
<div
90-
ref="bulkScrollableArea"
91-
class="bulk__records snap"
92-
v-if="records.hasRecordsToAnnotate"
93-
>
101+
<div ref="bulkScrollableArea" class="bulk__records snap">
94102
<Record
95103
class="snap-child"
96104
:class="{
@@ -106,9 +114,6 @@
106114
@on-select-record="onSelectRecord"
107115
/>
108116
</div>
109-
<div v-else class="wrapper--empty">
110-
<p class="wrapper__text --heading3" v-text="noRecordsMessage" />
111-
</div>
112117
</section>
113118
</template>
114119
<template #downHeader>
@@ -274,9 +279,11 @@ export default {
274279
return this.affectAllRecords && this.numberOfSelectedRecords > 100;
275280
},
276281
spansQuestionsWithSelectedEntities() {
277-
return this.record.questions
278-
.filter((q) => q.isSpanType)
279-
.filter((s) => s.answer.options.some((e) => e.isSelected));
282+
return (
283+
this.record?.questions
284+
.filter((q) => q.isSpanType)
285+
.filter((s) => s.answer.options.some((e) => e.isSelected)) ?? []
286+
);
280287
},
281288
},
282289
methods: {

‎argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue‎

Lines changed: 113 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,116 @@
11
<template>
2-
<VerticalResizable class="wrapper" :id="`${recordCriteria.datasetId}-r-v-rz`">
3-
<template #left>
4-
<HorizontalResizable
5-
:id="`${recordCriteria.datasetId}-r-h-rz`"
6-
class="wrapper__left"
7-
>
8-
<template #up>
9-
<section class="wrapper__records">
10-
<DatasetFilters :recordCriteria="recordCriteria">
11-
<ToggleAnnotationType
12-
v-if="
13-
records.hasRecordsToAnnotate &&
14-
recordCriteria.committed.isPending
15-
"
2+
<span class="focus__container">
3+
<div v-if="!records.hasRecordsToAnnotate">
4+
<section class="wrapper__records">
5+
<DatasetFilters :recordCriteria="recordCriteria" />
6+
</section>
7+
8+
<div class="wrapper--empty">
9+
<p class="wrapper__text --heading3" v-text="noRecordsMessage" />
10+
</div>
11+
</div>
12+
<VerticalResizable
13+
v-else
14+
:id="`${recordCriteria.datasetId}-r-v-rz`"
15+
class="wrapper"
16+
>
17+
<template #left>
18+
<HorizontalResizable
19+
:id="`${recordCriteria.datasetId}-r-h-rz`"
20+
class="wrapper__left"
21+
>
22+
<template #up>
23+
<section class="wrapper__records">
24+
<DatasetFilters :recordCriteria="recordCriteria">
25+
<ToggleAnnotationType
26+
v-if="
27+
records.hasRecordsToAnnotate &&
28+
recordCriteria.committed.isPending
29+
"
30+
:recordCriteria="recordCriteria"
31+
/></DatasetFilters>
32+
<SimilarityRecordReference
33+
v-show="recordCriteria.isFilteringBySimilarity"
34+
v-if="!!records.reference"
35+
:fields="records.reference.fields"
1636
:recordCriteria="recordCriteria"
17-
/></DatasetFilters>
18-
<SimilarityRecordReference
19-
v-show="recordCriteria.isFilteringBySimilarity"
20-
v-if="!!records.reference"
21-
:fields="records.reference.fields"
22-
:recordCriteria="recordCriteria"
23-
:availableVectors="datasetVectors"
24-
/>
25-
<div class="wrapper__records__header">
26-
<PaginationFeedbackTask :recordCriteria="recordCriteria" />
27-
</div>
28-
<Record
29-
v-if="records.hasRecordsToAnnotate"
30-
:datasetVectors="datasetVectors"
31-
:recordCriteria="recordCriteria"
37+
:availableVectors="datasetVectors"
38+
/>
39+
<div class="wrapper__records__header">
40+
<PaginationFeedbackTask :recordCriteria="recordCriteria" />
41+
</div>
42+
<Record
43+
v-if="records.hasRecordsToAnnotate"
44+
:datasetVectors="datasetVectors"
45+
:recordCriteria="recordCriteria"
46+
:record="record"
47+
/>
48+
<div v-else class="wrapper--empty">
49+
<p class="wrapper__text --heading3" v-text="noRecordsMessage" />
50+
</div>
51+
</section>
52+
</template>
53+
54+
<template #downHeader>
55+
<p v-text="$t('guidelines')" />
56+
</template>
57+
<template #downContent>
58+
<AnnotationGuidelines />
59+
</template>
60+
</HorizontalResizable>
61+
</template>
62+
63+
<template #right>
64+
<HorizontalResizable
65+
:id="`${recordCriteria.datasetId}-q-h-rz}`"
66+
class="wrapper__right"
67+
>
68+
<template #up>
69+
<QuestionsForm
70+
v-if="!!record"
71+
:key="`${record.id}_questions`"
72+
class="wrapper__form"
73+
:class="statusClass"
74+
:datasetId="recordCriteria.datasetId"
3275
:record="record"
76+
:show-discard-button="!record.isDiscarded"
77+
:is-draft-saving="isDraftSaving"
78+
:is-submitting="isSubmitting"
79+
:is-discarding="isDiscarding"
80+
:enableAutoSubmitWithKeyboard="true"
81+
@on-submit-responses="onSubmit"
82+
@on-discard-responses="onDiscard"
83+
@on-save-draft="onSaveDraft"
3384
/>
34-
<div v-else class="wrapper--empty">
35-
<p class="wrapper__text --heading3" v-text="noRecordsMessage" />
36-
</div>
37-
</section>
38-
</template>
39-
40-
<template #downHeader>
85+
</template>
86+
<template #downHeader>
87+
<p v-text="$t('metrics.progress')" />
88+
<AnnotationProgress
89+
class="annotation-progress"
90+
:datasetId="recordCriteria.datasetId"
91+
enableFetch
92+
/>
93+
</template>
94+
<template #downContent>
95+
<AnnotationProgress :datasetId="recordCriteria.datasetId" />
96+
<AnnotationProgressDetailed :datasetId="recordCriteria.datasetId" />
97+
</template>
98+
</HorizontalResizable>
99+
</template>
100+
<BaseCollapsablePanel
101+
hideOnDesktop
102+
:isExpanded="expandedGuidelines"
103+
@toggle-expand="expandedGuidelines = !expandedGuidelines"
104+
>
105+
<template #panelHeader>
41106
<p v-text="$t('guidelines')" />
42107
</template>
43-
<template #downContent>
108+
<template #panelContent>
44109
<AnnotationGuidelines />
45110
</template>
46-
</HorizontalResizable>
47-
</template>
48-
49-
<template #right>
50-
<HorizontalResizable
51-
:id="`${recordCriteria.datasetId}-q-h-rz}`"
52-
class="wrapper__right"
53-
>
54-
<template #up>
55-
<QuestionsForm
56-
v-if="!!record"
57-
:key="`${record.id}_questions`"
58-
class="wrapper__form"
59-
:class="statusClass"
60-
:datasetId="recordCriteria.datasetId"
61-
:record="record"
62-
:show-discard-button="!record.isDiscarded"
63-
:is-draft-saving="isDraftSaving"
64-
:is-submitting="isSubmitting"
65-
:is-discarding="isDiscarding"
66-
:enableAutoSubmitWithKeyboard="true"
67-
@on-submit-responses="onSubmit"
68-
@on-discard-responses="onDiscard"
69-
@on-save-draft="onSaveDraft"
70-
/>
71-
</template>
72-
<template #downHeader>
73-
<p v-text="$t('metrics.progress')" />
74-
<AnnotationProgress
75-
class="annotation-progress"
76-
:datasetId="recordCriteria.datasetId"
77-
enableFetch
78-
/>
79-
</template>
80-
<template #downContent>
81-
<AnnotationProgress :datasetId="recordCriteria.datasetId" />
82-
<AnnotationProgressDetailed :datasetId="recordCriteria.datasetId" />
83-
</template>
84-
</HorizontalResizable>
85-
</template>
86-
<BaseCollapsablePanel
87-
hideOnDesktop
88-
:isExpanded="expandedGuidelines"
89-
@toggle-expand="expandedGuidelines = !expandedGuidelines"
90-
>
91-
<template #panelHeader>
92-
<p v-text="$t('guidelines')" />
93-
</template>
94-
<template #panelContent>
95-
<AnnotationGuidelines />
96-
</template>
97-
</BaseCollapsablePanel>
98-
</VerticalResizable>
111+
</BaseCollapsablePanel>
112+
</VerticalResizable>
113+
</span>
99114
</template>
100115
<script>
101116
import { useFocusAnnotationViewModel } from "./useFocusAnnotationViewModel";
@@ -152,6 +167,14 @@ export default {
152167
</script>
153168

154169
<style lang="scss" scoped>
170+
.focus {
171+
&__container {
172+
display: flex;
173+
flex-direction: column;
174+
height: 100%;
175+
min-height: 0;
176+
}
177+
}
155178
.wrapper {
156179
position: relative;
157180
display: flex;

0 commit comments

Comments
 (0)