Made page responsive

components/FullComponentWrapper.module.css

@@ -13,9 +13,4 @@
 
 .graphWrapper {
   margin-top: calc(80rem / 16);
-}
+}
-
-
-/* .textWrapper {
-  margin: 0 calc(100rem / 16);
-} */

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}>
+      {rightAligned && !isMobile ? (
-        <h3 className={styles.heading}>{heading}</h3>
+        <>
-        <p className={styles.body}>{body}</p>
+          <div className={styles.graphWrapper}>{children}</div>
-      </div>
+          <div className={styles.textWrapper}>
-      <div className={styles.graphWrapper}>{children}</div>
+            <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>
   );
 }

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 ||
+    // if width changes, rerender, else don't rerender for a tooltip change
-    prevProps.tooltipTop !== nextProps.tooltipTop ||
+    prevProps.width === nextProps.width &&
-    nextProps.tooltipLeft === undefined ||
+    (prevProps.tooltipLeft !== nextProps.tooltipLeft ||
-    nextProps.tooltipTop === undefined
+      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

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",

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",

pages/playground.tsx

@@ -61,7 +61,6 @@ export default function Home() {
           value: word.value,
         }))}
       />
-
     </div>
   );
 }

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,

utils/isMobile.ts

@@ -0,0 +1,3 @@
+import { useMediaQuery } from "react-responsive";
+
+export const useIsMobile = () => useMediaQuery({ query: "(max-width: 768px)" });