Add prettier for formatting (#1878)

Co-authored-by: farzaank <[email protected]>
Co-authored-by: Farzaan Kaiyom <[email protected]>

.github/workflows/frontend.yml

@@ -28,6 +28,9 @@ jobs:
     - name: Run lint
       working-directory: ./src/helm-frontend
       run: npm run lint
+    - name: Run check format
+      working-directory: ./src/helm-frontend
+      run: npm run format:check
     - name: Run tests
       working-directory: ./src/helm-frontend
       run: npm run test

.pre-commit-config.yaml

@@ -4,4 +4,9 @@ repos:
     - id: run-pre-commit
       name: run-pre-commit
       entry: ./pre-commit.sh
-      language: script
+      language: script
+- repo: https://github.com/pre-commit/mirrors-prettier
+  rev: 'fc260393cc4ec09f8fc0a5ba4437f481c8b55dc1'
+  hooks:
+    - id: prettier
+      types_or: [typescript, javascript]

src/helm-frontend/.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended-type-checked',
     'plugin:react-hooks/recommended',
+    'prettier',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',

src/helm-frontend/README.md

@@ -38,6 +38,18 @@ npm run test
 npm run build
 ```
 
+### Linting
+
+```bash
+npm run lint
+```
+
+### Formatting
+
+```bash
+npm run format
+```
+
 ### Environment Variables
 
 Requires the following environment variables for development and deployment. In development these can be placed in a `.env.local` file with the following:

src/helm-frontend/package.json

@@ -7,6 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
     "preview": "vite preview",
     "test": "vitest"
   },
@@ -38,11 +40,13 @@
     "autoprefixer": "^10.4.14",
     "daisyui": "^3.4.0",
     "eslint": "^8.45.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "jest": "^29.6.1",
     "jsdom": "^22.1.0",
     "postcss": "^8.4.27",
+    "prettier": "^3.0.3",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",

src/helm-frontend/postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/helm-frontend/src/components/AccessBadge.tsx

@@ -11,15 +11,15 @@ type BadgeAccessMap = {
 };
 
 const badgeColorMap: BadgeColorMap = {
-  "open": "green",
-  "limited": "yellow",
-  "closed": "red",
+  open: "green",
+  limited: "yellow",
+  closed: "red",
 };
 
 const badgeNameMap: BadgeAccessMap = {
-  "open": "Open",
-  "limited": "Limited",
-  "closed": "Closed",
+  open: "Open",
+  limited: "Limited",
+  closed: "Closed",
 };
 
 interface Props {

src/helm-frontend/src/components/GroupsCharts.tsx

@@ -36,14 +36,20 @@ interface Props {
 
 function transformData(groupsTables: GroupsTable[], activeGroup: number) {
   return groupsTables[activeGroup].rows.map((row) => ({
-    ...row.slice(1).reduce((acc, cur, idx) => {
-      acc[groupsTables[activeGroup].header[idx + 1].value] =
-        isNaN(Number(cur.value)) ? 0 : cur.value;
+    ...row.slice(1).reduce(
+      (acc, cur, idx) => {
+        acc[groupsTables[activeGroup].header[idx + 1].value] = isNaN(
+          Number(cur.value),
+        )
+          ? 0
+          : cur.value;
 
-      return acc;
-    }, {} as {
-      [key: string]: string | number;
-    }),
+        return acc;
+      },
+      {} as {
+        [key: string]: string | number;
+      },
+    ),
     ...{ name: row[0].value },
   }));
 }
@@ -76,9 +82,7 @@ export default function GroupsCharts({ groupsTables, activeGroup }: Props) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleLegendClick = (e: LegendPayload & { dataKey?: DataKey<any> }) => {
     const { dataKey } = e;
-    if (
-      dataKey === undefined || typeof dataKey !== "string"
-    ) {
+    if (dataKey === undefined || typeof dataKey !== "string") {
       return;
     }
     setActiveBars((prev) => {
@@ -89,30 +93,28 @@ export default function GroupsCharts({ groupsTables, activeGroup }: Props) {
     });
   };
 
-  const sections = groupsTables[activeGroup].header.slice(1).map((header) =>
-    header.value
-  );
+  const sections = groupsTables[activeGroup].header
+    .slice(1)
+    .map((header) => header.value);
 
   /**
    * Adjusting height of the chart to fit aggll the
    * bars evenly. So that the individual bars are
    * about the same size regardless of the number
    * of total data points.
    */
-  const height = 10 * data.length * Math.min(
-    [...activeBars.values()].filter((v) => v).length,
-    Object.keys(data[0]).length - 1,
-  );
+  const height =
+    10 *
+    data.length *
+    Math.min(
+      [...activeBars.values()].filter((v) => v).length,
+      Object.keys(data[0]).length - 1,
+    );
 
   return (
     <div style={{ height: `${height}px` }} className="w-full">
       <ResponsiveContainer className="h-full w-full">
-        <BarChart
-          layout="vertical"
-          width={500}
-          height={height}
-          data={data}
-        >
+        <BarChart layout="vertical" width={500} height={height} data={data}>
           <Legend
             onClick={handleLegendClick}
             iconType="circle"
@@ -121,11 +123,7 @@ export default function GroupsCharts({ groupsTables, activeGroup }: Props) {
           />
           <CartesianGrid strokeDasharray="3 3" />
           <XAxis type="number" />
-          <YAxis
-            dataKey="name"
-            type="category"
-            width={180}
-          />
+          <YAxis dataKey="name" type="category" width={180} />
           <Tooltip />
           {sections.map((section, idx) => (
             <Bar

src/helm-frontend/src/components/GroupsTables.tsx

@@ -10,15 +10,18 @@ interface Props {
   sortable?: boolean;
 }
 
-export default function GroupsTables(
-  { groupsTables, activeGroup, ignoreHref = false, sortable = true }: Props,
-) {
+export default function GroupsTables({
+  groupsTables,
+  activeGroup,
+  ignoreHref = false,
+  sortable = true,
+}: Props) {
   const [activeSortColumn, setActiveSortColumn] = useState<
     number | undefined
   >();
-  const [activeGroupsTable, setActiveGroupsTable] = useState<GroupsTable>(
-    { ...groupsTables[activeGroup] },
-  );
+  const [activeGroupsTable, setActiveGroupsTable] = useState<GroupsTable>({
+    ...groupsTables[activeGroup],
+  });
   const [sortDirection, setSortDirection] = useState<number>(1);
 
   useEffect(() => {
@@ -77,16 +80,11 @@ export default function GroupsTables(
               >
                 <div className="flex gap-2 items-center">
                   <span>{headerValue.value}</span>
-                  {sortable
-                    ? (
-                      <button
-                        className="link"
-                        onClick={() => handleSort(idx)}
-                      >
-                        <ChevronUpDownIcon className="w-6 h-6" />
-                      </button>
-                    )
-                    : null}
+                  {sortable ? (
+                    <button className="link" onClick={() => handleSort(idx)}>
+                      <ChevronUpDownIcon className="w-6 h-6" />
+                    </button>
+                  ) : null}
                 </div>
               </th>
             ))}

src/helm-frontend/src/components/HeadTitle.tsx

@@ -4,8 +4,6 @@ interface Props {
 
 export default function Title({ title }: Props) {
   return (
-    <title>
-      {`${title} - Holistic Evaluation of Language Models (HELM)`}
-    </title>
+    <title>{`${title} - Holistic Evaluation of Language Models (HELM)`}</title>
   );
 }

src/helm-frontend/src/components/Indicator.tsx

@@ -6,11 +6,19 @@ interface BadgeProps {
 }
 
 function BadgeSuccess({ value }: BadgeProps) {
-  return <Badge icon={CheckCircleIcon} color="green">{value}</Badge>;
+  return (
+    <Badge icon={CheckCircleIcon} color="green">
+      {value}
+    </Badge>
+  );
 }
 
 function BadgeError({ value }: BadgeProps) {
-  return <Badge icon={XCircleIcon} color="red">{value}</Badge>;
+  return (
+    <Badge icon={XCircleIcon} color="red">
+      {value}
+    </Badge>
+  );
 }
 
 interface Props {

src/helm-frontend/src/components/InstanceData.tsx

@@ -10,19 +10,21 @@ interface Props {
   predictions: DisplayPrediction[];
 }
 
-export default function InstanceData(
-  { instance, requests, predictions }: Props,
-) {
+export default function InstanceData({
+  instance,
+  requests,
+  predictions,
+}: Props) {
   return (
     <div className="border p-4">
       <h3 className="text-xl mb-4">
         {`Instance id: ${instance.id} [split:  ${instance.split}]`}
       </h3>
       <span className="text-gray-400">Input</span>
       <Preview value={instance.input.text} />
-      {predictions && requests
-        ? <Predictions predictions={predictions} requests={requests} />
-        : null}
+      {predictions && requests ? (
+        <Predictions predictions={predictions} requests={requests} />
+      ) : null}
     </div>
   );
 }

src/helm-frontend/src/components/Loading.tsx

@@ -1,8 +1,7 @@
 export default function Loading() {
   return (
     <div className="w-full">
-      <div className="block mx-auto my-24 loading loading-spinner loading-lg">
-      </div>
+      <div className="block mx-auto my-24 loading loading-spinner loading-lg"></div>
     </div>
   );
 }

src/helm-frontend/src/components/MarkdownValue.test.tsx

@@ -3,17 +3,13 @@ import "@testing-library/jest-dom";
 import MarkdownValue from "./MarkdownValue";
 
 it("renders correctly", () => {
-  render(
-    <MarkdownValue value="**bold**" />,
-  );
+  render(<MarkdownValue value="**bold**" />);
 
   expect(screen.getByText("bold"));
 });
 
 it("should add a class", () => {
-  render(
-    <MarkdownValue value="[test](https://example.com)" />,
-  );
+  render(<MarkdownValue value="[test](https://example.com)" />);
 
   expect(screen.getByText("test")).toHaveClass("link");
 });

src/helm-frontend/src/components/MarkdownValue.tsx

@@ -9,9 +9,7 @@ interface Props {
   value: string;
 }
 
-function Link(
-  { href, children }: PropsWithChildren<LinkProps>,
-) {
+function Link({ href, children }: PropsWithChildren<LinkProps>) {
   return (
     <a
       href={href}