Merge pull request #19 from Matesanz/front

Frontend fixes

frontend/src/app.scss

@@ -27,7 +27,7 @@ $family-primary: "Darker Grotesque";
 }
 
 .not-selected {
-    background-color: $dark;
+    background-color: $black;
 }
 
 .marker {

frontend/src/lib/api.ts

@@ -16,12 +16,10 @@ export async function post_query(query: string) {
         },
         body: JSON.stringify({ query: query })
     });
-    let matches = await res.json();
-    return matches.map((x: any) => x[0]);
+    return await res.json()
 }
 
 export async function get_document_info(id: number) {
     let res = await fetch(`${api_url}/documents/${id}`);
-    return res.json();
-
+    return await res.json();
 }

frontend/src/lib/components/DocNode.svelte

@@ -9,12 +9,17 @@
 
 	const dispatch = createEventDispatcher();
 
-	function scale(x: number, k = 200) {
+	const max_length = 16;
+	$: trimmed_title = `${node.title.slice(0, max_length)}${
+		node.title.length > max_length ? '...' : ''
+	}`;
+
+	function scale(x: number, k = 100) {
 		return x * k;
 	}
 
 	async function handle_click() {
-		let { content } = await get_document_info(node.id);
+		let content = await get_document_info(node.id);
 		dispatch('message', { title: node.title, content });
 	}
 </script>
@@ -30,9 +35,7 @@
 		title={node.title}
 		borderColor={selected ? 'red' : 'black'}
 	>
-		<div class="is-flex is-align-items-center">
-			<div class="marker {selected ? 'selected' : 'not-selected'}" />
-			<p class="has-text-centered ml-2">{node.title}</p>
-		</div>
+		<div class="marker {selected ? 'selected' : 'not-selected'}" />
+		<p class="ml-2">{trimmed_title}</p>
 	</Node>
 </div>

frontend/src/routes/+page.svelte

@@ -1,18 +1,26 @@
 <script lang="ts">
 	import DocNode from '$lib/components/DocNode.svelte';
 	import { onMount } from 'svelte';
-	import { Node, Svelvet, Minimap, Controls } from 'svelvet';
+	import { Svelvet } from 'svelvet';
 	import type { NodeInfo } from '$lib/types';
 	import { api_url, get_all_documents, post_query } from '$lib/api';
 	import { fly } from 'svelte/transition';
 
 	let query = '';
 	let show_graph = false;
 	let nodes: NodeInfo[] = [];
-	let matches: number[] = [];
+	let matches: NodeInfo[] = [];
 	let modal_open: boolean = false;
 	let modal_title: string = '';
 	let modal_content: string = '';
+	let modal_chunk: string = '';
+
+	function clear_modal() {
+		modal_title = '';
+		modal_content = '';
+		modal_chunk = '';
+		modal_open = false;
+	}
 
 	onMount(async () => {
 		nodes = await get_all_documents();
@@ -30,36 +38,30 @@
 	<div class="modal-card">
 		<header class="modal-card-head">
 			<p class="modal-card-title">{modal_title}</p>
-			<button class="delete" aria-label="close" on:click={(_) => (modal_open = false)} />
+			<button class="delete" aria-label="close" on:click={clear_modal} />
 		</header>
 		<section class="modal-card-body">
-			<article class="message is-info">
-				<div class="message-header">
-					<p>Insight</p>
-				</div>
-				<div class="message-body">
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong
-						>Pellentesque risus mi</strong
-					>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
-					Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
-					<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor,
-					tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem
-					eget, facilisis sodales sem.
-				</div>
-			</article>
+			{#if modal_chunk.length > 0}
+				<article class="message is-info">
+					<div class="message-header">
+						<p>Insight</p>
+					</div>
+					<div class="message-body">
+						{modal_chunk}
+					</div>
+				</article>
+			{/if}
 			<hr />
 			{modal_content}
 		</section>
 		<footer class="modal-card-foot">
-			<button class="button is-black is-fullwidth" on:click={(_) => (modal_open = false)}
-				>Close</button
-			>
+			<button class="button is-black is-fullwidth" on:click={clear_modal}>Close</button>
 		</footer>
 	</div>
 </div>
 
 <main class="main">
-	<section class="hero is-medium">
+	<section class="hero is-medium {show_graph ? 'mb-8' : ''}">
 		<div class="hero-head">
 			<nav class="navbar has-shadow" aria-label="main navigation">
 				<div class="navbar-brand">
@@ -94,11 +96,18 @@
 							{#each nodes as node}
 								<DocNode
 									{node}
-									selected={matches.includes(node.id)}
+									selected={matches.some((n) => n.id == node.id)}
 									on:message={(event) => {
 										let { title, content } = event.detail;
 										modal_content = content;
 										modal_title = title;
+										// get the chunk from the corresponding match
+										const matching_node = matches.find((n) => n.id == node.id);
+										if (matching_node) {
+											modal_chunk = matching_node.chunk;
+										} else {
+											modal_chunk = '';
+										}
 										modal_open = true;
 									}}
 								/>

oktopus/main.py

@@ -19,7 +19,7 @@
 from qdrant_client import QdrantClient
 from sentence_transformers import SentenceTransformer
 
-from oktopus.data_models import DocNode, Document, Query, DocumentScore
+from oktopus.data_models import DocNode, Query, DocumentScore
 from oktopus.chunk2vector import populate_db_qdrant
 from oktopus.settings import config
 import json
@@ -77,7 +77,7 @@ async def get_documents() -> list[DocNode]:
 
 
 @app.post("/search", response_model=list[DocumentScore])
-async def search(query: str) -> list[DocumentScore]:
+async def search(query: Query) -> list[DocumentScore]:
     """Given a question (query) retrieves the scores for all the documents.
 
     Scores relates to the cosine similarity between the query and the document.
@@ -98,7 +98,7 @@ def _filter_unique_document(documents: list[DocumentScore]) -> list[DocumentScor
         return unique_docs
 
     # Simulated score generation, returning doc_id and a score
-    documents_found = search_in_qdrant(query, 5)
+    documents_found = search_in_qdrant(query.query, 5)
 
     return _filter_unique_document(documents_found)