Merge pull request #710 from Kiln-AI/leonard/kil-141-refactor-consolidate-tag-picking-ui

refactor: reusable tag picking

Author: leonardmq

app/web_ui/src/lib/ui/tag_picker.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import TagDropdown from "./tag_dropdown.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let tags: string[] = []
+  export let tag_type: "doc" | "task_run" = "doc"
+  export let project_id: string | null = null
+  export let task_id: string | null = null
+
+  const dispatch = createEventDispatcher<{
+    tags_changed: { previous: string[]; current: string[] }
+  }>()
+  export let disabled: boolean = false
+
+  // controls whether the dropdown is initially visible
+  // if not then we show the tags with the + button
+  export let initial_expanded: boolean = false
+  export let show_close_button = true
+  export let hide_dropdown_after_select = true
+
+  let show_dropdown = initial_expanded
+  let current_tag = ""
+
+  $: show_dropdown = initial_expanded
+
+  function tags_are_equal(tags1: string[], tags2: string[]): boolean {
+    return (
+      tags1.length === tags2.length && tags1.every((tag) => tags2.includes(tag))
+    )
+  }
+
+  function emit_tags_changed_if_different(
+    previous: string[],
+    current: string[],
+  ) {
+    const deduped_current = [...new Set(current)]
+    if (!tags_are_equal(previous, deduped_current)) {
+      dispatch("tags_changed", { previous, current: deduped_current })
+    }
+  }
+
+  function handle_tag_select(tag: string) {
+    if (!tags.includes(tag)) {
+      const previous_tags = [...tags]
+      const new_tags = [...tags, tag]
+
+      emit_tags_changed_if_different(previous_tags, new_tags)
+    }
+    current_tag = ""
+    if (hide_dropdown_after_select) {
+      show_dropdown = false
+    }
+  }
+
+  function handle_escape() {
+    if (!initial_expanded) {
+      show_dropdown = false
+    }
+    current_tag = ""
+  }
+
+  function handle_remove_tag(tag: string) {
+    const previous_tags = [...tags]
+    const new_tags = tags.filter((t) => t !== tag)
+
+    emit_tags_changed_if_different(previous_tags, new_tags)
+  }
+
+  function toggle_dropdown() {
+    if (!disabled) {
+      show_dropdown = !show_dropdown
+    }
+  }
+
+  function handle_close_dropdown() {
+    show_dropdown = false
+    current_tag = ""
+  }
+</script>
+
+<div class="w-full">
+  {#if tags.length > 0}
+    <div class="flex flex-row flex-wrap gap-2 mb-2">
+      {#each (tags ?? []).slice().sort() as tag (tag)}
+        <div class="badge bg-gray-200 text-gray-500 py-3 px-3 max-w-full">
+          <span class="truncate">{tag}</span>
+          <button
+            class="pl-3 font-medium shrink-0"
+            on:click={() => handle_remove_tag(tag)}
+            {disabled}>✕</button
+          >
+        </div>
+      {/each}
+
+      {#if !show_dropdown}
+        <button
+          class="badge bg-gray-200 text-gray-500 p-3 font-medium {disabled
+            ? 'opacity-50'
+            : ''}"
+          on:click={toggle_dropdown}
+          {disabled}>+</button
+        >
+      {/if}
+    </div>
+  {/if}
+
+  {#if show_dropdown}
+    <div class="flex flex-row gap-2 items-center">
+      <TagDropdown
+        bind:tag={current_tag}
+        {project_id}
+        {task_id}
+        example_tag_set={tag_type}
+        on_select={handle_tag_select}
+        on_escape={handle_escape}
+        focus_on_mount={true}
+      />
+      {#if show_close_button}
+        <div class="flex-none">
+          <button
+            class="btn btn-sm btn-circle text-xl font-medium"
+            on:click={handle_close_dropdown}>✕</button
+          >
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

app/web_ui/src/routes/(app)/dataset/[project_id]/[task_id]/+page.svelte

@@ -10,7 +10,7 @@
   import { page } from "$app/stores"
   import { formatDate } from "$lib/utils/formatters"
   import { replaceState } from "$app/navigation"
-  import TagDropdown from "../../../../../lib/ui/tag_dropdown.svelte"
+  import TagPicker from "$lib/ui/tag_picker.svelte"
   import Dialog from "$lib/ui/dialog.svelte"
 
   let runs: RunSummary[] | null = null
@@ -390,27 +390,16 @@
     }
   }
 
-  let add_tags: Set<string> = new Set()
+  let add_tags: string[] = []
   let remove_tags: Set<string> = new Set()
-  let show_add_tag_dropdown = false
-  let current_tag: string = ""
 
   let add_tags_dialog: Dialog | null = null
 
   function show_add_tags_modal() {
-    // Show the dropdown
-    show_add_tag_dropdown = true
-
     add_tags_dialog?.show()
   }
 
   async function add_selected_tags(): Promise<boolean> {
-    // Special case for this UI - consider the partly filled tag in the input
-    // as a tag to add
-    if (current_tag.length > 0) {
-      add_tags.add(current_tag)
-      current_tag = ""
-    }
     // Don't accidentially remove tags
     remove_tags = new Set()
     return await edit_tags()
@@ -443,7 +432,7 @@
 
   async function remove_selected_tags(): Promise<boolean> {
     // Don't accidentially add tags
-    add_tags = new Set()
+    add_tags = []
     return await edit_tags()
   }
 
@@ -455,7 +444,7 @@
           params: { path: { project_id, task_id } },
           body: {
             run_ids: Array.from(selected_runs),
-            add_tags: Array.from(add_tags),
+            add_tags: add_tags,
             remove_tags: Array.from(remove_tags),
           },
         },
@@ -465,14 +454,14 @@
       }
 
       // Hide the dropdown (safari bug shows it when hidden)
-      show_add_tag_dropdown = false
+      add_tags = []
 
       // Close modal on success
       return true
     } finally {
       // Reload UI, even on failure, as partial delete is possible
       selected_runs = new Set()
-      add_tags = new Set()
+      add_tags = []
       select_mode = false
       await get_runs()
     }
@@ -726,62 +715,25 @@
     {
       label: "Add Tags",
       asyncAction: add_selected_tags,
-      disabled: add_tags.size == 0 && !current_tag,
+      disabled: add_tags.length == 0,
       isPrimary: true,
     },
   ]}
 >
   <div>
     <div class="text-sm font-light text-gray-500 mb-2">
-      Tags can be used to organize you dataset.
-    </div>
-    <div class="flex flex-row flex-wrap gap-2 mt-2">
-      {#each Array.from(add_tags).sort() as tag}
-        <div class="badge bg-gray-200 text-gray-500 py-3 px-3 max-w-full">
-          <span class="truncate">{tag}</span>
-          <button
-            class="pl-3 font-medium shrink-0"
-            on:click={() => {
-              add_tags.delete(tag)
-              add_tags = add_tags
-            }}>✕</button
-          >
-        </div>
-      {/each}
-      <button
-        class="badge bg-gray-200 text-gray-500 p-3 font-medium {show_add_tag_dropdown
-          ? 'hidden'
-          : ''}"
-        on:click={() => (show_add_tag_dropdown = true)}>+</button
-      >
+      Tags can be used to organize your dataset.
     </div>
-    {#if show_add_tag_dropdown}
-      <div
-        class="mt-3 flex flex-row gap-2 items-center {show_add_tag_dropdown
-          ? ''
-          : 'hidden'}"
-      >
-        <TagDropdown
-          bind:tag={current_tag}
-          {project_id}
-          {task_id}
-          on_select={(tag) => {
-            add_tags.add(tag)
-            add_tags = add_tags
-            show_add_tag_dropdown = false
-            current_tag = ""
-          }}
-          on_escape={() => (show_add_tag_dropdown = false)}
-          focus_on_mount={true}
-        />
-        <div class="flex-none">
-          <button
-            class="btn btn-sm btn-circle text-xl font-medium"
-            on:click={() => (show_add_tag_dropdown = false)}>✕</button
-          >
-        </div>
-      </div>
-    {/if}
+    <TagPicker
+      tags={add_tags}
+      tag_type="task_run"
+      {project_id}
+      {task_id}
+      initial_expanded={true}
+      on:tags_changed={(event) => {
+        add_tags = event.detail.current
+      }}
+    />
   </div>
 </Dialog>