From 24127d21c75c4eada49c402ea92e113190efd25a Mon Sep 17 00:00:00 2001
From: Liang Gong <lgong@meta.com>
Date: Thu, 14 Mar 2024 16:27:01 -0700
Subject: [PATCH] fix(doc): a few patches to the doc site

Summary:
A few changes:
 * Add more documentation for the `memlab measure` command.
 * Website accommodates the mobile UI size

Also related to #116

Reviewed By: twobassdrum

Differential Revision: D54870111

fbshipit-source-id: 3ff62d6b0f999ce0519e8e2e037a10d10bc56a87
---
 .../cli/src/commands/RunMeasureCommand.ts     | 12 +++++
 website/docs/cli/CLI-commands.md              |  2 +
 website/src/lib/useWindowSize.js              | 45 +++++++++++++++++++
 website/src/pages/index.tsx                   | 15 +++++--
 4 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 website/src/lib/useWindowSize.js

diff --git a/packages/cli/src/commands/RunMeasureCommand.ts b/packages/cli/src/commands/RunMeasureCommand.ts
index b29a7faed..6035b12ad 100644
--- a/packages/cli/src/commands/RunMeasureCommand.ts
+++ b/packages/cli/src/commands/RunMeasureCommand.ts
@@ -84,6 +84,18 @@ export default class RunMeasureCommand extends BaseCommand {
     ];
   }
 
+  getDocumenation(): string {
+    return (
+      'In some web apps, the heap size can show considerable variability' +
+      ' across various runs. This fluctuation can often make it hard to' +
+      ' understand the impact of memory leaks. The introduction of the measure' +
+      ' mode aims to address this challenge by executing the same scenario' +
+      ' repetitively, therefore getting multiple data points of JavaScript heap' +
+      ' sizes. This can help understand if the heap size movements during' +
+      ' specific runs come from memory-related issues or just noise.'
+    );
+  }
+
   async run(options: CLIOptions): Promise<void> {
     const numRuns = NumberOfRunsOption.getParsedOption(
       options.configFromOptions,
diff --git a/website/docs/cli/CLI-commands.md b/website/docs/cli/CLI-commands.md
index 8e500779c..99801b531 100644
--- a/website/docs/cli/CLI-commands.md
+++ b/website/docs/cli/CLI-commands.md
@@ -501,6 +501,8 @@ memlab reset
 
 Run test scenario in measure mode
 
+In some web apps, the heap size can show considerable variability across various runs. This fluctuation can often make it hard to understand the impact of memory leaks. The introduction of the measure mode aims to address this challenge by executing the same scenario repetitively, therefore getting multiple data points of JavaScript heap sizes. This can help understand if the heap size movements during specific runs come from memory-related issues or just noise.
+
 ```bash
 memlab measure --scenario <TEST_SCENARIO_FILE>
 ```
diff --git a/website/src/lib/useWindowSize.js b/website/src/lib/useWindowSize.js
new file mode 100644
index 000000000..d5593d2da
--- /dev/null
+++ b/website/src/lib/useWindowSize.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @oncall web_perf_infra
+ */
+
+import {useEffect, useState} from 'react';
+
+// deal with SSR
+const _window =
+  typeof window !== 'undefined'
+    ? window
+    : {
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        innerWidth: 0,
+        innerHeight: 0,
+      };
+
+function getWindowSize() {
+  const {innerWidth: width, innerHeight: height} = _window;
+  return {
+    width,
+    height,
+  };
+}
+
+export default function useWindowSize() {
+  const [windowSize, setWindowSize] = useState(getWindowSize());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize(getWindowSize());
+    }
+
+    _window.addEventListener('resize', handleResize);
+    return () => _window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowSize;
+}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 1697209f1..c7c3221b2 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -21,6 +21,7 @@ import TerminalReplay from '../components/TerminalReplay';
 import Showcase from '../components/Showcase';
 import * as Three from 'three';
 import NET from 'vanta/dist/vanta.net.min';
+import useWindowSize from '../lib/useWindowSize';
 
 import nomralizeTypeSpeed from '../lib/TypeSpeedNormalization';
 import homePageStdouts from '../data/HomePageMainTerminal';
@@ -128,12 +129,15 @@ function Feature({imageUrl, title, description, docUrl}) {
 }
 
 const stdouts = nomralizeTypeSpeed(homePageStdouts);
+const MIN_POINTS = 6;
+const MAX_POINTS = 16;
 
 export default function Home(): React.ReactElement {
   const {siteConfig} = useDocusaurusContext();
   const headerContainerID = 'css-animated-bg-container';
   const [vantaEffect, setVantaEffect] = useState(null);
   const headerRef = useRef(null);
+  const {width} = useWindowSize();
 
   useEffect(() => {
     if (!vantaEffect) {
@@ -147,17 +151,22 @@ export default function Home(): React.ReactElement {
           minHeight: 200.0,
           minWidth: 200.0,
           scale: 0.9,
-          scaleMobile: 0.8,
+          scaleMobile: 0.4,
           color: 0x63822b,
           backgroundColor: 0xf0db4f,
-          points: 12.0,
+          points: Math.min(
+            Math.max(Math.floor((12.0 * width) / 1800), MIN_POINTS),
+            MAX_POINTS,
+          ),
           maxDistance: 30.0,
           spacing: 22.0,
         }),
       );
     }
     return () => {
-      if (vantaEffect) vantaEffect.destroy();
+      if (vantaEffect != null) {
+        vantaEffect.destroy();
+      }
     };
   }, [vantaEffect]);