bug(audit): Tweak chart dots for clarity, and fixed issue with stale data sometimes appearing in audit summary

Author: azdak

apps/backend/utils/cm.ts

@@ -9,12 +9,9 @@ export * from './logEvent'
 export * from './cognito'
 export * from './dynamodb'
 export * from './getAnalytics'
-export * from './cm'
 export * from './formatId'
 export * from './unformatId'
-export * from './slack'
 export * from './db'
-export * from './openai'
 export * from './validateUuid'
 export * from './validateUrl'
 export * from './formatId'

apps/backend/utils/index.ts

@@ -1,6 +1,16 @@
 @use "../global-styles/variables.module.scss";
 @use "../global-styles/fonts.scss";
 
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+  color: variables.$green;
+}
+
 .BlockersTableSummary {
   .graph-card {
     display: flex;

apps/backend/utils/openai.ts

@@ -6,6 +6,7 @@ import { DataRow } from "./DataRow";
 import { Card } from "./Card";
 import { Page } from "#src/routes/Audit.tsx";
 import { Pie, PieChart, ResponsiveContainer } from "recharts";
+import { GrPowerCycle } from "react-icons/gr";
 
 import themeVariables from "../global-styles/variables.module.scss";
 import { SkeletonAuditHeader } from "./Skeleton";
@@ -39,9 +40,11 @@ export const BlockersTableSummary = ({ auditId, isShared, chartData, pages, scan
   const [mostCommonCategoriesLimit, setMostCommonCategoriesLimit] = useState(3);
   const [mostCommonTagsLimit, setMostCommonTagsLimit] = useState(3);
 
-  const { data, isLoading, error } = useQuery({
+  const { data, isLoading, isFetching, error } = useQuery({
     queryKey: [
-      "auditSummary", auditId
+      "auditSummary", auditId,
+      mostCommonUrlsLimit, mostCommonBlockersLimit,
+      mostCommonCategoriesLimit, mostCommonTagsLimit
     ],
     queryFn: async () => {
       const params: Record<string, string> = {
@@ -181,6 +184,11 @@ export const BlockersTableSummary = ({ auditId, isShared, chartData, pages, scan
 
         </>
       ) : (<><SkeletonAuditHeader /></>)}
+      {isFetching && !isLoading && (
+        <span role="img" aria-label="Refreshing">
+          <GrPowerCycle className={style.spinning} />
+        </span>
+      )}
     </div >
   );
 };

apps/backend/utils/slack.ts

@@ -12,10 +12,25 @@ export const CustomizedDot = (props: any) => {
           r={4}
           stroke={themeVariables.white}
           fill={themeVariables.white}
-          strokeWidth={3}
+          strokeWidth={4}
         ></Dot>
       );
     } else {
       return <div key={Math.random()}></div>; //this is a hack :/
     }
-  };
+  };
+
+export const CustomizedActiveDot = (props: any) => {
+  const { cx, cy, payload } = props;
+  return (
+    <Dot
+      cx={cx}
+      cy={cy}
+      r={4}
+      stroke={themeVariables.white}
+      fill={payload.timestamp ? themeVariables.white : themeVariables.black}
+      strokeWidth={payload.timestamp ? 4 : 2}/* 
+      opacity={payload.timestamp ? 1 : 0.5} */
+    />
+  );
+};

apps/frontend/src/components/BlockersTableSummary.module.scss

@@ -33,7 +33,7 @@ import {
   EmailSubscriptionList,
 } from "#src/components/AuditEmailSubscriptionInput.tsx";
 
-import { CustomizedDot } from "#src/components/ChartCustomizedDot.tsx";
+import { CustomizedDot, CustomizedActiveDot } from "#src/components/ChartCustomizedDot.tsx";
 import { ChartTooltipContent } from "#src/components/ChartTooltipContent.tsx";
 
 import { AuditHeader } from "#src/components/AuditHeader.tsx";
@@ -552,7 +552,7 @@ export const Audit = () => {
                           //margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                           accessibilityLayer={true}
                           margin={{
-                            top: 5,
+                            top: 10,
                             right: 10,
                             left: -20,
                             bottom: 5,
@@ -605,6 +605,7 @@ export const Audit = () => {
                             stroke={themeVariables.white}
                             strokeWidth={4}
                             dot={CustomizedDot}
+                            activeDot={CustomizedActiveDot}
                             name="Blockers"
                             isAnimationActive={false}
                           />