2022-09-02 17:39:47 -04:00
8 changed files with 119 additions and 23 deletions
--- a/components/FullComponentWrapper.module.css
+++ b/components/FullComponentWrapper.module.css
@ -13,9 +13,4 @@

 .graphWrapper {
  margin-top: calc(80rem / 16);
-}
-
-
-/* .textWrapper {
-  margin: 0 calc(100rem / 16);
-} */
+}
--- a/components/SideComponentWrapper.tsx
+++ b/components/SideComponentWrapper.tsx
@ -1,4 +1,5 @@
 import React from "react";
+import { useIsMobile } from "utils/isMobile";

 import styles from "./SideComponentWrapper.module.css";

@ -15,13 +16,27 @@ export default function SideComponentWrapper({
  children,
  rightAligned = false,
 }: ComponentWrapperProps) {
+  const isMobile = useIsMobile();
+
  return (
    <div className={rightAligned ? styles.wrapperRight : styles.wrapperLeft}>
-      <div className={styles.textWrapper}>
-        <h3 className={styles.heading}>{heading}</h3>
-        <p className={styles.body}>{body}</p>
-      </div>
-      <div className={styles.graphWrapper}>{children}</div>
+      {rightAligned && !isMobile ? (
+        <>
+          <div className={styles.graphWrapper}>{children}</div>
+          <div className={styles.textWrapper}>
+            <h3 className={styles.heading}>{heading}</h3>
+            <p className={styles.body}>{body}</p>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className={styles.textWrapper}>
+            <h3 className={styles.heading}>{heading}</h3>
+            <p className={styles.body}>{body}</p>
+          </div>
+          <div className={styles.graphWrapper}>{children}</div>
+        </>
+      )}
    </div>
  );
 }
--- a/components/WordCloud.tsx
+++ b/components/WordCloud.tsx
@ -61,6 +61,7 @@ export const WordCloud = withTooltip(
      hideTooltip,
    } = useTooltip<WordData>();

+    console.log("got width", width);
    return (
      <div className={className}>
        <WordCloudWordsMemoized
@ -197,11 +198,14 @@ const shouldNotRerender = (
  nextProps: WordCloudWordsProps
 ) => {
  if (
-    prevProps.tooltipLeft !== nextProps.tooltipLeft ||
-    prevProps.tooltipTop !== nextProps.tooltipTop ||
-    nextProps.tooltipLeft === undefined ||
-    nextProps.tooltipTop === undefined
+    // if width changes, rerender, else don't rerender for a tooltip change
+    prevProps.width === nextProps.width &&
+    (prevProps.tooltipLeft !== nextProps.tooltipLeft ||
+      prevProps.tooltipTop !== nextProps.tooltipTop ||
+      nextProps.tooltipLeft === undefined ||
+      nextProps.tooltipTop === undefined)
  ) {
+    console.log("widths ", prevProps.width, nextProps.width);
    return true; // do not re-render
  }
  return false; // will re-render
--- a/package-lock.json
+++ b/package-lock.json
@ -19,7 +19,8 @@
        "@visx/wordcloud": "^2.10.0",
        "next": "12.1.6",
        "react": "18.1.0",
-        "react-dom": "18.1.0"
+        "react-dom": "18.1.0",
+        "react-responsive": "^9.0.0-beta.10"
      },
      "devDependencies": {
        "@types/node": "17.0.38",
@ -1449,6 +1450,11 @@
        "postcss": "^8.4"
      }
    },
+    "node_modules/css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
+    },
    "node_modules/css-prefers-color-scheme": {
      "version": "6.0.3",
      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
@ -2533,6 +2539,11 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
    "node_modules/ignore": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@ -2931,6 +2942,14 @@
        "node": ">=10"
      }
    },
+    "node_modules/matchmediaquery": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
+      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
+      "dependencies": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
    "node_modules/math-expression-evaluator": {
      "version": "1.3.14",
      "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.3.14.tgz",
@ -3950,6 +3969,23 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "node_modules/react-responsive": {
+      "version": "9.0.0-beta.10",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.0-beta.10.tgz",
+      "integrity": "sha512-41H8g4FYP46ln16rsHvs9/0ZoZxAPfnNiHET86/5pgS+Vw8fSKfLBuOS2SAquaxOxq7DgPviFoHmybgVvSKCNQ==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=0.10"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
    "node_modules/react-use-measure": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
@ -4117,6 +4153,11 @@
        "node": ">=10"
      }
    },
+    "node_modules/shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@ -5375,6 +5416,11 @@
        "postcss-selector-parser": "^6.0.9"
      }
    },
+    "css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
+    },
    "css-prefers-color-scheme": {
      "version": "6.0.3",
      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
@ -6206,6 +6252,11 @@
        "has-symbols": "^1.0.2"
      }
    },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
    "ignore": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@ -6499,6 +6550,14 @@
        "yallist": "^4.0.0"
      }
    },
+    "matchmediaquery": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
+      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
+      "requires": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
    "math-expression-evaluator": {
      "version": "1.3.14",
      "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.3.14.tgz",
@ -7166,6 +7225,17 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "react-responsive": {
+      "version": "9.0.0-beta.10",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.0-beta.10.tgz",
+      "integrity": "sha512-41H8g4FYP46ln16rsHvs9/0ZoZxAPfnNiHET86/5pgS+Vw8fSKfLBuOS2SAquaxOxq7DgPviFoHmybgVvSKCNQ==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.2.1"
+      }
+    },
    "react-use-measure": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
@ -7280,6 +7350,11 @@
        "lru-cache": "^6.0.0"
      }
    },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
    "shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -21,12 +21,13 @@
    "@visx/group": "^2.10.0",
    "@visx/scale": "^2.2.2",
    "@visx/shape": "^2.10.0",
+    "@visx/text": "^2.10.0",
    "@visx/tooltip": "^2.10.0",
    "@visx/wordcloud": "^2.10.0",
-    "@visx/text": "^2.10.0",
    "next": "12.1.6",
    "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react-dom": "18.1.0",
+    "react-responsive": "^9.0.0-beta.10"
  },
  "devDependencies": {
    "@types/node": "17.0.38",
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@ -61,7 +61,6 @@ export default function Home() {
          value: word.value,
        }))}
      />
-
    </div>
  );
 }
--- a/pages/samplePage.tsx
+++ b/pages/samplePage.tsx
@ -2,6 +2,7 @@ import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
 import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
 import React from "react";
 import useWindowDimensions from "utils/getWindowDimensions";
+import { useIsMobile } from "utils/isMobile";

 import FullComponentWrapper from "@/components/FullComponentWrapper";
 import SideComponentWrapper from "@/components/SideComponentWrapper";
@ -11,7 +12,8 @@ import { WordCloud } from "../components/WordCloud";
 import styles from "./samplePage.module.css";

 export default function SamplePage() {
-  const { height, width } = useWindowDimensions();
+  const { width } = useWindowDimensions();
+  const isMobile = useIsMobile();

  return (
    <div className={styles.page}>
@ -21,7 +23,8 @@ export default function SamplePage() {
      >
        <BarGraphVertical
          data={mockCategoricalData}
-          width={700}
+          // For components that are in the side wrappers, it looks better if they fill a certain amount of width, so we can make the width dynamic like this
+          width={isMobile ? width / 1.25 : width / 2}
          height={500}
          margin={{
            top: 20,
@ -41,7 +44,8 @@ export default function SamplePage() {
            text: word.key,
            value: word.value,
          }))}
-          width={1000}
+          // For components that we don't want to match the width necessarily we can provide direact values
+          width={isMobile ? 500 : 1000}
          height={500}
        />
      </FullComponentWrapper>
@ -54,7 +58,7 @@ export default function SamplePage() {
        <BarGraphHorizontal
          className={styles.barGraphDemo}
          data={mockCategoricalData}
-          width={width / 2}
+          width={isMobile ? width / 1.25 : width / 2}
          height={500}
          margin={{
            top: 20,
--- a/utils/isMobile.ts
+++ b/utils/isMobile.ts
@ -0,0 +1,3 @@
+import { useMediaQuery } from "react-responsive";
+
+export const useIsMobile = () => useMediaQuery({ query: "(max-width: 768px)" });