support for filter inspection

shouya · Feb 15, 2024 · d833515 · d833515
1 parent 4aaa4ca
commit d833515
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 18 deletions.
diff --git a/inspector/src/FeedInspector.js b/inspector/src/FeedInspector.js
@@ -1,4 +1,5 @@
 import { elt, $ } from "./util.js";
+import { Filter } from "./Filter.js";
 import { basicSetup, EditorView } from "codemirror";
 import { EditorState } from "@codemirror/state";
 import { xml } from "@codemirror/lang-xml";
@@ -17,7 +18,7 @@ export class FeedInspector {
 
     await Promise.all([
       this.setup_feed_editor(),
-      this.update_endpoints(),
+      this.load_endpoints(),
       this.setup_param_event_handler(),
     ]);
   }
@@ -26,12 +27,12 @@ export class FeedInspector {
     $("#request-param")
       .querySelectorAll("input")
       .forEach((input) => {
-        input.addEventListener("change", () => this.load_preview());
+        input.addEventListener("change", () => this.load_endpoint());
       });
   }
 
   async setup_feed_editor() {
-    $("#feed-preview").style.visibility = "hidden";
+    $("#feed-preview").classList.add("hidden");
     this.editor = new EditorView({
       extensions: [
         basicSetup,
@@ -43,13 +44,15 @@ export class FeedInspector {
     });
   }
 
-  async update_endpoints() {
+  async load_endpoints() {
+    $("#nav-endpoints").classList.remove("hidden");
     $("#endpoint-list").innerHTML = "";
+
     for (const endpoint of this.config.endpoints) {
       const path_node = elt("div", { class: "endpoint-path" }, endpoint.path);
       path_node.addEventListener("click", () => {
         this.current_endpoint = endpoint;
-        this.load_preview();
+        this.load_endpoint();
       });
       const copy_url_node = elt(
         "a",
@@ -67,12 +70,13 @@ export class FeedInspector {
       ]);
       $("#endpoint-list").appendChild(node);
     }
+    $("#nav-endpoints").classList.remove("hidden");
   }
 
-  async load_preview() {
+  async load_endpoint() {
     if (!this.current_endpoint) return;
 
-    const path = this.current_endpoint.path;
+    const { path, source, filters } = this.current_endpoint;
     const params = this.feed_request_param();
     const resp = await fetch(`${path}?${params}`);
     const text = await resp.text();
@@ -81,8 +85,33 @@ export class FeedInspector {
       changes: { from: 0, to: this.editor.state.doc.length, insert: text },
     });
 
-    $("#feed-preview").style.visibility = "visible";
-    $("#request-param").style.visibility = "visible";
+    $("input#source", $("#request-param")).disabled = !!source;
+    $("#request-param").classList.remove("hidden");
+    $("#feed-preview").classList.remove("hidden");
+
+    $("#nav-endpoints").classList.add("hidden");
+    $("#nav-filters").classList.remove("hidden");
+
+    const filter_ul_node = $("#filter-list");
+    filter_ul_node.innerHTML = "";
+    for (const filter of filters) {
+      console.log(filter);
+      const [name, conf] = Object.entries(filter)[0];
+      const conf_node = new Filter(name, conf).render_config();
+
+      const node = elt("li", { class: "filter" }, [
+        elt("div", { class: "filter-header" }, name),
+        // if conf_node is empty, just skip it
+        conf_node && elt("div", { class: "filter-config" }, conf_node),
+      ]);
+
+      filter_ul_node.appendChild(node);
+    }
+
+    $("#back-to-endpoints").addEventListener("click", () => {
+      this.current_endpoint = null;
+      this.load_endpoints();
+    });
   }
 
   feed_request_param() {

diff --git a/inspector/src/Filter.js b/inspector/src/Filter.js
@@ -0,0 +1,29 @@
+import { elt } from "./util.js";
+
+export class Filter {
+  constructor(name, config) {
+    this.name = name;
+    this.config = config;
+  }
+
+  render_config() {
+    const method = `render_${this.name}_config`;
+    if (this[method]) {
+      return this[method]();
+    } else {
+      return this.render_default_config();
+    }
+  }
+
+  render_default_config() {
+    return elt("pre", {}, JSON.stringify(this.config, null, 2));
+  }
+
+  render_js_config() {
+    return elt(
+      "pre",
+      {},
+      elt("code", { class: "language-javascript" }, this.config),
+    );
+  }
+}
diff --git a/inspector/src/index.html b/inspector/src/index.html
@@ -8,11 +8,22 @@
   <body>
     <div class="container">
       <div id="navigation-panel">
-        <h4>Endpoints</h4>
-        <ul id="endpoint-list"></ul>
+        <div id="nav-endpoints">
+          <div class="nav-header">
+            <h4>Endpoints</h4>
+          </div>
+          <ul id="endpoint-list" class="nav-body"></ul>
+        </div>
+        <div id="nav-filters" class="hidden">
+          <div class="nav-header">
+            <h4>Filters</h4>
+            <a id="back-to-endpoints">(Back)</a>
+          </div>
+          <ul id="filter-list" class="nav-body"></ul>
+        </div>
       </div>
       <div id="main">
-        <div id="request-param" style="visibility: hidden">
+        <div id="request-param" class="hidden">
           <label for="source"
             >Source
             <input

diff --git a/inspector/src/style.css b/inspector/src/style.css
@@ -6,6 +6,10 @@ body {
   margin: 0;
 }
 
+.hidden {
+  display: none !important;
+}
+
 .container {
   display: flex;
   overflow: hidden;
@@ -19,25 +23,81 @@ body {
 }
 
 #navigation-panel {
-  width: 20rem;
+  --nav-panel-width: 20rem;
+  width: var(--nav-panel-width);
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .nav-header {
+  }
+
+  .nav-body {
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding: 0.3rem;
+  }
 
   h4 {
     margin: 0.5rem 0;
     padding-bottom: 0.5rem;
   }
 }
 
-#main {
-  flex: 1;
+#nav-filters {
+  .nav-header {
+    display: flex;
+    align-items: baseline;
+
+    h4 {
+      display: inline-block;
+      margin-right: auto;
+    }
+
+    #back-to-endpoints {
+      margin-bottom: 1rem;
+      cursor: pointer;
+    }
+  }
+}
+
+ul#filter-list {
+  list-style: none;
+  padding-left: 0;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  margin-left: 1rem;
+  gap: 0.3rem;
+  overflow: scroll;
+
+  .filter {
+    background-color: #f4f4f4;
+    padding: 0.5rem 0.9rem;
+    border: 1px dotted #ddd;
+    border-radius: 1rem;
+    max-width: var(--nav-panel-width);
+
+    .filter-header {
+      font-size: 1.2em;
+      font-family: monospace;
+      color: #3498db;
+      margin: 0;
+      text-shadow: 1px 0px 1px #ddd;
+    }
+
+    .filter-config {
+      overflow-x: auto;
+    }
+  }
 }
 
 #endpoint-list {
-  padding-left: 0;
   list-style: none;
+  padding-left: 0;
   display: flex;
   flex-direction: column;
   place-content: flex-start;
@@ -79,6 +139,14 @@ body {
   }
 }
 
+#main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin-left: 1rem;
+}
+
 #request-param {
   display: flex;
   flex-direction: row;