Improve Search Performance and Result Quality

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>