From 12e1344e23c27460d8b943eb15fede7845b1149c Mon Sep 17 00:00:00 2001
From: "Claudio Maggioni (maggicl)" <maggicl@kolabnow.ch>
Date: Fri, 20 Nov 2020 00:11:27 +0100
Subject: [PATCH] Work on UI

---
 ui/index.html | 131 +++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 107 insertions(+), 24 deletions(-)
diff --git a/ui/index.html b/ui/index.html
index 81df38d..099896f 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -3,54 +3,137 @@
 
 <html>
   <head>
-    <title>FoamTree Quick Start</title>
+    <title>Image Search IR System - Claudio Maggioni</title>
     <meta charset="utf-8" />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">
     <style>
-      .document { float: left }
+* { font-size: 14px; }
+body {
+  font-family: 'Fira Sans', sans-serif;
+  margin: 0;
+  display: flex;
+  height: 100vh;
+  max-height: 100vh;
+  flex-direction: column;
+}
+nav { flex: 0 0; }
+main { flex: 1; display: flex; flex-grow: 1; min-height: 0 }
+#visualization {
+  width: 15rem;
+  padding: .25rem;
+  border-radius: .125rem;
+  margin-right: .5rem;
+  background: #AAA;
+}
+#docs {
+  flex-grow: 1;
+  flex: 2;
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  overflow-y: scroll;
+}
+.title {
+  background: #333;
+  color: white;
+  text-align: center;
+  padding: 1rem;
+}
+.title h1 { margin: 0; font-size: 1.4rem; }
+.searchbox {
+  padding: 1em;
+  background: #666;
+}
+.searchbox input {
+  width: calc(100% - 2em);
+}
+.document {
+  float: left;
+  margin: .25rem;
+  background: #CCC;
+  border-radius: .125rem;
+}
+.document img { width: calc(100% - 1rem); }
+.document h2 { font-size: 1.2rem; }
+.document h3 { font-size: 1.1rem; }
+.document img { margin: .5rem .5rem 0 .5rem; }
+.document h2, .document h3, .document p { margin: .25rem; };
     </style>
   </head>
 
   <body>
-    <div id="docs"></div>
-    <div id="visualization" style="width: 800px; height: 600px"></div>
-    <template id="document">
-      <div class="document">
-        <img width="300" src="{{ url }}"/>
-        <h2>{{ title }}</h2>
-        <h3>By {{ author }}</h3>
-        {{ description }}
+    <nav>
+      <div class="title">
+        <h1>Image Search IR System - By Claudio Maggioni</h1>
       </div>
-    </template>
+      <div class="searchbox">
+        <form id="form">
+          <input type="text" id="q" placeholder="Search..."/>
+        </form>
+      </div>
+    </nav>
+    <main>
+      <div id="visualization"></div>
+      <div id="docs">
+        <div style="grid-column: 1 / 5; text-align: center; padding: 2em;
+          background: #CCC;">
+          Input your query in the search box above and then press Enter.
+          Result clustering will appear on the left sidebar.
+        </div>
+      </div>
+      <template id="document">
+        <div class="document" id="doc{{ id }}">
+          <img src="{{ url }}"/>
+          <h2><a href="{{ site_url }}">{{ title }}</a></h2>
+          <h3>By {{ author }}</h3>
+          {{ description }}
+        </div>
+      </template>
+    </div>
     <script src="./carrotsearch.foamtree.js"></script>
     <script>
-      const solr = "http://localhost:8983/solr/photo";
-window.addEventListener("load", async function() {
+const solr = "http://localhost:8983/solr/photo";
+const q = document.querySelector("#q");
+let foamtree = null;
+
+document.querySelector("#form").addEventListener("submit", async function(e) {
+  e.preventDefault();
   let templateHTML = document.querySelector("#document").innerHTML;
   let docs = document.querySelector("#docs");
   let docMap = {}
 
   const doc = (docData) => {
     docMap[docData.id] = docData;
+    console.log(templateHTML);
     return templateHTML
-      .replace("{{ title }}", docData.t_title)
-      .replace("{{ author }}", docData.t_author)
-      .replace("{{ description }}", docData.t_description)
-      .replace("{{ url }}", docData.img_url);
+      .replaceAll("{{ id }}", docData.id)
+      .replaceAll("{{ title }}", docData.t_title)
+      .replaceAll("{{ author }}", docData.t_author)
+      .replaceAll("{{ description }}", docData.t_description)
+      .replaceAll("{{ url }}", docData.img_url)
+      .replaceAll("{{ site_url }}", "#");
   };
 
-  let list = await fetch(solr + "/clustering?q=" + escape(prompt("query")));
+  let list = await fetch(solr + "/clustering?q=" + q.value);
   let body = await list.json();
   console.log(body);
   docs.innerHTML = body.response.docs.map(doc).reduce((a, b) => a + b, "");
 
   let clusters = body.clusters.map(e => { return { label: e.labels[0], weight:
     e.score, groups: e.docs.map(id => { return { id, label: docMap[id].t_title }; }) }; });
-  var foamtree = new CarrotSearchFoamTree({
-    id: "visualization",
-    dataObject: {
-      groups: clusters
-    }
-  });
+
+  if (foamtree === null) {
+    foamtree = new CarrotSearchFoamTree({
+      id: "visualization",
+      layout: "squarified",
+      groupLabelFontFamily: "Fira Sans",
+      dataObject: {
+        groups: clusters
+      }
+    });
+  } else {
+    foamtree.set({ dataObject: { groups: clusters }});
+  }
 });
     </script>
   </body>
