Skip to content
This repository has been archived by the owner on Jul 2, 2024. It is now read-only.

Commit

Permalink
Render performance for big sqlite files
Browse files Browse the repository at this point in the history
  • Loading branch information
TeaByte committed Sep 30, 2023
1 parent 214b2f0 commit 0dc1d34
Show file tree
Hide file tree
Showing 8 changed files with 139 additions and 74 deletions.
18 changes: 7 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
SQLite Viewer GUI Program written in Rust using Tauri + NextJS
# SQLite Viewer V0.4

[ TODO LIST ]

- [ ] Make a web version ( if possible )
- [ ] Add Linux and MacOS Builds
- [ ] Handle Sqlite with password
- [ ] Render performance for big sqlite files
- [x] Render performance for big sqlite files
- [x] Execute SQL command tab
- [x] Schema Generator
- [ ] Sort by column
Expand All @@ -17,23 +17,19 @@ SQLite Viewer GUI Program written in Rust using Tauri + NextJS

**1- Browse All Your SQLite Tables.**

![photo](https://i.ibb.co/SBzVnFX/Browse.png)
![photo](https://i.ibb.co/ZYJSDwx/brow.png)

**2- Database Structure View.**

![photo](https://i.ibb.co/8zGSBHN/Struct.png)
![photo](https://i.ibb.co/fCGJVMk/stuct.png)

**3- Execute SQL Commands**

![photo](https://i.ibb.co/SnTXqwy/execute.png)
![photo](https://i.ibb.co/JnMy5cH/execute.png)

**4- Errors are easy to recognize**
**4- Light and Dark mode**

![photo](https://i.ibb.co/Xtb0pZT/error.png)

**5- Light and Dark mode**

![photo](https://i.ibb.co/XpC9Mwm/image.png)
![photo](https://i.ibb.co/tP84yCS/light.png)

##

Expand Down
4 changes: 2 additions & 2 deletions src-tauri/tauri.conf.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@
"windows": [
{
"fullscreen": false,
"height": 600,
"minHeight": 600,
"height": 630,
"minHeight": 630,
"resizable": true,
"title": "SQLite Viewer",
"width": 800,
Expand Down
118 changes: 92 additions & 26 deletions src/app/browse.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
"use client";

import { useState } from "react";
import { Columns } from "@/types";
import { SetStateAction } from "react";
import {
Expand Down Expand Up @@ -27,8 +28,25 @@ interface BrowseProps {
records: Columns;
}

const ROWS_PER_PAGE = 100;

export default function Browse(props: BrowseProps) {
const { setSelectedTable, tables, selectedTable, records } = props;
const [currentPage, setCurrentPage] = useState(1);

const startIndex = (currentPage - 1) * ROWS_PER_PAGE;
const endIndex = startIndex + ROWS_PER_PAGE;

const totalPages = Math.ceil(
// @ts-ignore
records[selectedTable]?.[Object.keys(records[selectedTable])[0]]?.length /
ROWS_PER_PAGE
);

const handleChangePage = (page: number) => {
setCurrentPage(page);
};

return (
<div className="w-full">
<div className="px-2 flex gap-2 items-center">
Expand Down Expand Up @@ -62,35 +80,83 @@ export default function Browse(props: BrowseProps) {
</div>
<div className="mt-2 h-[420px] overflow-auto">
{selectedTable && records[selectedTable] && (
<Table>
<TableHeader>
<TableRow>
{Object.keys(records[selectedTable]).map((column, index) => (
<TableHead key={index}>{column}</TableHead>
))}
</TableRow>
</TableHeader>
<TableBody>
{records[selectedTable][
Object.keys(records[selectedTable])[0]
].map((_, rowIndex) => (
<TableRow key={rowIndex}>
{Object.keys(records[selectedTable]).map(
(column, columnIndex) => (
<TableCell
key={columnIndex}
className="max-w-[150px] truncate hover:max-w-full"
>
<span>{records[selectedTable][column][rowIndex]}</span>
</TableCell>
)
)}
<>
<Table>
<TableHeader>
<TableRow>
{Object.keys(records[selectedTable]).map((column, index) => (
<TableHead key={index}>{column}</TableHead>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableHeader>
<TableBody>
{records[selectedTable][Object.keys(records[selectedTable])[0]]
.slice(startIndex, endIndex)
.map((_, rowIndex) => (
<TableRow key={rowIndex}>
{Object.keys(records[selectedTable]).map(
(column, columnIndex) => (
<TableCell
key={columnIndex}
className="max-w-[150px] truncate"
>
<span>
{
records[selectedTable][column][
rowIndex + startIndex
]
}
</span>
</TableCell>
)
)}
</TableRow>
))}
</TableBody>
</Table>
</>
)}
</div>
<Pagination
currentPage={currentPage}
totalPages={totalPages}
onPageChange={handleChangePage}
/>
</div>
);
}

interface PaginationProps {
currentPage: number;
totalPages: number;
onPageChange: (page: number) => void;
}

const Pagination: React.FC<PaginationProps> = ({
currentPage,
totalPages,
onPageChange,
}) => {
// @ts-ignore
const pageNumbers = [...Array(totalPages).keys()].map((num) => num + 1);

return (
<ul className="flex overflow-x-scroll">
{pageNumbers.map((page) => (
<li
key={page}
className={`grow ${
currentPage === page ? "bg-primary text-background" : "bg-secondary"
}`}
>
<button
className={`page-link p-2 text-center w-full`}
onClick={() => onPageChange(page)}
>
{page}
</button>
</li>
))}
</ul>
);
};
5 changes: 1 addition & 4 deletions src/app/execute.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,7 @@ export default function ExecuteSQL({ table }: { table: string }) {
{result.map((row, index) => (
<TableRow key={index}>
{Object.values(row).map((value, index) => (
<TableCell
key={index}
className="max-w-[150px] truncate hover:max-w-full"
>
<TableCell key={index} className="max-w-[150px] truncate">
{value}
</TableCell>
))}
Expand Down
6 changes: 4 additions & 2 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,12 @@ export default function RootLayout({
disableTransitionOnChange
>
{children}
<footer className="p-4 fixed bottom-0 w-full bg-background">
<footer className="p-4 fixed bottom-0 w-full bg-background border-t border-secondary">
<div className="flex justify-between items-center">
<Toggle />
SQLite Viewer V0.3
<span className="hover:animate-bounce animate-pulse">
SQLite Viewer V0.4
</span>
</div>
</footer>
</ThemeProvider>
Expand Down
58 changes: 31 additions & 27 deletions src/app/load.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,33 +59,37 @@ export default function Load({ path }: { path: string }) {

return (
<div className="w-full">
<Tabs defaultValue="structure">
<TabsList className="w-full flex gap-2">
<TabsTrigger value="structure" className="grow">
Structure
</TabsTrigger>
<TabsTrigger value="browse" className="grow">
Browse Data
</TabsTrigger>
<TabsTrigger value="execute" className="grow">
Execute SQL
</TabsTrigger>
</TabsList>
<TabsContent value="structure">
<Structure tablesInfo={tablesInfo} />
</TabsContent>
<TabsContent value="browse">
<Browse
tables={tables}
selectedTable={selectedTable}
records={records}
setSelectedTable={setSelectedTable}
/>
</TabsContent>
<TabsContent value="execute">
<ExecuteSQL table={tables[0]} />
</TabsContent>
</Tabs>
{selectedTable ? (
<Tabs defaultValue="structure">
<TabsList className="w-full flex gap-2">
<TabsTrigger value="structure" className="grow">
Structure
</TabsTrigger>
<TabsTrigger value="browse" className="grow">
Browse Data
</TabsTrigger>
<TabsTrigger value="execute" className="grow">
Execute SQL
</TabsTrigger>
</TabsList>
<TabsContent value="structure">
<Structure tablesInfo={tablesInfo} />
</TabsContent>
<TabsContent value="browse">
<Browse
tables={tables}
selectedTable={selectedTable}
records={records}
setSelectedTable={setSelectedTable}
/>
</TabsContent>
<TabsContent value="execute">
<ExecuteSQL table={tables[0]} />
</TabsContent>
</Tabs>
) : (
<h1 className="text-2xl w-full mt-20 text-center">Loading Data..</h1>
)}
</div>
);
}
2 changes: 1 addition & 1 deletion src/app/structure.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
export default function Structure({ tablesInfo }: { tablesInfo: TableInfos }) {
return (
<div className="w-full">
<Accordion type="single" collapsible className="w-full">
<Accordion type="multiple" className="w-full">
{Object.keys(tablesInfo).map((table, index) => (
<div key={index} className="flex flex-col">
<AccordionItem value={table}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/theme/toggle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function Toggle() {
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuContent align="start">
<DropdownMenuItem onClick={() => setTheme("light")}>
Light
</DropdownMenuItem>
Expand Down

0 comments on commit 0dc1d34

Please sign in to comment.