npm - create-slide-deck - Versions diffs - 0.1.0 - Mend

create-slide-deck 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (105) hide show

package/template-full/src/reveal/decks/fse26-rca/index.html ADDED Viewed

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>FSE26 RCA Paper Talk</title>
+</head>
+<body>
+  <svg class="global-svg-defs" width="0" height="0" aria-hidden="true" focusable="false">
+    <defs>
+      <marker id="arrow-gray" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8.5" markerHeight="8.5" orient="auto-start-reverse">
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#BFBFBF"></path>
+      </marker>
+      <marker id="arrow-red" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8.5" markerHeight="8.5" orient="auto-start-reverse">
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#C00000"></path>
+      </marker>
+      <marker id="arrow-green" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8.5" markerHeight="8.5" orient="auto-start-reverse">
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#76B82A"></path>
+      </marker>
+      <marker id="arrow-blue" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8.5" markerHeight="8.5" orient="auto-start-reverse">
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#00A6D6"></path>
+      </marker>
+    </defs>
+  </svg>
+  <div class="reveal">
+    <div class="slides"></div>
+  </div>
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>

package/template-full/src/reveal/decks/fse26-rca/main.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { components } from "./components/registry.ts";
+import { buildFse26NativeSlides } from "./slides.ts";
+import { initDeck } from "../../core/deck-init.ts";
+initDeck({
+  buildSlides: buildFse26NativeSlides,
+  components,
+});

package/template-full/src/reveal/decks/fse26-rca/slides.ts ADDED Viewed

@@ -0,0 +1,175 @@
+import { blockSlide, reactSlide } from "../../core/layout.ts";
+import type { ComponentName } from "./components/registry.ts";
+import type { Slide } from "../../core/types.ts";
+function slide01(): Slide {
+  return blockSlide({
+    html: `
+      <img class="cover-photo" src="images/cover.png" alt="CUHK-Shenzhen">
+      <div class="cover-title">Rethinking the Evaluation of Microservice RCA<br>with a Fault Propagation-Aware Benchmark</div>
+      <div class="authors"><strong>Aoyang Fang</strong>, Songhan Zhang, Yifan Yang, Haotong Wu, Junjielong Xu<br>Xuyang Wang, Rui Wang, Manyi Wang, Qisheng Lu, Pinjia He</div>
+      <div class="affiliation">The Chinese University of Hong Kong, Shenzhen</div>
+      <div class="affiliation-sub">School of Data Science | School of Artificial Intelligence</div>
+    `,
+    notes: "Static cover with title, authors, first author highlight, and institution.",
+  });
+}
+function slideWhyRcaMatters(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Cloud incidents cost billions",
+    component: "CloudIncidents",
+    steps: 1,
+    notes: "Three real-world outage headlines with captions; a frosted banner summarises the RCA connection.",
+  });
+}
+function slide03(): Slide {
+  return reactSlide<ComponentName>({
+    title: "AWS 2025: A DNS race cascaded through 6 layers",
+    component: "AwsCascade",
+    steps: 7,
+    x: 20, y: 62, w: 1240, h: 650,
+    notes: "Progressive cascade: each click reveals the next layer of the AWS incident propagation.",
+  });
+}
+function slide02(): Slide {
+  return reactSlide<ComponentName>({
+    title: "How RCA works in papers",
+    component: "RcaPipeline",
+    steps: 6,
+    x: 20, y: 62, w: 1240, h: 650,
+    notes: "Progressive reveal: failure → metrics → logs → traces → RCA model → Top-K ranking.",
+  });
+}
+function slide04(): Slide {
+  return reactSlide<ComponentName>({
+    title: "What makes real incidents hard?",
+    component: "IncidentHard",
+    steps: 4,
+    notes: "Real incidents have two key properties: fault propagation (cascade across layers) and diagnostic difficulty (root cause is not the loudest signal). Do existing benchmarks capture this? To test, we designed SimpleRCA — a deliberately simple probe.",
+  });
+}
+function slide05(): Slide {
+  return reactSlide<ComponentName>({
+    title: "SimpleRCA: a deliberately simple probe",
+    component: "SimpleRca",
+    steps: 5,
+    x: 20, y: 62, w: 1240, h: 650,
+    notes: "SimpleRCA walks each telemetry type with a simple rule: threshold for metrics, latency for traces, keyword match for logs. Alerts are counted per service, then ranked. If this trivial approach matches SOTA, the benchmark is shortcut-friendly.",
+  });
+}
+function slide06(): Slide {
+  return reactSlide<ComponentName>({
+    title: "The shortcut performs too well",
+    component: "SrcaResults",
+    steps: 3,
+    x: 50, y: 80, w: 1180, h: 620,
+    notes: "Step 1: highlight 7 datasets where SimpleRCA wins. Step 2: highlight 4 where it loses — gap ≤ 0.18, Eadro has data leakage. Step 3: 7/11 summary + punchline.",
+  });
+}
+function slide07(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Why does the shortcut work?",
+    component: "BenchDeficiency",
+    steps: 4,
+    x: 30, y: 70, w: 1220, h: 640,
+    notes: "We studied 737 cases across 11 benchmarks. Type I (68%): only injected service is loud — trivially easy. Type II (18%): no signal anywhere — impossible. Type III (14%): downstream louder — needs real reasoning. 86% are shortcut-friendly. 99% lack complete observability.",
+  });
+}
+function slide09(): Slide {
+  return reactSlide<ComponentName>({
+    title: "What does a realistic benchmark need?",
+    component: "BenchNeeds",
+    steps: 3,
+    notes: "A better benchmark preserves three things: known fault source, propagation path, and validated user impact.",
+  });
+}
+function slide10(): Slide {
+  return reactSlide<ComponentName>({
+    title: "The benchmark generator is a closed loop",
+    component: "BenchLoop",
+    steps: 10,
+    notes: "10 steps: TrainTicket, then Dynamic Load builds tree click-by-click, then Fault controller, Telemetry, SLI validator.",
+  });
+}
+function slide13(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Ground truth is hierarchical",
+    component: "HierarchyTree",
+    steps: 5,
+    x: 20, y: 80, w: 1240, h: 620,
+    notes: "Hierarchical ground truth: Service (ts-order-service) → Pod → Container → Metric/Span/Function. Main results use service-level for fair cross-method comparison.",
+  });
+}
+function slide15(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Our benchmark vs. existing datasets",
+    component: "BenchCompare",
+    steps: 5,
+    notes: "Side-by-side comparison across 8 dimensions: cases, services, coverage, depth, QPS, logs, traces, fault types. Ours dominates on most dimensions.",
+  });
+}
+function slide16(): Slide {
+  return reactSlide<ComponentName>({
+    title: "SOTA accuracy collapses on the new benchmark",
+    component: "SotaCollapse",
+    steps: 4,
+    notes: "12 algorithms on our benchmark: best Top@1 = 0.37 (MicroRCA), SimpleRCA = 0.28. CausalRCA takes 927s. The shortcut no longer dominates.",
+  });
+}
+function slide17(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Model behavior changes across realistic fault types",
+    component: "FaultHeatmap",
+    steps: 7,
+    notes: "All 25 fault types × 12 algorithms. Step 0 Lifecycle, Step 1 Resource, Step 2 HTTP, Step 3 JVM, Step 4 Network, Step 5 Blind spots, Step 6 summary.",
+  });
+}
+function slide18(): Slide {
+  return reactSlide<ComponentName>({
+    title: "The failures cluster into three bottlenecks",
+    component: "FailureModes",
+    steps: 4,
+    notes: "262 hardest cases. Step 0 Scalability (39.8%): CausalRCA 927s, Nezha 94.6s per case. Step 1 Observability blind spots (signal-loss 5.8%, infrastructure 4.2%, semantic-gap 2.9%). Step 2 Modeling (47.4%): wrong propagation assumptions. Step 3: three orthogonal bottlenecks.",
+  });
+}
+function slideClosing(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Takeaways",
+    component: "ClosingTakeaway",
+    steps: 4,
+    notes: "Three takeaways: (1) Benchmark quality determines research direction — same algorithms rank differently. (2) Three orthogonal bottlenecks: modeling 47%, scalability 40%, observability 13%. (3) Open benchmark with 1,430 cases, 25 fault types, 12 algorithms. Final message: do not optimize for an easy benchmark.",
+  });
+}
+export async function buildFse26NativeSlides(): Promise<Slide[]> {
+  const builders = [
+    slide01, slideWhyRcaMatters, slide03, slide02, slide04, slide05,
+    slide06, slide07, slide09, slide10,
+    slide13, slide15,
+    slide16, slide17, slide18, slideClosing,
+  ];
+  const slides = builders.map((builder) => builder());
+  slides.forEach((slide, i) => {
+    const pageDiv = `<div class="page-no">${String(i + 1).padStart(2, "0")}</div>`;
+    if (!slide.html.includes('class="page-no"')) {
+      slide.html += "\n" + pageDiv;
+    }
+    slide.html += '\n<div class="inst-mark">CUHK-Shenzhen</div>';
+  });
+  return slides;
+}

package/template-full/src/reveal/env.d.ts ADDED Viewed

@@ -0,0 +1,38 @@
+/// <reference types="vite/client" />
+declare module "reveal.js" {
+  export default class Reveal {
+    constructor(config: Record<string, any>);
+    initialize(): Promise<void>;
+    on(event: string, callback: (e: any) => void): void;
+    off(event: string, callback: (e: any) => void): void;
+    getCurrentSlide(): HTMLElement | null;
+    getState(): { indexh: number; indexf: number };
+  }
+}
+declare module "reveal.js/plugin/notes" {
+  const RevealNotes: any;
+  export default RevealNotes;
+}
+declare module "*.css" {}
+declare module "roughjs" {
+  export function svg(el: SVGSVGElement): any;
+}
+declare module "roughjs/bundled/rough.esm.js" {
+  const rough: {
+    svg(el: SVGSVGElement): any;
+  };
+  export default rough;
+}
+declare module "prismjs" {
+  const Prism: {
+    highlight(code: string, grammar: any, language: string): string;
+    languages: Record<string, any>;
+  };
+  export default Prism;
+}