fix styling and report creation

backend/zeno_backend/database/update.py

@@ -254,7 +254,7 @@ def report_element(element: ReportElement):
     """
     db = Database()
     db.connect_execute(
-        "UPDATE report_elements SET type = %s, data = %s, chart_id = %s,"
+        "UPDATE report_elements SET type = %s, data = %s, chart_id = %s"
         " WHERE id = %s;",
         [
             element.type,

backend/zeno_backend/server.py

@@ -1,4 +1,5 @@
 """The FastAPI server for the Zeno backend. Provides endpoints to load data."""
+import logging
 import os
 import shutil
 from pathlib import Path
@@ -8,7 +9,9 @@
 from amplitude import Amplitude, BaseEvent
 from dotenv import load_dotenv
 from fastapi import Depends, FastAPI, HTTPException, Request, Response, status
+from fastapi.exceptions import RequestValidationError
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse
 from fastapi_cloudauth.cognito import Cognito
 
 import zeno_backend.database.delete as delete
@@ -95,6 +98,17 @@ def get_server() -> FastAPI:
     def ping():
         return Response(status_code=status.HTTP_200_OK)
 
+    @api_app.exception_handler(RequestValidationError)
+    async def validation_exception_handler(
+        request: Request, exc: RequestValidationError
+    ):
+        exc_str = f"{exc}".replace("\n", " ").replace("   ", " ")
+        logging.error(f"{request}: {exc_str}")
+        content = {"status_code": 10422, "message": exc_str, "data": None}
+        return JSONResponse(
+            content=content, status_code=status.HTTP_422_UNPROCESSABLE_ENTITY
+        )
+
     ###################################################################### Fetch
     @api_app.get(
         "/users", response_model=list[User], tags=["zeno"], dependencies=[Depends(auth)]
@@ -695,8 +709,12 @@ def update_project_user(project: str, user: User):
     def update_project_org(project: str, organization: Organization):
         update.project_org(project, organization)
 
-    @api_app.post("/report-element/update", tags=["zeno"], dependencies=[Depends(auth)])
-    def update_report_element(element: ReportElement):
+    @api_app.post(
+        "/report-element/update/{report_id}",
+        tags=["zeno"],
+        dependencies=[Depends(auth)],
+    )
+    def update_report_element(report_id: int, element: ReportElement):
         update.report_element(element)
 
     ####################################################################### Delete

frontend/package.json

@@ -75,7 +75,9 @@
 		"d3-scale-chromatic": "^3.0.0",
 		"d3-selection": "^3.0.0",
 		"d3-shape": "^3.1.0",
+		"dompurify": "^3.0.5",
 		"internmap": "^2.0.3",
+		"marked": "^9.0.0",
 		"regl-scatterplot": "^1.8.3",
 		"sirv-cli": "^2.0.0",
 		"svelte-dnd-action": "^0.9.22",

frontend/src/app.css

@@ -1,3 +1,16 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+	h1 {
+		@apply text-2xl;
+	}
+	h2 {
+		@apply text-xl;
+	}
+	ul,
+	ol {
+		@apply list-disc list-inside;
+	}
+}

frontend/src/lib/components/project/Project.svelte

@@ -36,53 +36,56 @@
 	on:focus={() => (hovering = true)}
 	on:mouseleave={() => (hovering = false)}
 	on:blur={() => (hovering = false)}
-	class="border-solid m-1 rounded-lg border-primary border-2 w-64 flex flex-col"
+	class="border-solid m-1 rounded-lg border-primary border-2 w-64 flex flex-col p-2 hover:bg-primary-ligther"
 >
-	<div class="flex justify-between items-center w-full px-2 py-1">
-		<span class="mr-2 text-base truncate">{project.name}</span>
-		<div
-			class="w-9 h-9 relative"
-			use:clickOutside={() => {
-				showOptions = false;
-			}}
-		>
-			{#if hovering && deletable}
-				<IconButton
-					size="button"
-					style="padding: 0px"
-					on:click={(e) => {
-						e.stopPropagation();
-						showOptions = !showOptions;
-					}}
-				>
-					<Icon tag="svg" viewBox="0 0 24 24">
-						<path fill="black" d={mdiDotsHorizontal} />
-					</Icon>
-				</IconButton>
-			{/if}
-			{#if showOptions}
-				<div class="top-0 right-0 absolute mt-9 hover:bg-grey-lighter z-30">
-					<Paper style="padding: 3px 0px;" elevation={7}>
-						<Content>
-							<button
-								class="flex items-center w-20 py px-2 hover:bg-grey-lighter"
-								on:click={(e) => {
-									e.stopPropagation();
-									showOptions = false;
-									ZenoService.deleteProject(project.uuid).then(() => invalidate('app:projects'));
-								}}
-							>
-								<Icon style="font-size: 18px;" class="material-icons">delete_outline</Icon>&nbsp;
-								<span class="text-xs">Remove</span>
-							</button>
-						</Content>
-					</Paper>
-				</div>
-			{/if}
+	<div class="flex flex-col w-full">
+		<div class="flex justify-between items-center">
+			<p class="mr-2 truncate text-black text-lg">{project.name}</p>
+			<div
+				class="w-9 h-9 relative"
+				use:clickOutside={() => {
+					showOptions = false;
+				}}
+			>
+				{#if hovering && deletable}
+					<IconButton
+						size="button"
+						style="padding: 0px"
+						on:click={(e) => {
+							e.stopPropagation();
+							showOptions = !showOptions;
+						}}
+					>
+						<Icon tag="svg" viewBox="0 0 24 24">
+							<path fill="black" d={mdiDotsHorizontal} />
+						</Icon>
+					</IconButton>
+				{/if}
+				{#if showOptions}
+					<div class="top-0 right-0 absolute mt-9 hover:bg-grey-lighter z-30">
+						<Paper style="padding: 3px 0px;" elevation={7}>
+							<Content>
+								<button
+									class="flex items-center w-20 py px-2 hover:bg-grey-lighter"
+									on:click={(e) => {
+										e.stopPropagation();
+										showOptions = false;
+										ZenoService.deleteProject(project.uuid).then(() => invalidate('app:projects'));
+									}}
+								>
+									<Icon style="font-size: 18px;" class="material-icons">delete_outline</Icon>&nbsp;
+									<span class="text-xs">Remove</span>
+								</button>
+							</Content>
+						</Paper>
+					</div>
+				{/if}
+			</div>
 		</div>
 	</div>
+	<p class="mr-2 text-base truncate">{project.ownerName}</p>
 	{#if $featureFlags['PROJECT_STATS']}
-		<div class="flex items-center w-full px-2 mb-2">
+		<div class="flex items-center w-full mb-2 mt-3">
 			{#await ZenoService.getProjectStats(project.uuid)}
 				<CircularProgress style="height: 32px; width: 32px; margin-right:20px" indeterminate />
 			{:then stats}

frontend/src/lib/components/report/ChartElement.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import ChartContainer from '../chart/ChartContainer.svelte';
+
 	// import BarChartReport from '../report/bar-chart/BarChartReport.svelte';
 	// import BeeswarmChartReport from '../report/beeswarm-chart/BeeswarmChartReport.svelte';
 	// import HeatMapReport from '../report/heatmap-chart/HeatMapReport.svelte';
@@ -20,5 +22,8 @@
 	// export let element: ReportChartElement;
 </script>
 
+<ChartContainer chartName={chart.name}>
+	<svelte:component this={chartMap[chart.type]} {chart} data={chartData} />
+</ChartContainer>
 <!-- 
 <svelte:component this={ChartMap[element.type]} passedReport={$reports[element.reportIndex]} /> -->

frontend/src/lib/components/report/Element.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ReportElementType, type ReportElement } from '$lib/zenoapi';
-	import { mdiCheck, mdiClose, mdiFileEdit, mdiPlus } from '@mdi/js';
+	import { mdiCheck, mdiClose, mdiFileEdit } from '@mdi/js';
 	import { Svg } from '@smui/common';
 	import IconButton, { Icon } from '@smui/icon-button';
 	import { createEventDispatcher } from 'svelte';
@@ -11,25 +11,20 @@
 	export let element: ReportElement;
 	export let isEdit: boolean;
 
+	let elementToEdit = false;
+
 	const dispatch = createEventDispatcher();
 	const dispatchUpdate = createEventDispatcher<{
-		updateElement: { element: ReportElement };
+		update: { element: ReportElement };
 	}>();
 
-	let elementToEdit = false;
-	function deleteElement() {
-		dispatch('deleteElement');
-	}
 	function updateElement() {
 		elementToEdit = false;
-		dispatchUpdate('updateElement', { element: element });
-	}
-	function addElement() {
-		dispatch('addElement');
+		dispatchUpdate('update', { element: element });
 	}
 </script>
 
-<div class="flex items-center whitespace-nowrap">
+<div class="flex items-center whitespace-nowrap my-5">
 	<div class="w-[800px]">
 		{#if !elementToEdit}
 			{#if element.type === ReportElementType.TEXT}
@@ -48,12 +43,7 @@
 					<path fill="black" d={mdiFileEdit} />
 				</Icon>
 			</IconButton>
-			<IconButton on:click={addElement}>
-				<Icon component={Svg} viewBox="0 0 24 24">
-					<path fill="black" d={mdiPlus} />
-				</Icon>
-			</IconButton>
-			<IconButton on:click={deleteElement}>
+			<IconButton on:click={() => dispatch('delete')}>
 				<Icon component={Svg} viewBox="0 0 24 24">
 					<path fill="black" d={mdiClose} />
 				</Icon>

frontend/src/lib/components/report/Report.svelte

@@ -20,10 +20,10 @@
 	on:focus={() => (hovering = true)}
 	on:mouseleave={() => (hovering = false)}
 	on:blur={() => (hovering = false)}
-	class="border-solid m-1 rounded-lg border-primary border-2 w-64 flex flex-col"
+	class="border-solid m-1 rounded-lg border-primary border-2 w-64 flex flex-col hover:bg-primary-ligther"
 >
 	<div class="flex justify-between items-center w-full px-2 py-1">
-		<span class="mr-2 text-base truncate">{report.name}</span>
+		<p class="mr-2 mt-2 mb-2 truncate text-black text-lg">{report.name}</p>
 		<div
 			class="w-9 h-9 relative"
 			use:clickOutside={() => {

frontend/src/lib/components/report/TextElement.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
 	import type { ReportElement } from '$lib/zenoapi';
+	import purify from 'dompurify';
+	import { parse } from 'marked';
 
 	export let element: ReportElement;
+
+	let renderedInput = element.data ? purify.sanitize(parse(element.data)) : '';
 </script>
 
-{element.data}
+<div>
+	{@html renderedInput}
+</div>

frontend/src/lib/zenoapi/services/ZenoService.ts

@@ -1195,14 +1195,21 @@ export class ZenoService {
 
 	/**
 	 * Update Report Element
+	 * @param reportId
 	 * @param requestBody
 	 * @returns any Successful Response
 	 * @throws ApiError
 	 */
-	public static updateReportElement(requestBody: ReportElement): CancelablePromise<any> {
+	public static updateReportElement(
+		reportId: number,
+		requestBody: ReportElement
+	): CancelablePromise<any> {
 		return __request(OpenAPI, {
 			method: 'POST',
-			url: '/report-element/update',
+			url: '/report-element/update/{report_id}',
+			path: {
+				report_id: reportId
+			},
 			body: requestBody,
 			mediaType: 'application/json',
 			errors: {

frontend/src/routes/(app)/+page.server.ts

@@ -1,24 +1,31 @@
 import { getEndpoint } from '$lib/util/util';
-import { OpenAPI, ZenoService, type Project } from '$lib/zenoapi';
+import { OpenAPI, ZenoService, type Project, type Report } from '$lib/zenoapi';
 
 export async function load({ cookies, depends }) {
 	depends('app:projects');
+	depends('app:reports');
+
 	OpenAPI.BASE = `${getEndpoint()}/api`;
 
-	let projects: Project[] = [];
 	const userCookie = cookies.get('loggedIn');
+
+	let reports: Report[] = [];
+	let projects: Project[] = [];
 	if (userCookie) {
 		const cognitoUser = JSON.parse(userCookie);
 		OpenAPI.HEADERS = {
 			Authorization: 'Bearer ' + cognitoUser.accessToken
 		};
+		reports = await ZenoService.getReports();
 		projects = await ZenoService.getProjects();
 	}
-
+	const publicReports = await ZenoService.getPublicReports();
 	const publicProjects = await ZenoService.getPublicProjects();
 
 	return {
 		projects: projects,
-		publicProjects: publicProjects
+		publicProjects: publicProjects,
+		reports: reports,
+		publicReports: publicReports
 	};
 }