Retrieval

defmodule EHVisuals.Ai.Retrieval do
  @moduledoc """
  A query fanning out to the sources it found, ranked by relevance, with the
  top matches lit.
  """

  use EHVisuals.Composition,
    name: "ai/retrieval",
    title: "Retrieval",
    description:
      "A query fanning out to ranked source cards with their relevance scores, the top matches lit."

  @sources [
    %{title: "Carrier cut-off times", kind: "Wiki · Logistics", score: 0.94},
    %{title: "Ops sync, 12 March", kind: "Meeting · Notes", score: 0.88},
    %{title: "orders.shipped_at", kind: "Table · Warehouse", score: 0.61},
    %{title: "Returns policy 2024", kind: "Doc · Customer care", score: 0.37}
  ]

  attr(:query, :list,
    default: ["Which carriers", "changed their cut-off", "in March?"],
    doc: "Up to three lines of about 20 characters."
  )

  attr(:sources, :list,
    default: @sources,
    doc:
      "Two to five `%{title, kind, score}`, drawn best first. The title takes up to 24 characters, the score is between 0 and 1."
  )

  attr(:top, :integer, default: 2, doc: "How many of the best matches are lit.")
  attr(:caption, :string, default: "128 chunks searched")
  attr(:heading, :string, default: "Sources by relevance")

  attr(:label, :string,
    default: "A query fanning out to four ranked sources, the two best matches lit"
  )

  frame_attrs()

  @spec ai_retrieval(map()) :: Phoenix.LiveView.Rendered.t()
  def ai_retrieval(assigns) do
    lines = assigns.query |> Enum.take(3) |> Enum.with_index()
    sources = assigns.sources |> Enum.take(5) |> Enum.sort_by(&(-&1.score))
    count = max(length(sources), 1)
    height = max(22 + count * 48 - 8 + 2, 130)
    middle = Float.round(22 + (count * 48 - 8) / 2, 1)
    box_h = 22 + max(length(lines) - 1, 0) * 16 + 14
    box_y = Float.round(middle - box_h / 2, 1)

    cards =
      for {source, index} <- Enum.with_index(sources) do
        y = 22 + index * 48
        score = source.score |> max(0) |> min(1)

        %{
          source: source,
          index: index,
          y: y,
          lit: index < assigns.top,
          rank: index |> Kernel.+(1) |> Integer.to_string() |> String.pad_leading(2, "0"),
          score: :erlang.float_to_binary(score * 1.0, decimals: 2),
          bar: Float.round(44 * score, 1),
          wire: "M168.5 #{middle} C212 #{middle} 206 #{y + 20} 250 #{y + 20}"
        }
      end

    assigns =
      assigns
      |> assign(:lines, lines)
      |> assign(:cards, cards)
      |> assign(:middle, middle)
      |> assign(:box_y, box_y)
      |> assign(:box_h, box_h)
      |> assign(:height, height)

    ~H"""
    <.frame name="ai/retrieval" label={@label} {frame_opts(assigns)}>
      <svg viewBox={"0 0 500 #{@height}"}>
        <g class="ehv-h-lift">
          <text class="ehv-mono ehv-a-fade" x="0" y={@box_y - 9} font-size="8.5">QUERY</text>
          <text class="ehv-mono ehv-a-fade ehv-i-2" x="250" y="12" font-size="8.5">
            {String.upcase(@heading)}
          </text>
          <text
            class="ehv-mono ehv-t-4 ehv-a-fade ehv-i-3"
            x="0"
            y={@box_y + @box_h + 17}
            font-size="8"
          >
            {String.upcase(@caption)}
          </text>
          <path
            :for={card <- @cards}
            class={[
              if(card.lit, do: "ehv-line-lime", else: "ehv-line"),
              "ehv-a-draw ehv-i-#{card.index + 2}"
            ]}
            d={card.wire}
            pathLength="1"
          />
          <g :if={@animated} class="ehv-smil ehv-a-fade ehv-i-12">
            <circle :for={card <- @cards} :if={card.lit} class="ehv-ai-retrieval__lime" r="2.5">
              <animateMotion
                path={card.wire}
                dur="2.4s"
                begin={"#{card.index * 0.6}s"}
                repeatCount="indefinite"
              />
              <animate
                attributeName="opacity"
                values="0;1;1;0"
                keyTimes="0;0.15;0.8;1"
                dur="2.4s"
                begin={"#{card.index * 0.6}s"}
                repeatCount="indefinite"
              />
            </circle>
          </g>
          <g class="ehv-a-rise">
            <rect class="ehv-card-3" x="0.5" y={@box_y} width="168" height={@box_h} rx="10" />
            <circle class="ehv-line-ink" cx="18" cy={@box_y + 17} r="4.5" />
            <path class="ehv-line-ink ehv-round" d={"M21.4 #{@box_y + 20.4} l3.4 3.4"} />
            <text
              :for={{line, index} <- @lines}
              class="ehv-t-strong"
              x="32"
              y={@box_y + 22 + index * 16}
              font-size="12"
            >
              {line}
            </text>
            <circle class="ehv-ai-retrieval__lime" cx="168.5" cy={@middle} r="3" />
          </g>
          <g
            :for={card <- @cards}
            class={"ehv-ai-retrieval__source ehv-a-rise ehv-i-#{card.index + 3}"}
          >
            <rect
              class={["ehv-ai-retrieval__card", if(card.lit, do: "ehv-card-lime", else: "ehv-card")]}
              x="250.5"
              y={card.y + 0.5}
              width="249"
              height="40"
              rx="8"
            />
            <text
              class={["ehv-mono", if(card.lit, do: "ehv-t-lime", else: "ehv-t-4")]}
              x="263"
              y={card.y + 24}
              font-size="8.5"
            >
              {card.rank}
            </text>
            <text class={[!card.lit && "ehv-t-2"]} x="286" y={card.y + 18} font-size="12">
              {card.source.title}
            </text>
            <text class={["ehv-mono", !card.lit && "ehv-t-4"]} x="286" y={card.y + 31} font-size="7.5">
              {String.upcase(card.source.kind)}
            </text>
            <text
              class={["ehv-mono", if(card.lit, do: "ehv-t-lime", else: "ehv-t-3")]}
              x="488"
              y={card.y + 19}
              font-size="9.5"
              text-anchor="end"
            >
              {card.score}
            </text>
            <rect class="ehv-fill-soft" x="444" y={card.y + 26} width="44" height="3" rx="1.5" />
            <g class={"ehv-a-grow-x ehv-i-#{card.index + 6}"}>
              <rect
                class={if card.lit, do: "ehv-ai-retrieval__lime", else: "ehv-fill-3"}
                x="444"
                y={card.y + 26}
                width={card.bar}
                height="3"
                rx="1.5"
              />
            </g>
          </g>
        </g>
      </svg>
    </.frame>
    """
  end
end

/* ai/retrieval */
.ehv-ai-retrieval { --ehv-max-w: 560px; --ehv-iso-scale: 0.82; --ehv-step: 110ms; }

/* Packets, the query's outlet and the score bars of the lit sources. */
.ehv-ai-retrieval__lime { fill: var(--ehv-lime); }

.ehv--hover .ehv-ai-retrieval__card { transition: stroke 200ms var(--ehv-ease); }
.ehv--hover .ehv-ai-retrieval__source:hover .ehv-ai-retrieval__card { stroke: var(--ehv-lime); }