feat: Create component for displaying %TagResult{}

lib/medical_transcription_web.ex

@@ -85,6 +85,7 @@ defmodule MedicalTranscriptionWeb do
       import Phoenix.HTML
       # Core UI components and translation
       import MedicalTranscriptionWeb.CoreComponents
+      import MedicalTranscriptionWeb.Components
       import MedicalTranscriptionWeb.Gettext
 
       # Shortcut for generating JS commands

lib/medical_transcription_web/components/components.ex

@@ -0,0 +1,19 @@
+defmodule MedicalTranscriptionWeb.Components do
+  use Phoenix.Component
+
+  def tag_result_chip(assigns) do
+    ~H"""
+    <div class="group flex items-start gap-1 px-1.5 py-0.5 rounded text-slate-800 text-sm bg-slate-200 border border-slate-300">
+      <span class="font-bold">
+        <%= @code %>:
+      </span>
+      <div>
+        <%= @label %>
+        <p class="hidden group-hover:inline">
+          <%= "(#{trunc(@score * 100)})" %>
+        </p>
+      </div>
+    </div>
+    """
+  end
+end

lib/medical_transcription_web/live/home_live/index.ex

@@ -43,14 +43,20 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index do
           </div>
         <% end %>
 
-        <.table id="streamed_result" rows={@streams.transcription_rows} row_item={fn {_dom_id, row} -> row end}>
+        <.table
+          id="streamed_result"
+          rows={@streams.transcription_rows}
+          row_item={fn {dom_id, row} -> Map.put(row, :dom_id, dom_id) end}
+        >
           <:col :let={row} label="Start"><%= row.start_mark %></:col>
           <:col :let={row} label="End"><%= row.end_mark %></:col>
           <:col :let={row} label="Text"><%= row.text %></:col>
           <:col :let={row} label="Codes">
-            <%= for %TagResult{code: code, label: label, score: score} <- row.tags do %>
-              <%= "#{code}: #{label} (#{score})" %>
-            <% end %>
+            <div class="w-max flex flex-col items-stretch gap-2">
+              <%= for %TagResult{code: code, label: label, score: score} <- row.tags do %>
+                <.tag_result_chip code={code} label={label} score={score} />
+              <% end %>
+            </div>
           </:col>
         </.table>
       </div>