Merge branch 'master' of github.com:com-480-data-visualization/com-48…

…0-project-statiswiss

convex/dataImport.ts

@@ -16,6 +16,7 @@ export const clean = internalMutation({
         titre_complet_de,
         titre_complet_fr,
         titre_complet_en,
+        annahme,
         number,
         forme,
         // @ts-expect-error
@@ -45,6 +46,7 @@ export const clean = internalMutation({
         titre_complet_de,
         titre_complet_fr,
         titre_complet_en,
+        annahme,
         number,
         forme,
         categories: {

convex/schema.ts

@@ -13,6 +13,7 @@ export default defineSchema({
     titre_complet_fr: v.string(),
     titre_complet_en: v.string(),
     categories: v.any(),
+    annahme: v.optional(v.any()),
     embedding: v.optional(v.array(v.float64())),
   })
   .index("by_number", ["number"])
@@ -21,4 +22,4 @@ export default defineSchema({
     vectorField: "embedding",
     dimensions: 1536,
   }),
-});
+}, {schemaValidation: true});

convex/search.ts

@@ -12,8 +12,15 @@ export const search = internalQuery({
     for (const id of ids) {
       const row = await ctx.db.get(id);
       if (!row) continue;
-      const {date, titre_complet_fr} = row;
-      result.push({date, titre_complet_fr});
+      result.push({
+        ...row,
+        embedding: undefined,
+        _id: undefined,
+        _creationTime: undefined,
+        categories: undefined,
+        id: row.number,
+        ...row.categories,
+      });
     }
     return result;
   },
@@ -27,7 +34,7 @@ export default action({
     const vector = await fetchEmbedding(query);
     const rows = await vectorSearch("votations", "by_embedding", {
       vector,
-      limit: 8,
+      limit: 20,
     });
 
     return await runQuery(internal.search.search, {ids: rows.map(row => row._id)});

website/index.html

@@ -55,10 +55,7 @@
           <span class="absolute inset-y-0 right-0 flex items-center pr-3">
             <img class="h-7 w-7" src="resources/sparkles.svg" alt="I'm feeling lucky" />
           </span>
-          <script>
-            const searchForRef = {"en": "Search for a vote", "fr": "Chercher une votation", "de": "eine Abstimmung suchen"}[lang];
-            document.write(`<input class="placeholder:text-slate-400 h-12 text-xl block bg-white font-semibold w-full border-4 border-black rounded-full py-2 pl-12 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-xl" placeholder="${searchForRef}" type="text" name="search"/>`);
-          </script>
+          <input class="js-search placeholder:text-slate-400 h-12 text-xl block bg-white font-semibold w-full border-4 border-black rounded-full py-2 pl-12 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-xl" type="text" name="search"/>
         </label>
 
         <div class="flex-1"></div>
@@ -73,7 +70,16 @@
         </select>
       </div>
 
-      <div class="flex flex-row">
+      <div>
+        <div class="js-search-loader hidden">
+          <div class="flex items-center justify-center py-4">
+            <svg class="animate-spin -ml-1 mr-3 h-8 w-8 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="js-search-results"></div>
         <div class="grid-cols-1 border-black w-auto border-4 flex-initial basis-full" id="list_refs">
         </div>
 
@@ -107,5 +113,7 @@
     }
 })();
   </script>
+  <script src="https://unpkg.com/[email protected]/dist/browser.bundle.js"></script>
+  <script src="resources/search.js"></script>
 </body>
 </html>

website/index_bytheme.html

@@ -48,20 +48,7 @@
         <strong class="text-4xl font-medium">Statiswiss</strong>
       </header>
 
-      <div class="mx-auto block flex flex-row text-center space-x-5">
-        <label class="relative w-4/5">
-          <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-            <img class="h-7 w-7" src="resources/magnifying_glass.svg" alt="Magnifying glass" />
-          </span>
-          <span class="absolute inset-y-0 right-0 flex items-center pr-3">
-            <img class="h-7 w-7" src="resources/sparkles.svg" alt="I'm feeling lucky" />
-          </span>
-          <script>
-            const searchForRef = {"en": "Search for a vote", "fr": "Chercher une votation", "de": "eine Abstimmung suchen"}[lang];
-            document.write(`<input class="placeholder:text-slate-400 h-12 text-xl block bg-white font-semibold w-full border-4 border-black rounded-full py-2 pl-12 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-xl" placeholder="${searchForRef}" type="text" name="search"/>`);
-          </script>
-        </label>
-
+      <div class="mx-auto block flex flex-row text-center space-x-5">        
         <div class="flex-1"></div>
 
         <select class="bg-white w-36 border-4 border-black rounded-2xl text-center font-semibold text-xl js-filter-select">

website/resources/search.js

@@ -0,0 +1,54 @@
+(() => {
+  function debounce(func, ms = 100) {
+    let timeout;
+    return function() {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => func.apply(this, arguments), ms);
+    };
+  }
+
+  const search = document.querySelector('.js-search');
+  search.placeholder = {"en": "Search for a vote", "fr": "Chercher une votation", "de": "Eine Abstimmung suchen"}[lang];
+
+  /** @type {import("convex/browser")["ConvexClient"]} */
+  const ConvexClient = convex.ConvexClient;
+  const client = new ConvexClient('https://artful-minnow-484.convex.cloud');
+  /** @type {import("../../convex/_generated/api")["api"]} */
+  const api = convex.anyApi;
+
+  const listAllResults = document.querySelector('#list_refs');
+  const listSearchResults = document.querySelector('.js-search-results');
+  const loader = document.querySelector('.js-search-loader');
+
+  const doQuery = debounce(async (query) => {
+    console.log('searching', query)
+    const results = await client.action(api.search.default, { query });
+
+    if (query !== search.value.trim()) return;
+    console.log(results)
+
+    let html = '';
+    for (const row of results) {
+      html += showVote(row, lang);
+    }
+
+    loader.style.display = 'none';
+    listSearchResults.innerHTML = html;
+  });
+
+  search.addEventListener('input', async () => {
+    listSearchResults.innerHTML = '';
+    const query = search.value.trim();
+    if (query === '') {
+      listAllResults.style.display = 'block';
+      loader.style.display = 'none';
+      return;
+    }
+
+    listAllResults.style.display = 'none';
+    loader.style.display = 'block';
+
+    doQuery(query);
+  });
+
+})();