Merge branch 'develop' into ci/configure-mono-repo

.github/workflows/argilla-workflow.yml

@@ -167,6 +167,7 @@ jobs:
       !cancelled() &&
       github.event.pull_request.head.repo.full_name == github.repository &&
       needs.build_quickstart_for_develop_docker_image.result == 'success' &&
+      needs.check_repo_files.outputs.frontendChanges == 'true' &&
       github.event_name == 'pull_request' && github.event.pull_request.draft == false
     with:
       image-name: argilla/argilla-quickstart-for-dev

.github/workflows/argilla/deploy-environment.yml

@@ -1,13 +1,24 @@
 name: Deploy Argilla environment
 
 on:
+
+  workflow_dispatch:
+    inputs:
+      image-name:
+        description: The name of the Docker image to deploy.
+        type: string
+        default: argilla/argilla-quickstart-for-dev
+      image-version:
+        description: The version of the Docker image to deploy. In the form pr-<PR_NUMBER>.
+        type: string
+
   workflow_call:
     inputs:
       image-name:
         description: The name of the Docker image to deploy.
         type: string
       image-version:
-        description: The version of the Docker image to deploy.
+        description: The version of the Docker image to deploy. In the form pr-<PR_NUMBER>.
         type: string
 
 jobs:
@@ -57,6 +68,7 @@ jobs:
 
       - name: Post credentials in Slack
         uses: ./.github/actions/slack-post-credentials
+        if: ${{ github.event_name != 'workflow_dispatch' }}
         with:
           slack-channel-name: argilla-github
           url: ${{ steps.deploy.outputs.url }}
@@ -68,6 +80,7 @@ jobs:
 
       - name: Comment PR with Cloud Run URL
         uses: thollander/actions-comment-pull-request@v2
+        if: ${{ github.event_name != 'workflow_dispatch' }}
         with:
           message: |
             The URL of the deployed environment for this PR is ${{ steps.deploy.outputs.url }}

.github/workflows/teardown-pr-environemnts.yml

@@ -0,0 +1,36 @@
+name: Close Pull Request
+
+on:
+  schedule:
+    - cron: "0 8,20 * * *" # every day at 8:00 and 20:00 UTC
+
+jobs:
+  teardown_pr_environments:
+    name: Teardown Cloud Run PR environments
+    runs-on: ubuntu-latest
+
+    # Grant permissions to `GITHUB_TOKEN` for Google Cloud Workload Identity Provider
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - uses: "actions/checkout@v3"
+
+      - name: Authenticate to Google Cloud
+        uses: "google-github-actions/auth@v1"
+        with:
+          workload_identity_provider: ${{ secrets.GOOGLE_CLOUD_WIP }}
+          service_account: ${{ secrets.GOOGLE_CLOUD_SERVICE_ACCOUNT }}
+
+      - name: Set up Cloud SDK
+        uses: "google-github-actions/setup-gcloud@v1"
+        with:
+          version: ">= 435.0.0"
+
+      - name: Remove running PR environments
+        run: |
+          services=$(gcloud run services list --project=argilla-ci --format="value(metadata.name)")
+          for service in $services; do
+            gcloud run services delete $service --project=argilla-ci --region=europe-southwest1 --quiet
+          done

CHANGELOG.md

@@ -16,6 +16,11 @@ These are the section headers that we use:
 
 ## [Unreleased]()
 
+### Added
+
+- Added `multi selection entity dropdown` for span annotation overlap ([#4735](https://github.com/argilla-io/argilla/pull/4735))
+- Added `pre selection highlight` for span annotation ([#4726](https://github.com/argilla-io/argilla/pull/4726))
+
 ## [1.27.0](https://github.com/argilla-io/argilla/compare/v1.26.1...v1.27.0)
 
 ### Added

docs/_source/getting_started/installation/configurations/elasticsearch.md

@@ -10,12 +10,9 @@ If you have an Elasticsearch instance and want to share resources with other app
 
 All you need to take into account is:
 
+* Argilla will create its ES indices with the following patterns: `rg.*` and `*ar.dataset*`. It's recommended to create a new role (e.g., argilla) and provide it with all privileges for these index patterns.
 
-* Argilla will create its ES indices with the following pattern `.argilla*`. It's recommended to create a new role (e.g., argilla) and provide it with all privileges for this index pattern.
-
-* Argilla creates an index template for these indices, so you may provide related template privileges to this ES role.
-
-Argilla uses the `ARGILLA_ELASTICSEARCH` environment variable to set the ES connection.
+- Argilla uses the `ARGILLA_ELASTICSEARCH` environment variable to set the ES connection.
 
 :::{note}
 Argilla supports ElasticSearch versions 8.8, 8.5, 8.0, and 7.17.
@@ -29,19 +26,8 @@ http(s)://user:passwd@elastichost
 
 Below you can see a screenshot for setting up a new *argilla* Role and its permissions:
 
-![Argilla Role and permissions in ES](https://user-images.githubusercontent.com/2518789/142883104-f4f20cf0-34a0-47ff-8ee3-ab9f4644271c.png)
-
-
-## Change index analyzers
-
-By default, for indexing text fields, Argilla uses the `standard` analyzer for general search and the `whitespace`
-analyzer for more exact queries (required by certain rules in the weak supervision module). If those analyzers
-don't fit your use case, you can change them using the following environment variables:
-`ARGILLA_DEFAULT_ES_SEARCH_ANALYZER` and `ARGILLA_EXACT_ES_SEARCH_ANALYZER`.
+![Argilla Role and permissions in ES](/_static/images/installation/elastic_snapshots/configure_argilla_role.png)
 
-Note that provided analyzer names should be defined as built-in ones. If you want to use a
-customized analyzer, you should create it inside an index_template matching Argilla index names (`.argilla*.records-v0),
-and then provide the analyzer name using the specific environment variable.
 
 ## Reindex data
 

frontend/components/base/base-checkbox/BaseCheckbox.vue

@@ -51,7 +51,7 @@ export default {
       default: false,
     },
     value: {
-      type: [String, Number, Boolean],
+      type: [String, Number, Boolean, Object],
       default: false,
     },
     areChecked: {

frontend/components/feedback-task/container/fields/span-annotation/SpanAnnotationTextField.component.vue

@@ -57,12 +57,18 @@
             .span-annotation__field::highlight(hl-{{id}}-selection) {
               background-color: {{color}};
             }
-            .span-annotation__field--overlapped::highlight(hl-{{id}}-hover) {
+            .span-annotation__field::highlight(hl-{{id}}-pre-selection) {
               background: {{color.palette.light}};
             }
             .span-annotation__field--overlapped::highlight(hl-{{id}}-selection) {
+              background: {{color}};
+            }
+            .span-annotation__field--overlapped::highlight(hl-{{id}}-pre-selection) {
               background: {{color.palette.light}};
             }
+            .span-annotation__field--overlapped::highlight(hl-{{id}}-hover) {
+              background: {{color}};
+            }
           </style>
         </template>
       </template>

frontend/components/feedback-task/container/fields/span-annotation/components/EntityBadge.vue

@@ -7,6 +7,14 @@
     :is="renderComponent"
     @click="onClick($event)"
     ><span class="badge__text">{{ text }}</span>
+    <BaseButton v-if="clearable" class="badge__button" @click="onClear($event)">
+      <svgicon
+        name="close"
+        width="10"
+        height="10"
+        color="rgba(0, 0, 0, 0.54)"
+      />
+    </BaseButton>
   </component>
 </template>
 
@@ -57,10 +65,9 @@ export default {
 .badge {
   display: inline-flex;
   align-items: center;
-  gap: $base-space * 1.3;
+  gap: $base-space;
   max-width: 200px;
-  margin: 0 auto 0 0;
-  margin-left: 0;
+  margin: 0;
   padding: 2px calc($base-space / 2);
   border-radius: 2px;
   background-color: v-bind(color);
@@ -83,5 +90,9 @@ export default {
   &__text {
     @include truncate;
   }
+  &__button {
+    padding: 0;
+    flex-shrink: 0;
+  }
 }
 </style>

frontend/components/feedback-task/container/fields/span-annotation/components/EntityComponent.vue

@@ -30,7 +30,7 @@
       >
         <BaseButton
           class="span-entity__close-button"
-          @click="removeSelectedOption"
+          @click.stop="removeSelectedSpan(span)"
         >
           <svgicon name="close" width="10" height="10" color="#fff"
         /></BaseButton>
@@ -54,15 +54,26 @@
           v-text="suggestionScore"
         />
       </div>
-      <EntityComponentDropdown
-        v-else
-        :style="entityFixedPosition"
-        :selectedOption="selectedOption"
-        :options="options"
-        @on-replace-option="selectOption"
-        @on-remove-option="removeSelectedOption"
-        v-click-outside="hideDropdown"
-      />
+      <template v-else>
+        <EntityDropdownOverlapping
+          v-if="allowOverlapping"
+          :style="overlappingDropdownPosition"
+          :selectedOption="selectedOption"
+          :options="options"
+          :spanInRange="spanInRange"
+          @on-add-span-base-on="addSpanBaseOn"
+          @on-remove-span="removeSelectedSpan"
+          v-click-outside="hideDropdown"
+        />
+        <EntityDropdown
+          v-else
+          :style="entityFixedPosition"
+          :selectedOption="selectedOption"
+          :options="options"
+          @on-replace-entity="selectEntity"
+          v-click-outside="hideDropdown"
+        />
+      </template>
     </div>
   </span>
 </template>
@@ -74,6 +85,10 @@ import "assets/icons/suggestion";
 export default {
   name: "EntityComponent",
   props: {
+    span: {
+      type: Object,
+      required: true,
+    },
     entity: {
       type: Object,
       required: true,
@@ -89,6 +104,10 @@ export default {
       type: Object,
       required: true,
     },
+    spanInRange: {
+      type: Array,
+      required: true,
+    },
   },
   data() {
     return {
@@ -155,17 +174,35 @@ export default {
         top: `${this.spanEntityPosition.top}px`,
       };
     },
+    getLevelInEntitiesInRange() {
+      return this.spanInRange.findIndex(
+        ({ entity }) => entity.id === this.entity.id
+      );
+    },
+    overlappingDropdownPosition() {
+      return {
+        left: `${this.spanEntityPosition.left}px`,
+        top: `${
+          this.spanEntityPosition.top -
+          this.getLevelInEntitiesInRange * this.entityPosition.baseEntityGap
+        }px`,
+      };
+    },
   },
   methods: {
     getNumberOfLines(space) {
       return Math.floor(space / this.entityPosition.lineHeight + 1);
     },
-    selectOption(option) {
-      this.$emit("on-replace-option", option);
+    addSpanBaseOn(span, entity) {
+      this.$emit("on-add-span-base-on", span, entity);
+      this.hideDropdown();
+    },
+    selectEntity(entity) {
+      this.$emit("on-replace-entity", entity);
       this.hideDropdown();
     },
-    removeSelectedOption() {
-      this.$emit("on-remove-option");
+    removeSelectedSpan(span) {
+      this.$emit("on-remove-span", span);
       this.hideDropdown();
     },
     hoverSpan(isHovered) {

frontend/components/feedback-task/container/fields/span-annotation/components/EntityComponentDropdown.vue → frontend/components/feedback-task/container/fields/span-annotation/components/EntityDropdown.vue

@@ -79,7 +79,7 @@ export default {
   },
   methods: {
     selectOption(option) {
-      this.$emit("on-replace-option", option);
+      this.$emit("on-replace-entity", option);
     },
     includePreselectedOption() {
       if (!this.filteredOptions.length) return;