Improve Search Performance and Result Quality

cmd/ui/css/styles.css

@@ -120,6 +120,10 @@ body {
     min-width: calc(14 * var(--base_length));
 }
 
+.min-w24 {
+    min-width: calc(24 * var(--base_length));
+}
+
 .max-w1 {
     max-width: calc(1 * var(--base_length));
 }

cmd/ui/html/search-result.html

@@ -1,14 +1,20 @@
 {{block "results" .}}
-<div>
+<div class="max-w24" style="width: 100%">
     {{template "paging" .}}
-    <div class="boxed-list max-w24">
-        {{range .Views}} {{template "result" .}} {{end}}
+    <div class="container-center">
+        <div class="boxed-list max-w24">
+            {{range .Views}} {{template "result" .}} {{end}}
+        </div>
     </div>
 </div>
 
 {{end}} {{block "result" .}}
-<label class="active expander" for="{{.TechnicalName}}">
-    <input class="expander-state" type="checkbox" id="{{.TechnicalName}}" />
+<label class="active expander" for="{{.TechnicalNameEncoded}}">
+    <input
+        class="expander-state"
+        type="checkbox"
+        id="{{.TechnicalNameEncoded}}"
+    />
     <div class="title sans-serif">
         {{.DisplayName}}
         <div class="monospaced">{{.TechnicalName}}</div>
@@ -21,7 +27,9 @@
 </label>
 <div class="expander-content">
     <div class="label heading">Field Properties</div>
-    <div class="container-center">{{template "fields" .Fields}}</div>
+    <div class="container-center">
+        {{template "fields-placeholder" dict "Result" .}}
+    </div>
 </div>
 {{end}} {{block "fields" .}}
 <table>
@@ -33,6 +41,23 @@
     </tr>
     {{range .}} {{template "field" .}} {{end}}
 </table>
+{{end}} {{block "fields-placeholder" .}}
+<table
+    id="{{.Result.TechnicalNameEncoded}}_FieldPlaceholder"
+    hx-get="/cds/field/"
+    hx-vals='{"CDSViewTechnicalName":"{{.Result.TechnicalName}}"}'
+    hx-trigger="click from:#{{.Result.TechnicalNameEncoded}}"
+    hx-swap="outerHTML"
+    hx-target="this"
+>
+    <tr>
+        <td>
+            <div
+                style="height: calc(22px * ({{.Result.NumberOfFields}} + 1))"
+            ></div>
+        </td>
+    </tr>
+</table>
 {{end}} {{block "field" .}}
 <tr>
     <td class="table-field-left monospaced">{{.FieldName}}</td>
@@ -69,24 +94,7 @@
     <form style="float: right">
         <input name="q" disabled hidden value="{{.SearchTerm}}" />
         <div class="linked-horizontal">
-            <!--button
-                type="submit"
-                class="raised round"
-                style="margin-top: 9px"
-                hx-get="/search"
-                hx-params="*"
-                hx-include="#search-bar"
-                hx-target="#search-results"
-                hx-swap="innerHTML"
-                {{if
-                eq
-                .CurrentPage
-                0}}
-                disabled
-                {{end}}
-            >
-                ←</button
-            --><input
+            <input
                 class="round max-w2"
                 type="number"
                 name="p"
@@ -98,28 +106,12 @@
                 hx-include="#search-bar"
                 hx-target="#search-results"
                 hx-swap="innerHTML"
+                hx-throttle="1s"
             /><input
                 class="round raised max-w2"
                 value="{{.MaxPage}}"
                 disabled
-            /><!--button
-                type="submit"
-                class="raised round"
-                style="margin-top: 9px"
-                hx-get="/search"
-                hx-params="*"
-                hx-include="#search-bar"
-                hx-target="#search-results"
-                hx-swap="innerHTML"
-                {{if
-                eq
-                .CurrentPage
-                .MaxPage}}
-                disabled
-                {{end}}
-            >
-                →
-            </button-->
+            />
         </div>
     </form>
 </div>

cmd/ui/ui.go

@@ -17,13 +17,33 @@
 
 package ui
 
-import "text/template"
+import (
+	"errors"
+	"text/template"
+)
 
 var Template *template.Template
 
 func Load() {
-	Template = template.Must(template.New("ui").ParseFiles(
+	Template = template.Must(template.New("ui").Funcs(template.FuncMap{
+		"dict": Dict,
+	}).ParseFiles(
 		"./cmd/ui/html/main.html",
 		"./cmd/ui/html/search-result.html",
 	))
 }
+
+func Dict(values ...any) (map[string]any, error) {
+	if len(values)%2 != 0 {
+		return nil, errors.New("invalid dict call")
+	}
+	dict := make(map[string]any, len(values)/2)
+	for i := 0; i < len(values); i += 2 {
+		key, ok := values[i].(string)
+		if !ok {
+			return nil, errors.New("dict keys must be strings")
+		}
+		dict[key] = values[i+1]
+	}
+	return dict, nil
+}