Render performance for big sqlite files

TeaByte · Sep 30, 2023 · 0dc1d34 · 0dc1d34
1 parent 214b2f0
commit 0dc1d34
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 74 deletions.
diff --git a/README.md b/README.md
@@ -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
@@ -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)
 
 ##
 

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -63,8 +63,8 @@
     "windows": [
       {
         "fullscreen": false,
-        "height": 600,
-        "minHeight": 600,
+        "height": 630,
+        "minHeight": 630,
         "resizable": true,
         "title": "SQLite Viewer",
         "width": 800,

diff --git a/src/app/browse.tsx b/src/app/browse.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { Columns } from "@/types";
 import { SetStateAction } from "react";
 import {
@@ -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">
@@ -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>
+  );
+};
diff --git a/src/app/execute.tsx b/src/app/execute.tsx
@@ -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>
                   ))}

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -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>

diff --git a/src/app/load.tsx b/src/app/load.tsx
@@ -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>
   );
 }
diff --git a/src/app/structure.tsx b/src/app/structure.tsx
@@ -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}>

diff --git a/src/components/theme/toggle.tsx b/src/components/theme/toggle.tsx
@@ -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>