minor fixes

Author: phiresky

create_db.sh

@@ -3,9 +3,20 @@ cd "$(dirname "$0")"
 rm -rf dist/data
 mkdir -p dist/data
 cat create_db.sql | sqlite3 -cmd '.echo on' dist/data/db.sqlite3
+lastUpdated="$(sqlite3 dist/data/db.sqlite3 'select max(published) from videoData')"
+
 bytes="$(stat --printf="%s" dist/data/db.sqlite3)"
 serverChunkSize=$((50 * 1024 * 1024))
 suffixLength=3
 split dist/data/db.sqlite3 --bytes=$serverChunkSize dist/data/db.sqlite3. --suffix-length=$suffixLength --numeric-suffixes
 rm dist/data/db.sqlite3
-echo '{"requestChunkSize": 4096, "databaseLengthBytes": '$bytes', "serverChunkSize": '$serverChunkSize', "urlPrefix": "db.sqlite3.", "suffixLength": '$suffixLength'}' > dist/data/config.json
+echo '
+{
+    "requestChunkSize": 4096,
+    "lastUpdated": '$lastUpdated',
+    "databaseLengthBytes": '$bytes',
+    "serverChunkSize": '$serverChunkSize',
+    "urlPrefix": "db.sqlite3.",
+    "suffixLength": '$suffixLength'
+}
+' > dist/data/config.json

src/UI.tsx

@@ -16,7 +16,6 @@ import createPlotlyComponent from "react-plotly.js/factory";
 import Plotly from "plotly.js/lib/core";
 import { textChangeRangeIsUnchanged } from "typescript";
 
-
 const Plot = createPlotlyComponent(Plotly);
 
 function formatDuration(sec_num: number) {
@@ -90,11 +89,15 @@ function formatBytes(b: number) {
   return b + "B";
 }
 
-const SqliteStats: React.FC<{ stats: SqliteStats }> = observer(({ stats }) => {
+const SqliteStats: React.FC<{
+  stats: SqliteStats;
+  lastUpdated: number;
+}> = observer(({ stats, lastUpdated }) => {
   return (
     <>
       Sqlite stats: fetched {formatBytes(stats.totalFetchedBytes)} in{" "}
-      {stats.totalRequests} requests (DB size: {formatBytes(stats.totalBytes)})
+      {stats.totalRequests} requests (DB size: {formatBytes(stats.totalBytes)},
+      updated: {new Date(lastUpdated * 1000).toLocaleDateString()})
     </>
   );
 });
@@ -107,7 +110,7 @@ const VideoMetaDisplay: React.FC<{ video: SponsorInfo }> = observer(
           <img
             src={video.meta.maxresdefault_thumbnail}
             width={200}
-            style={{ float: "left" }}
+            style={{ float: "left", margin: "0.5em" }}
           ></img>
           <h4>{video.meta.title}</h4>
         </a>
@@ -139,6 +142,8 @@ export class UI extends React.Component {
   @observable
   stats: SqliteStats | null = null;
   @observable
+  dbConfig: { lastUpdated: number } | null = null;
+  @observable
   focussedVideo: SponsorInfo | null = null;
   @observable searchInput: string = "";
 
@@ -147,7 +152,7 @@ export class UI extends React.Component {
     this.init();
     makeObservable(this);
   }
-  interval: number = 0;
+  interval: any = 0;
   componentDidMount() {
     this.interval = setInterval(async () => {
       this.stats = (await this.worker?.getStats()) || null;
@@ -157,10 +162,11 @@ export class UI extends React.Component {
     clearInterval(this.interval);
   }
   async init() {
-    this.initState =  "connectingToDb";
+    this.initState = "connectingToDb";
     const res = await createDbWorker();
     this.db = res.db;
     this.worker = res.worker;
+    this.dbConfig = res.config;
     const initialAuthor = new URLSearchParams(location.search).get("uploader");
     if (initialAuthor) this.setAuthor(initialAuthor);
     this.initState = "";
@@ -199,7 +205,7 @@ export class UI extends React.Component {
   setFocussed = (e: SponsorInfo) => (this.focussedVideo = e);
 
   render() {
-    if(this.initState) return <div>{this.initState}</div>;
+    if (this.initState) return <div>{this.initState}</div>;
     return (
       <div>
         <div>
@@ -211,7 +217,7 @@ export class UI extends React.Component {
             loadOptions={this.authorsSearchDebounce}
             getOptionLabel={(e) => e.name}
             getOptionValue={(e) => e.name}
-            onChange={(e) => this.setAuthor(e.name)}
+            onChange={(e) => e && this.setAuthor(e.name)}
           />
         </div>
         {this.data.state === "noinput" ? (
@@ -227,9 +233,19 @@ export class UI extends React.Component {
             <SponsorPlot data={this.data.segs} onHover={this.setFocussed} />
           </div>
         )}
-        {this.focussedVideo && <VideoMetaDisplay video={this.focussedVideo} />}
+        {this.focussedVideo && <>Selected video: <VideoMetaDisplay video={this.focussedVideo} /></>}
         <footer style={{ marginTop: "5em", color: "gray" }}>
-          {this.stats ? <SqliteStats stats={this.stats} /> : ""}{" "}
+          <div>{this.stats ? (
+            <SqliteStats
+              stats={this.stats}
+              lastUpdated={this.dbConfig.lastUpdated}
+            />
+          ) : (
+            ""
+          )}{" "}
+          </div>
+          <div>Source Code: <a href="https://github.com/phiresky/youtube-sponsorship-stats/">https://github.com/phiresky/youtube-sponsorship-stats/</a></div>
+
         </footer>
       </div>
     );

src/db.ts

@@ -35,7 +35,7 @@ export async function createDbWorker() {
       `Chunk size does not match page size: pragma page_size = ${pageSize} but chunkSize = ${chunkSize}`
     );
 
-  return { worker: sqlite, db };
+  return { config, worker: sqlite, db };
 }
 
 async function testLoop(metaDb: Database) {

src/sqlite.worker.ts

@@ -34,6 +34,7 @@ async function init() {
 }
 const sqljs = init();
 export type SplitFileConfig = {
+  lastUpdated: number;
   urlPrefix: string;
   serverChunkSize: number;
   databaseLengthBytes: number;