[ui] show details of example databases

Author: torymur

ui/assets/sqlite_logo.png

@@ -0,0 +1,74 @@
+/// Preloaded examples of databases to start UI with somethinh
+
+use std::include_bytes;
+
+pub const SIMPLE_DB: &str = "Simple";
+pub const BIG_PAGE_DB: &str = "Max page size";
+pub const TABLE_INDEX_LEAF_DB: &str = "Leaf nodes";
+pub const OVERFLOW_PAGE_DB: &str = "Overflow pages";
+pub const TABLE_INDEX_INTERIOR_DB: &str = "Interior nodes";
+
+pub static INCLUDED_DB: &'static [(&'static str, (&'static [u8], &'static [&'static str]))] = &[
+    (
+        SIMPLE_DB,
+        (
+            include_bytes!("../included/simple"),
+            &[
+                "CREATE TABLE simple(int)",
+                "INSERT INTO simple VALUES(1), (2), (3), (4)",
+            ],
+        ),
+    ), 
+    (
+        BIG_PAGE_DB, 
+        (
+            include_bytes!("../included/big_page"),
+            &[
+                "PRAGMA page_size=65536",
+                "CREATE TABLE big_page(int)",
+                "INSERT INTO simple VALUES(1), (2), (3), (4)",
+            ],
+        ),
+    ),
+    (
+       TABLE_INDEX_LEAF_DB,
+       (
+            include_bytes!("../included/table_index_leaf"),
+            &[
+                "CREATE TABLE stars(id INTEGER PRIMARY KEY, name TEXT, distance REAL, brightness REAL)",
+                "INSERT INTO stars VALUES(100, 'Sirius', 8.6, -1.46), ... ",
+                "CREATE INDEX idx_stars_name ON stars (name)",
+                "CREATE TABLE spaceships(launched, name, operator)",
+                "INSERT INTO spaceships VALUES(1977, 'Voyager 1', 'NASA'), ... ",
+                "CREATE INDEX idx_spaceships_name ON spaceships(name)",
+            ],
+        ),
+    ),
+    (
+       OVERFLOW_PAGE_DB,
+       (
+            include_bytes!("../included/overflow_page"),
+            &[
+                "PRAGMA page_size=1024",
+                "CREATE TABLE mixed_overflow(text, longint, int, blob)",
+                "CREATE TABLE blob_overflow(blob)",
+                "INSERT INTO blob_overflow VALUES(fileio_read('dev/overflow.txt'))",
+                "INSERT INTO mixed_overflow SELECT CAST(blob as TEXT), 234234235, 0, blob FROM blob_overflow",
+                "INSERT INTO mixed_overflow SELECT CAST(blob as TEXT), 94542343, 1, blob FROM blob_overflow",
+            ],
+        ),
+    ),
+    (
+        TABLE_INDEX_INTERIOR_DB,
+        (
+            include_bytes!("../included/table_index_interior"),
+            &[
+                "PRAGMA page_size=512",
+                "CREATE TABLE macro_story(line)",
+                "INSERT INTO macro_story SELECT VALUE FROM fileio_scan('dev/lines.txt')",
+                "CREATE INDEX idx_macro_story_line ON macro_story(line)",
+            ],
+        ),
+    ),
+];
+

ui/assets/tailwind.css

@@ -110,11 +110,21 @@ pub fn Header() -> Element {
         div {
             class: "h-12 flex items-center bg-slate-200",
             div {
-                class: "text-xl font-bold tracking-tighter pl-4",
+                class: "pl-4",
+                a {
+                    href: "https://www.sqlite.org/fileformat2.html",
+                    img {
+                        class: "h-10 object-scale-down",
+                        src: "./sqlite_logo.png"
+                    }
+                }
+            }
+            div {
+                class: "text-xl font-bold tracking-tighter",
                 "SQLite File Format",
             }
             div {
-                class: "pl-4 tooltip tooltip-right",
+                class: "tooltip tooltip-bottom pl-4",
                 "data-tip": "Like the project? Give us a star ☆",
                 a {
                     href: "https://github.com/torymur/sqlite-repr",
@@ -127,10 +137,7 @@ pub fn Header() -> Element {
             div { class: "flex-grow" }
             div {
                 class: "join",
-                div {
-                    class: "join-item btn btn-secondary tracking-tighter font-bold",
-                    "Example database"
-                }
+                ExampleDetails { }
                 select {
                     class: "join-item select select-secondary select-bordered font-bold tracking-tighter focus:outline-none",
                     oninput: move |e| {
@@ -161,6 +168,39 @@ pub fn Header() -> Element {
     }
 }
 
+pub fn ExampleDetails() -> Element {
+    let current_db = use_context::<AppState>().current_db;
+    let viewer = use_context::<AppState>().viewer;
+    let rviewer = viewer.read();
+    let details = rviewer.included_db.get(current_db().as_str());
+    match details {
+        None => rsx! { div { } },
+        Some((_, desc)) => {
+            rsx! {
+                div {
+                    class: "dropdown dropdown-hover",
+                    div {
+                        class: "join-item btn bg-secondary border border-secondary tracking-tighter font-bold hover:border-secondary hover:bg-secondary",
+                        tabindex: 0,
+                        role: "button",
+                        "Database Example"
+                    }
+                    ul {
+                        class: "text-xs dropdown-content z-[1] menu bg-secondary shadow w-max tracking-tighter",
+                        for line in desc {
+                            li {
+                                a {
+                                    "{line}"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
 pub fn Body() -> Element {
     rsx! {
         div {
@@ -197,7 +237,7 @@ pub fn SideBar() -> Element {
             class: "rounded-box p-4 h-[calc(100vh-48px)] w-fit overflow-y-auto",
             div {
                 class: "text-lg font-bold truncate pb-4",
-                "🗐  Pages",
+                "Pages",
             }
             div {
                 for (n, page) in pages.into_iter().enumerate() {

ui/src/included_db.rs

@@ -2,6 +2,7 @@
 //! rendering of parsed structures.
 
 pub mod header;
+pub mod included_db;
 pub mod index;
 pub mod overflow_pages;
 pub mod pages;

ui/src/index.rs

@@ -4,7 +4,8 @@ use std::rc::Rc;
 
 use dioxus::prelude::*;
 
-use crate::viewer::{Viewer, SIMPLE_DB};
+use crate::included_db::SIMPLE_DB;
+use crate::viewer::Viewer;
 use crate::{Field, PageView, Part};
 
 #[derive(Clone, Debug)]

ui/src/lib.rs

@@ -1,46 +1,28 @@
 //! Database UI Viewer.
 
 use std::collections::BTreeMap;
-use std::include_bytes;
 use std::rc::Rc;
 
 use parser::{Cell, OverflowPage, Reader, StdError};
 
+use crate::included_db::INCLUDED_DB;
 use crate::overflow_pages::OverflowPageElementBuilder;
 use crate::pages::BtreePageElementBuilder;
 use crate::PageView;
 
 #[derive(Debug)]
 pub struct Viewer {
-    pub included_db: BTreeMap<&'static str, &'static [u8]>,
+    pub included_db: BTreeMap<&'static str, (&'static [u8], &'static [&'static str])>,
     pub pages: Vec<Rc<dyn PageView>>,
 }
 
 pub type Result<T, E = StdError> = std::result::Result<T, E>;
 
-// Preloaded examples of databases to start UI with something
-pub const SIMPLE_DB_BYTES: &[u8] = include_bytes!("../included/simple");
-pub const BIG_PAGE_DB_BYTES: &[u8] = include_bytes!("../included/big_page");
-pub const TABLE_INDEX_LEAF_DB_BYTES: &[u8] = include_bytes!("../included/table_index_leaf");
-pub const OVERFLOW_PAGE_DB_BYTES: &[u8] = include_bytes!("../included/overflow_page");
-pub const TABLE_INDEX_INTERIOR_DB_BYTES: &[u8] = include_bytes!("../included/table_index_interior");
-pub const SIMPLE_DB: &str = "Simple";
-pub const BIG_PAGE_DB: &str = "Max page size";
-pub const TABLE_INDEX_LEAF_DB: &str = "Leaf nodes";
-pub const OVERFLOW_PAGE_DB: &str = "Overflow pages";
-pub const TABLE_INDEX_INTERIOR_DB: &str = "Interior nodes";
-
 impl Viewer {
     pub fn new_from_included(name: &str) -> Result<Self, StdError> {
-        let included_db = BTreeMap::from([
-            (SIMPLE_DB, SIMPLE_DB_BYTES),
-            (BIG_PAGE_DB, BIG_PAGE_DB_BYTES),
-            (TABLE_INDEX_LEAF_DB, TABLE_INDEX_LEAF_DB_BYTES),
-            (OVERFLOW_PAGE_DB, OVERFLOW_PAGE_DB_BYTES),
-            (TABLE_INDEX_INTERIOR_DB, TABLE_INDEX_INTERIOR_DB_BYTES),
-        ]);
-
-        let bytes = included_db.get(name).ok_or("This db is not included.")?;
+        let included_db: BTreeMap<&'static str, (&'static [u8], &'static [&'static str])> =
+            BTreeMap::from_iter(INCLUDED_DB.iter().map(|v| *v));
+        let (bytes, _) = included_db.get(name).ok_or("This db is not included.")?;
         let reader = Reader::new(bytes)?;
         let size = reader.db_header.page_size as usize;
         let mut pages_map: BTreeMap<usize, Rc<dyn PageView>> = BTreeMap::new();