refactor: 🐛 Much better debugging with LogLevel (thanks to AidenLx :D)

SkepticMystic · Nov 25, 2021 · 98d1e0e · 98d1e0e
1 parent 1be789e
commit 98d1e0e
Show file tree

Hide file tree

Showing 10 changed files with 1,498 additions and 1,186 deletions.
diff --git a/main.js b/main.js
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   "author": "SkepticMystic",
   "license": "MIT",
   "devDependencies": {
+    "@aidenlx/folder-note-core": "^1.3.1",
     "@rollup/plugin-commonjs": "^18.1.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-typescript": "^8.2.1",
@@ -54,6 +55,7 @@
     "graphology-types": "^0.23.0",
     "hierarchy-js": "^1.0.4",
     "juggl-api": "git+https://github.com/HEmile/juggl-api.git",
+    "loglevel": "^1.8.0",
     "nodejs": "^0.0.0",
     "obsidian-community-lib": "^1.2.0",
     "svelte": "3.35.0",

diff --git a/src/BreadcrumbsSettingTab.ts b/src/BreadcrumbsSettingTab.ts
@@ -1,3 +1,4 @@
+import log from "loglevel";
 import {
   App,
   DropdownComponent,
@@ -16,10 +17,10 @@ import {
   RELATIONS,
   VISTYPES,
 } from "./constants";
-import type { Relations, visTypes } from "./interfaces";
+import type { DebugLevel, Relations, visTypes } from "./interfaces";
 import type BCPlugin from "./main";
 import MatrixView from "./MatrixView";
-import { debug, getFields, splitAndTrim } from "./sharedFunctions";
+import { getFields, splitAndTrim } from "./sharedFunctions";
 
 export class BCSettingTab extends PluginSettingTab {
   plugin: BCPlugin;
@@ -94,9 +95,6 @@ export class BCSettingTab extends PluginSettingTab {
             await plugin.saveSettings();
           } else {
             const upFields = getFields(settings.userHiers, "up");
-
-            debug(settings, { downFields: upFields, finalValue });
-
             if (upFields.includes(finalValue)) {
               settings.HNUpField = finalValue;
               await plugin.saveSettings();
@@ -799,24 +797,16 @@ export class BCSettingTab extends PluginSettingTab {
     new Setting(debugDetails)
       .setName("Debug Mode")
       .setDesc(
-        "Toggling this on will enable a few console logs to appear when use the matrix/list view, or the trail."
+        "Set the minimum level of debug messages to console log. If you choose `TRACE`, then everything will be logged. If you choose `ERROR`, then only the most necessary issues will be logged. `SILENT` will turn off all logs."
       )
-      .addToggle((toggle) =>
-        toggle.setValue(settings.debugMode).onChange(async (value) => {
+      .addDropdown((dd) => {
+        Object.keys(log.levels).forEach((key) => dd.addOption(key, key));
+        dd.setValue(settings.debugMode).onChange(async (value: DebugLevel) => {
+          log.setLevel(value);
           settings.debugMode = value;
           await plugin.saveSettings();
-        })
-      );
-
-    new Setting(debugDetails)
-      .setName("Super Debug Mode")
-      .setDesc("Toggling this on will enable ALOT of console logs")
-      .addToggle((toggle) =>
-        toggle.setValue(settings.superDebugMode).onChange(async (value) => {
-          settings.superDebugMode = value;
-          await plugin.saveSettings();
-        })
-      );
+        });
+      });
 
     debugDetails.createEl(
       "button",

diff --git a/src/Components/Stats.svelte b/src/Components/Stats.svelte
@@ -1,17 +1,21 @@
 <script lang="ts">
   import { sum } from "lodash";
+  import { debug } from "loglevel";
   import { copy } from "obsidian-community-lib";
+  import { Debugger } from "src/Debugger";
   import { ARROW_DIRECTIONS, DIRECTIONS, STATS_VIEW } from "../constants";
+  import { closeImpliedLinks, getOppDir, getSubForFields } from "../graphUtils";
   import type { Directions, HierData } from "../interfaces";
   import type BCPlugin from "../main";
-  import { debug, hierToStr, makeWiki } from "../sharedFunctions";
-  import { closeImpliedLinks, getOppDir, getSubForFields } from "../graphUtils";
+  import { hierToStr, makeWiki } from "../sharedFunctions";
 
   export let plugin: BCPlugin;
 
   const { settings, mainG } = plugin;
   const { userHiers } = settings;
+  const db = new Debugger(plugin);
 
+  db.start2G("StatsView");
   function fillInInfo(
     dir: Directions,
     gType: string,
@@ -87,7 +91,7 @@
     return hierData;
   });
 
-  debug(settings, { data });
+  debug({ data });
 
   const cellStr = (
     i: number,
@@ -96,6 +100,7 @@
   ) => DIRECTIONS.map((dir) => data[i][dir][type][info]).join("\n");
 
   let hierStrs: string[] = userHiers.map(hierToStr);
+  db.end2G();
 </script>
 
 <table>

diff --git a/src/Debugger.ts b/src/Debugger.ts
@@ -0,0 +1,49 @@
+import { debug, info, levels } from "loglevel";
+import type BCPlugin from "src/main";
+
+export class Debugger {
+  plugin: BCPlugin;
+  constructor(plugin: BCPlugin) {
+    this.plugin = plugin;
+  }
+
+  debugLessThan = (level: number) =>
+    levels[this.plugin.settings.debugMode] < level;
+
+  start2G(group: string) {
+    if (this.debugLessThan(3)) console.groupCollapsed(group);
+  }
+  end2G(...msgs: any[]) {
+    if (this.debugLessThan(3)) {
+      if (msgs.length) info(...msgs);
+      console.groupEnd();
+    }
+  }
+  start1G(group: string) {
+    if (this.debugLessThan(2)) console.groupCollapsed(group);
+  }
+  end1G(...msgs: any[]) {
+    if (this.debugLessThan(2)) {
+      if (msgs.length) debug(...msgs);
+      console.groupEnd();
+    }
+  }
+
+  startGs(...groups: string[]) {
+    this.start2G(groups[0]);
+    if (groups[1]) this.start1G(groups[1]);
+  }
+
+  /**
+   * End a debug and info group, logging `msgs` in `endDebugGroup`
+   * @param  {1|2} count The number of groups to end. `1` ends Trace, 2 ends both
+   * @param  {any[]} ...msgs
+   */
+  endGs(count: 1 | 2, ...msgs: any[]) {
+    if (count === 1) this.end2G(...msgs);
+    else {
+      this.end1G();
+      this.end2G(...msgs);
+    }
+  }
+}
diff --git a/src/MatrixView.ts b/src/MatrixView.ts
@@ -1,40 +1,39 @@
+import { debug, error } from "loglevel";
 import { ItemView, Notice, TFile, WorkspaceLeaf } from "obsidian";
+import { Debugger } from "src/Debugger";
+import Lists from "./Components/Lists.svelte";
+import Matrix from "./Components/Matrix.svelte";
 import {
   ARROW_DIRECTIONS,
   blankRealNImplied,
   MATRIX_VIEW,
   TRAIL_ICON,
 } from "./constants";
+import {
+  getInNeighbours,
+  getOppDir,
+  getReflexiveClosure,
+  getSubInDirs,
+} from "./graphUtils";
 import type {
   BCSettings,
   Directions,
   internalLinkObj,
   UserHier,
 } from "./interfaces";
 import type BCPlugin from "./main";
-import {
-  debugGroupEnd,
-  debugGroupStart,
-  getRealnImplied,
-  linkClass,
-} from "./sharedFunctions";
-import Lists from "./Components/Lists.svelte";
-import Matrix from "./Components/Matrix.svelte";
-import {
-  getSubInDirs,
-  getReflexiveClosure,
-  getInNeighbours,
-  getOppDir,
-} from "./graphUtils";
+import { getRealnImplied, linkClass } from "./sharedFunctions";
 
 export default class MatrixView extends ItemView {
   private plugin: BCPlugin;
   private view: Matrix | Lists;
   matrixQ: boolean;
+  db: Debugger;
 
   constructor(leaf: WorkspaceLeaf, plugin: BCPlugin) {
     super(leaf);
     this.plugin = plugin;
+    this.db = new Debugger(plugin);
   }
 
   async onload(): Promise<void> {
@@ -221,6 +220,19 @@ export default class MatrixView extends ItemView {
           .sort((a, b) => a.order - b.order)
       );
 
+      debug(
+        { ru },
+        { rs },
+        { rd },
+        { rn },
+        { rp },
+        { iu },
+        { iSameArr },
+        { id },
+        { iN },
+        { ip }
+      );
+
       return [
         {
           realItems: ru,
@@ -254,67 +266,71 @@ export default class MatrixView extends ItemView {
   }
 
   async draw(): Promise<void> {
-    const { contentEl } = this;
-    contentEl.empty();
-    const { settings } = this.plugin;
-
-    debugGroupStart(settings, "debugMode", "Draw Matrix/List View");
-
-    const { userHiers } = settings;
-    const currFile = this.app.workspace.getActiveFile();
-
-    contentEl.createEl(
-      "button",
-      {
-        text: this.matrixQ ? "List" : "Matrix",
-      },
-      (el) => {
-        el.onclick = async () => {
-          this.matrixQ = !this.matrixQ;
-          el.innerText = this.matrixQ ? "List" : "Matrix";
-          await this.draw();
-        };
-      }
-    );
+    try {
+      const { contentEl, db } = this;
+      db.start2G("Draw Matrix/List View");
+      contentEl.empty();
+      const { settings } = this.plugin;
 
-    contentEl.createEl("button", { text: "↻" }, (el) => {
-      el.onclick = async () => await this.plugin.refreshIndex();
-    });
+      const { userHiers } = settings;
+      const currFile = this.app.workspace.getActiveFile();
 
-    // const data = currGraphs.hierGs.map((hierG) => {
-    //   const hierData: { [dir in Directions]: Graph } = blankDirUndef();
-    //   for (const dir of DIRECTIONS) {
-    //     // This is merging all graphs in Dir **In a particular hierarchy**, not accross all hierarchies like mergeGs(getAllGsInDir()) does
-    //     hierData[dir] = mergeGs(...Object.values(hierG[dir]));
-    //   }
-    //   return hierData;
-    // });
-
-    const hierSquares = this.getHierSquares(
-      userHiers,
-      currFile,
-      settings
-    ).filter((squareArr) =>
-      squareArr.some(
-        (square) => square.realItems.length + square.impliedItems.length > 0
-      )
-    );
-
-    const compInput = {
-      target: contentEl,
-      props: {
-        filteredSquaresArr: hierSquares,
+      contentEl.createEl(
+        "button",
+        {
+          text: this.matrixQ ? "List" : "Matrix",
+        },
+        (el) => {
+          el.onclick = async () => {
+            this.matrixQ = !this.matrixQ;
+            el.innerText = this.matrixQ ? "List" : "Matrix";
+            await this.draw();
+          };
+        }
+      );
+
+      contentEl.createEl("button", { text: "↻" }, (el) => {
+        el.onclick = async () => await this.plugin.refreshIndex();
+      });
+
+      // const data = currGraphs.hierGs.map((hierG) => {
+      //   const hierData: { [dir in Directions]: Graph } = blankDirUndef();
+      //   for (const dir of DIRECTIONS) {
+      //     // This is merging all graphs in Dir **In a particular hierarchy**, not accross all hierarchies like mergeGs(getAllGsInDir()) does
+      //     hierData[dir] = mergeGs(...Object.values(hierG[dir]));
+      //   }
+      //   return hierData;
+      // });
+
+      const hierSquares = this.getHierSquares(
+        userHiers,
         currFile,
-        settings,
-        matrixView: this,
-        app: this.app,
-      },
-    };
+        settings
+      ).filter((squareArr) =>
+        squareArr.some(
+          (square) => square.realItems.length + square.impliedItems.length > 0
+        )
+      );
+
+      const compInput = {
+        target: contentEl,
+        props: {
+          filteredSquaresArr: hierSquares,
+          currFile,
+          settings,
+          matrixView: this,
+          app: this.app,
+        },
+      };
 
-    this.matrixQ
-      ? (this.view = new Matrix(compInput))
-      : (this.view = new Lists(compInput));
+      this.matrixQ
+        ? (this.view = new Matrix(compInput))
+        : (this.view = new Lists(compInput));
 
-    debugGroupEnd(settings, "debugMode");
+      db.end2G();
+    } catch (err) {
+      error(err);
+      this.db.end2G();
+    }
   }
 }
diff --git a/src/constants.ts b/src/constants.ts
@@ -122,7 +122,7 @@ export const DEFAULT_SETTINGS: BCSettings = {
   alphaSortAsc: true,
   altLinkFields: [],
   CSVPaths: "",
-  debugMode: false,
+  debugMode: "WARN",
   defaultView: true,
   dvWaitTime: 5000,
   dotsColour: "#000000",
@@ -135,7 +135,6 @@ export const DEFAULT_SETTINGS: BCSettings = {
   refreshOnNoteChange: false,
   useAllMetadata: true,
   parseJugglLinksWithoutJuggl: false,
-  // refreshIntervalTime: 0,
   orderField: "order",
   showNameOrType: true,
   showRelationType: true,
@@ -172,5 +171,4 @@ export const DEFAULT_SETTINGS: BCSettings = {
   visClosed: "Real",
   visAll: "All",
   wikilinkIndex: true,
-  superDebugMode: false,
 };