Revert "Puzzle hunt, don't read 🙏 "

src/components/FooterMenu.tsx

@@ -22,7 +22,7 @@ export const FooterMenu = ({ setAccessToken }: FooterMenuProps) => {
           id: "learn",
           title: "Learn about this addon",
           icon: "question",
-          href: "https://gist.github.com/tmeasday/d8200d5b3f18c9f62bb42d61a53d2941",
+          href: "https://www.chromatic.com/docs/visual-testing-addon",
         },
       ]}
     >

src/screens/VisualTests/BuildResults.tsx

@@ -1,6 +1,6 @@
 import { Icons, Link, TooltipNote, WithTooltip } from "@storybook/components";
 import { styled } from "@storybook/theming";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 
 import { BuildProgressInline } from "../../components/BuildProgressBarInline";
 import { Button } from "../../components/Button";
@@ -12,7 +12,6 @@ import { Text as CenterText } from "../../components/Text";
 import { getFragment } from "../../gql";
 import {
   BuildStatus,
-  ComparisonResult,
   LastBuildOnBranchBuildFieldsFragment,
   ReviewTestBatch,
   SelectedBuildFieldsFragment,
@@ -66,7 +65,6 @@ export const BuildResults = ({
   setAccessToken,
 }: BuildResultsProps) => {
   const [settingsVisible, setSettingsVisible] = useState(false);
-  const [pixelDiff, setPixelDiff] = useState<number>();
   const [warningsVisible, setWarningsVisible] = useState(false);
   const [baselineImageVisible, setBaselineImageVisible] = useState(false);
   const toggleBaselineImage = () => setBaselineImageVisible(!baselineImageVisible);
@@ -83,35 +81,6 @@ export const BuildResults = ({
     ),
   ];
 
-  const firstDiffImage = storyTests?.flatMap((test) =>
-    test.comparisons.find((c) => c.result === ComparisonResult.Changed)
-  )?.[0]?.captureDiff?.diffImage?.imageUrl;
-  useEffect(() => {
-    if (firstDiffImage) {
-      const img = new Image();
-      img.src = firstDiffImage;
-      img.crossOrigin = "Anonymous";
-      img.onload = () => {
-        const canvas = document.createElement("canvas");
-
-        canvas.width = img.width;
-        canvas.height = img.height;
-        canvas.getContext("2d")?.drawImage(img, 0, 0, img.width, img.height);
-
-        let nPixels = 0;
-        for (let i = 0; i <= img.width; i += 1) {
-          for (let j = 0; j <= img.height; j += 1) {
-            const { data } = canvas.getContext("2d")?.getImageData(i, j, 1, 1) || {};
-            if (data && (data[0] || data[1] || data[2] || data[3])) {
-              nPixels += 1;
-            }
-          }
-        }
-        setPixelDiff(nPixels);
-      };
-    }
-  }, [setPixelDiff, firstDiffImage]);
-
   const isReviewable = lastBuildOnBranch?.id === selectedBuild?.id;
   const isStorySuperseded = !isReviewable && lastBuildOnBranchCompletedStory;
   // Do we want to encourage them to switch to the next build?
@@ -273,7 +242,7 @@ export const BuildResults = ({
       </Section>
 
       <Section grow hidden={!settingsVisible}>
-        <RenderSettings pixelDiff={pixelDiff} onClose={() => setSettingsVisible(false)} />
+        <RenderSettings onClose={() => setSettingsVisible(false)} />
       </Section>
       <Section grow hidden={!warningsVisible}>
         <Warnings onClose={() => setWarningsVisible(false)} />

src/screens/VisualTests/BuildResultsFooter.tsx

@@ -53,7 +53,7 @@ export const BuildResultsFooter = ({
           </Text>
         )}
       </Col>
-      <Col push>
+      {/* <Col push>
         <WithTooltip
           tooltip={<TooltipNote note="Render settings" />}
           trigger="hover"
@@ -70,7 +70,7 @@ export const BuildResultsFooter = ({
             <Icons icon="controls" />
           </IconButton>
         </WithTooltip>
-      </Col>
+      </Col> */}
       {/* <Col>
         <WithTooltip
           tooltip={<TooltipNote note="View warnings" />}

src/screens/VisualTests/RenderSettings.stories.tsx

@@ -42,7 +42,6 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     // build: passedBuild,
-    pixelDiff: 100,
   },
   parameters: withFigmaDesign(
     "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=508-525764&t=18c1zI1SMe76dWYk-4"

src/screens/VisualTests/RenderSettings.tsx

@@ -11,53 +11,38 @@ import {
 } from "../../components/Accordions";
 
 interface RenderSettingsProps {
-  pixelDiff: number | undefined;
   onClose: () => void;
 }
 
-function isMultipleOfFour(number: number) {
-  return Math.floor(number / 4) === number / 4;
-}
-
-export const RenderSettings = ({ pixelDiff, onClose }: RenderSettingsProps) => {
+export const RenderSettings = ({ onClose }: RenderSettingsProps) => {
   return (
     <Accordions>
       <Accordion>
         <Heading>
-          Render details
+          Render settings
           <InfoIcon icon="info" />
           <CloseButton onClick={onClose}>
             <CloseIcon icon="close" aria-label="Close" />
           </CloseButton>
         </Heading>
-        {/* <p>
+        <p>
           <ItemIcon icon="timer" />
           Delay: 300ms
         </p>
         <p>
           <ItemIcon icon="stop" />
           Animation pause: End
-        </p> */}
+        </p>
         <p>
           <ItemIcon icon="contrast" />
-          Pixel Diff: {pixelDiff ? `${pixelDiff} pixels` : "No diff, that's boring!"}
+          Threshold: 0.2
         </p>
         <p>
-          {pixelDiff &&
-            (isMultipleOfFour(pixelDiff) ? (
-              <>
-                <ItemIcon icon="paragraph" />
-                Code #5 is <b>BFAAS</b>
-              </>
-            ) : (
-              <>
-                <ItemIcon icon="paragraph" />
-                That's a fun diff but wouldn't one four times bigger be better?
-              </>
-            ))}
+          <ItemIcon icon="paragraph" />
+          Anti-alias: Included
         </p>
       </Accordion>
-      {/* <Accordion>
+      <Accordion>
         <Heading>
           Bounding box
           <InfoIcon icon="info" />
@@ -68,7 +53,7 @@ export const RenderSettings = ({ pixelDiff, onClose }: RenderSettingsProps) => {
           <dt>Height:</dt>
           <dd>Hug contents</dd>
         </dl>
-      </Accordion> */}
+      </Accordion>
     </Accordions>
   );
 };