fix: Fix sqlite thread issue and a few dashbaord ui improvements

openadapt/app/dashboard/api/index.py

@@ -2,25 +2,16 @@
 
 
 from fastapi import FastAPI
-import sqlalchemy as sa
 
 from openadapt.app.cards import is_recording, quick_record, stop_record
+from openadapt.db.crud import get_all_recordings
 from openadapt.db.db import Session
 from openadapt.models import Recording
 
 app = FastAPI()
 db = Session()
 
 
-def get_all_recordings() -> list[Recording]:
-    """Get all recordings.
-
-    Returns:
-        list[Recording]: A list of all recordings.
-    """
-    return db.query(Recording).order_by(sa.desc(Recording.timestamp)).all()
-
-
 @app.get("/api/recordings", response_model=None)
 def get_recordings() -> dict[str, list[Recording]]:
     """Get all recordings."""

openadapt/app/dashboard/app/recordings/page.tsx

@@ -4,6 +4,7 @@ import { SimpleTable } from "@/components/SimpleTable";
 import { Recording, RecordingStatus } from "@/types/recording";
 import { Box, Button } from "@mantine/core";
 import { useEffect, useState } from "react";
+import { timeStampToDateString } from "../utils";
 
 
 export default function Recordings() {
@@ -76,14 +77,13 @@ export default function Recordings() {
                 </Button>
             )}
             <SimpleTable
-                columnNames={['ID', 'Description', 'Start time', 'Timestamp', 'Monitor Width/Height', 'Double Click Interval Seconds/Pixels']}
-                columnIdentifiers={[
-                    'id',
-                    'task_description',
-                    (recording: Recording) => recording.video_start_time ? new Date(recording.video_start_time).toLocaleString() : '',
-                    (recording: Recording) => new Date(recording.timestamp).toLocaleString(),
-                    (recording: Recording) => `${recording.monitor_width}/${recording.monitor_height}`,
-                    (recording: Recording) => `${recording.double_click_interval_seconds}/${recording.double_click_distance_pixels}`,
+                columns={[
+                    {name: 'ID', accessor: 'id'},
+                    {name: 'Description', accessor: 'task_description'},
+                    {name: 'Start time', accessor: (recording: Recording) => recording.video_start_time ? timeStampToDateString(recording.video_start_time) : 'N/A'},
+                    {name: 'Timestamp', accessor: (recording: Recording) => recording.timestamp ? timeStampToDateString(recording.timestamp) : 'N/A'},
+                    {name: 'Monitor Width/Height', accessor: (recording: Recording) => `${recording.monitor_width}/${recording.monitor_height}`},
+                    {name: 'Double Click Interval Seconds/Pixels', accessor: (recording: Recording) => `${recording.double_click_interval_seconds}/${recording.double_click_distance_pixels}`},
                 ]}
                 data={recordings}
                 refreshData={fetchRecordings}

openadapt/app/dashboard/app/routes.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import Home from './page'
 import Recordings from './recordings/page'
 
 type Route = {
@@ -9,11 +8,6 @@ type Route = {
 }
 
 export const routes: Route[] = [
-    {
-        name: 'Home',
-        path: '/',
-        component: <Home />,
-    },
     {
         name: 'Recordings',
         path: '/recordings',

openadapt/app/dashboard/app/utils.ts

@@ -0,0 +1,4 @@
+export const timeStampToDateString = (timeStamp: number) => {
+    const date = new Date(timeStamp * 1000);
+    return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+}

openadapt/app/dashboard/components/Navbar/Navbar.tsx

@@ -5,6 +5,7 @@ import { routes } from '@/app/routes'
 import { Stack } from '@mantine/core'
 import Link from 'next/link'
 import React from 'react'
+import { IconChevronRight } from '@tabler/icons-react'
 
 export const Navbar = () => {
     const currentRoute = usePathname()
@@ -16,10 +17,10 @@ export const Navbar = () => {
                     key={route.path}
                     className={
                         (currentRoute === route.path ? 'bg-gray-200' : '') +
-                        ' p-5 no-underline'
+                        ' p-5 no-underline flex items-center gap-x-1 transition hover:gap-x-2 ease-out'
                     }
                 >
-                    {route.name}
+                    {route.name} <IconChevronRight size={20} />
                 </Link>
             ))}
         </Stack>

openadapt/app/dashboard/components/SimpleTable/SimpleTable.tsx

@@ -1,17 +1,18 @@
-import { Box, Button, Flex, Table } from "@mantine/core"
+import { Button, Flex, Table } from "@mantine/core"
 import { IconRefresh } from '@tabler/icons-react'
+import React from "react"
 
 type Props<T extends Record<string, any>> = {
-    columnNames: string[],
-    // columnIdentifiers, which is an array, which can contain strings, or a function that takes an object and returns a string
-    columnIdentifiers: (string | ((row: T) => string))[],
+    columns: {
+        name: string,
+        accessor: string | ((row: T) => React.ReactNode),
+    }[];
     data: T[],
     refreshData: () => void,
 }
 
 export function SimpleTable<T extends Record<string, any>>({
-    columnNames,
-    columnIdentifiers,
+    columns,
     data,
     refreshData,
 }: Props<T>) {
@@ -23,17 +24,17 @@ export function SimpleTable<T extends Record<string, any>>({
         <Table mt={20}>
             <Table.Thead>
                 <Table.Tr>
-                    {columnNames.map((name) => (
+                    {columns.map(({name}) => (
                         <Table.Th key={name}>{name}</Table.Th>
                     ))}
                 </Table.Tr>
             </Table.Thead>
             <Table.Tbody>
                 {data.map((row, rowIndex) => (
                     <Table.Tr key={rowIndex}>
-                        {columnIdentifiers.map((identifier, identifierIndex) => (
-                            <Table.Td key={identifierIndex}>
-                                {typeof identifier === 'string' ? row[identifier] : identifier(row)}
+                        {columns.map(({accessor}, accesorIndex) => (
+                            <Table.Td key={accesorIndex} py={20}>
+                                {typeof accessor === 'string' ? row[accessor] : accessor(row)}
                             </Table.Td>
                         ))}
                     </Table.Tr>

openadapt/db/db.py

@@ -49,6 +49,7 @@ def get_engine() -> sa.engine:
     """Create and return a database engine."""
     engine = sa.create_engine(
         config.DB_URL,
+        connect_args={"check_same_thread": False},
         echo=config.DB_ECHO,
     )
     return engine