Skip to content

Commit

Permalink
🚑 Remove resizable layout when no records and fix undefined prop (#5162)
Browse files Browse the repository at this point in the history
  • Loading branch information
@damianpumar
damianpumar committed Jul 5, 2024
1 parent e484fb2 commit 1a69c55
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 102 deletions.
31 changes: 19 additions & 12 deletions argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,21 @@
<template>
<span class="bulk__container">
<LoadLine v-if="isSubmitting || isDraftSaving || isDiscarding" />

<div v-if="!records.hasRecordsToAnnotate">
<section class="wrapper__records">
<DatasetFilters :recordCriteria="recordCriteria" />
</section>

<div class="wrapper--empty">
<p class="wrapper__text --heading3" v-text="noRecordsMessage" />
</div>
</div>

<VerticalResizable
class="wrapper"
v-else
:id="`${recordCriteria.datasetId}-r-v-rz`"
class="wrapper"
>
<template #left>
<HorizontalResizable
Expand Down Expand Up @@ -86,11 +98,7 @@
/>
<PaginationFeedbackTask :recordCriteria="recordCriteria" />
</div>
<div
ref="bulkScrollableArea"
class="bulk__records snap"
v-if="records.hasRecordsToAnnotate"
>
<div ref="bulkScrollableArea" class="bulk__records snap">
<Record
class="snap-child"
:class="{
Expand All @@ -106,9 +114,6 @@
@on-select-record="onSelectRecord"
/>
</div>
<div v-else class="wrapper--empty">
<p class="wrapper__text --heading3" v-text="noRecordsMessage" />
</div>
</section>
</template>
<template #downHeader>
Expand Down Expand Up @@ -274,9 +279,11 @@ export default {
return this.affectAllRecords && this.numberOfSelectedRecords > 100;
},
spansQuestionsWithSelectedEntities() {
return this.record.questions
.filter((q) => q.isSpanType)
.filter((s) => s.answer.options.some((e) => e.isSelected));
return (
this.record?.questions
.filter((q) => q.isSpanType)
.filter((s) => s.answer.options.some((e) => e.isSelected)) ?? []
);
},
},
methods: {
Expand Down
203 changes: 113 additions & 90 deletions argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,116 @@
<template>
<VerticalResizable class="wrapper" :id="`${recordCriteria.datasetId}-r-v-rz`">
<template #left>
<HorizontalResizable
:id="`${recordCriteria.datasetId}-r-h-rz`"
class="wrapper__left"
>
<template #up>
<section class="wrapper__records">
<DatasetFilters :recordCriteria="recordCriteria">
<ToggleAnnotationType
v-if="
records.hasRecordsToAnnotate &&
recordCriteria.committed.isPending
"
<span class="focus__container">
<div v-if="!records.hasRecordsToAnnotate">
<section class="wrapper__records">
<DatasetFilters :recordCriteria="recordCriteria" />
</section>

<div class="wrapper--empty">
<p class="wrapper__text --heading3" v-text="noRecordsMessage" />
</div>
</div>
<VerticalResizable
v-else
:id="`${recordCriteria.datasetId}-r-v-rz`"
class="wrapper"
>
<template #left>
<HorizontalResizable
:id="`${recordCriteria.datasetId}-r-h-rz`"
class="wrapper__left"
>
<template #up>
<section class="wrapper__records">
<DatasetFilters :recordCriteria="recordCriteria">
<ToggleAnnotationType
v-if="
records.hasRecordsToAnnotate &&
recordCriteria.committed.isPending
"
:recordCriteria="recordCriteria"
/></DatasetFilters>
<SimilarityRecordReference
v-show="recordCriteria.isFilteringBySimilarity"
v-if="!!records.reference"
:fields="records.reference.fields"
:recordCriteria="recordCriteria"
/></DatasetFilters>
<SimilarityRecordReference
v-show="recordCriteria.isFilteringBySimilarity"
v-if="!!records.reference"
:fields="records.reference.fields"
:recordCriteria="recordCriteria"
:availableVectors="datasetVectors"
/>
<div class="wrapper__records__header">
<PaginationFeedbackTask :recordCriteria="recordCriteria" />
</div>
<Record
v-if="records.hasRecordsToAnnotate"
:datasetVectors="datasetVectors"
:recordCriteria="recordCriteria"
:availableVectors="datasetVectors"
/>
<div class="wrapper__records__header">
<PaginationFeedbackTask :recordCriteria="recordCriteria" />
</div>
<Record
v-if="records.hasRecordsToAnnotate"
:datasetVectors="datasetVectors"
:recordCriteria="recordCriteria"
:record="record"
/>
<div v-else class="wrapper--empty">
<p class="wrapper__text --heading3" v-text="noRecordsMessage" />
</div>
</section>
</template>

<template #downHeader>
<p v-text="$t('guidelines')" />
</template>
<template #downContent>
<AnnotationGuidelines />
</template>
</HorizontalResizable>
</template>

<template #right>
<HorizontalResizable
:id="`${recordCriteria.datasetId}-q-h-rz}`"
class="wrapper__right"
>
<template #up>
<QuestionsForm
v-if="!!record"
:key="`${record.id}_questions`"
class="wrapper__form"
:class="statusClass"
:datasetId="recordCriteria.datasetId"
:record="record"
:show-discard-button="!record.isDiscarded"
:is-draft-saving="isDraftSaving"
:is-submitting="isSubmitting"
:is-discarding="isDiscarding"
:enableAutoSubmitWithKeyboard="true"
@on-submit-responses="onSubmit"
@on-discard-responses="onDiscard"
@on-save-draft="onSaveDraft"
/>
<div v-else class="wrapper--empty">
<p class="wrapper__text --heading3" v-text="noRecordsMessage" />
</div>
</section>
</template>

<template #downHeader>
</template>
<template #downHeader>
<p v-text="$t('metrics.progress')" />
<AnnotationProgress
class="annotation-progress"
:datasetId="recordCriteria.datasetId"
enableFetch
/>
</template>
<template #downContent>
<AnnotationProgress :datasetId="recordCriteria.datasetId" />
<AnnotationProgressDetailed :datasetId="recordCriteria.datasetId" />
</template>
</HorizontalResizable>
</template>
<BaseCollapsablePanel
hideOnDesktop
:isExpanded="expandedGuidelines"
@toggle-expand="expandedGuidelines = !expandedGuidelines"
>
<template #panelHeader>
<p v-text="$t('guidelines')" />
</template>
<template #downContent>
<template #panelContent>
<AnnotationGuidelines />
</template>
</HorizontalResizable>
</template>

<template #right>
<HorizontalResizable
:id="`${recordCriteria.datasetId}-q-h-rz}`"
class="wrapper__right"
>
<template #up>
<QuestionsForm
v-if="!!record"
:key="`${record.id}_questions`"
class="wrapper__form"
:class="statusClass"
:datasetId="recordCriteria.datasetId"
:record="record"
:show-discard-button="!record.isDiscarded"
:is-draft-saving="isDraftSaving"
:is-submitting="isSubmitting"
:is-discarding="isDiscarding"
:enableAutoSubmitWithKeyboard="true"
@on-submit-responses="onSubmit"
@on-discard-responses="onDiscard"
@on-save-draft="onSaveDraft"
/>
</template>
<template #downHeader>
<p v-text="$t('metrics.progress')" />
<AnnotationProgress
class="annotation-progress"
:datasetId="recordCriteria.datasetId"
enableFetch
/>
</template>
<template #downContent>
<AnnotationProgress :datasetId="recordCriteria.datasetId" />
<AnnotationProgressDetailed :datasetId="recordCriteria.datasetId" />
</template>
</HorizontalResizable>
</template>
<BaseCollapsablePanel
hideOnDesktop
:isExpanded="expandedGuidelines"
@toggle-expand="expandedGuidelines = !expandedGuidelines"
>
<template #panelHeader>
<p v-text="$t('guidelines')" />
</template>
<template #panelContent>
<AnnotationGuidelines />
</template>
</BaseCollapsablePanel>
</VerticalResizable>
</BaseCollapsablePanel>
</VerticalResizable>
</span>
</template>
<script>
import { useFocusAnnotationViewModel } from "./useFocusAnnotationViewModel";
Expand Down Expand Up @@ -152,6 +167,14 @@ export default {
</script>

<style lang="scss" scoped>
.focus {
&__container {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
}
.wrapper {
position: relative;
display: flex;
Expand Down

0 comments on commit 1a69c55

Please sign in to comment.