feat(examples): group together w/ filters

Author: sterlingwes

site/docs/examples.mdx

@@ -8,168 +8,189 @@ We're providing this data in the hopes it will help you tell a story about what
 
 If you've used our data and are willing to share or link to your usage, please [contact us](/docs/contact), or [open a pull request on Github](https://github.com/TechForPalestine/palestine-datasets).
 
-## Daily Casualties / Summary Dataset
-
 import { ExampleUsageGrid } from "@site/src/components";
 
 <ExampleUsageGrid
   examples={[
+    {
+      description: "We Will Say Their Names (Exhibit Video)",
+      image: "/img/exampleuse/we-will-say-their-names.jpg",
+      link: "https://www.instagram.com/reel/DVUA357Afyd",
+      tags: ["killed-in-gaza", "memorial"],
+    },
+    {
+      description: "Stones of Gaza",
+      image: "/img/exampleuse/stones-of-gaza.png",
+      link: "https://stonesofgaza.com",
+      tags: ["killed-in-gaza", "memorial", "interactive"],
+    },
+    {
+      description: "Civilian Names Poster + Artist Statement",
+      image: "/img/exampleuse/civilians-infographic.jpg",
+      link: "/docs/examples/poster",
+      tags: ["killed-in-gaza", "visualization", "comprehending-scale"],
+    },
+    {
+      description: "DOTS • Gaza Memorial",
+      image: "/img/exampleuse/dots.png",
+      link: "https://omibahuguna.github.io/dots",
+      tags: ["killed-in-gaza", "memorial", "comprehending-scale"],
+    },
+    {
+      description: "Beyond the Numbers (Names)",
+      image: "/img/exampleuse/beyondthenumbers-names.png",
+      link: "https://beyond-the-numbers.vercel.app/martyrs",
+      tags: ["killed-in-gaza", "interactive", "memorial"],
+    },
+    {
+      description: "Remember Gaza",
+      image: "/img/exampleuse/nameskilledingaza.png",
+      link: "https://www.remembergaza.id",
+      tags: ["killed-in-gaza", "memorial"],
+    },
+    {
+      description: "From the River to the Sea (Never Forget Page)",
+      image: "/img/exampleuse/river-to-the-sea-names.png",
+      link: "https://from.the.river.to.the.sea.giving/names",
+      tags: ["killed-in-gaza", "memorial"],
+    },
+    {
+      description: "Python API example",
+      image: "/img/exampleuse/python-api.png",
+      link: "https://github.com/ummahrican/palestine-api",
+      tags: ["killed-in-gaza", "developer-tool"],
+    },
     {
       description: "Palestine Poppy (The Weight of Counting)",
       image: "/img/exampleuse/palestine-poppy.jpg",
       link: "https://medium.com/design-bootcamp/the-weight-of-counting-b460b375ebb3",
+      tags: ["daily-casualties", "comprehending-scale"],
     },
     {
       description: "BBC Bias Investigation",
       image: "/img/exampleuse/dropsite.png",
       link: "https://www.dropsitenews.com/p/bbc-civil-war-gaza-israel-biased-coverage",
+      tags: ["daily-casualties", "journalism"],
     },
     {
       description: "DataActivists.org: Estimating the Death Toll",
       image: "/img/exampleuse/data-activists.png",
       link: "https://dataactivists.org/estimating_death_toll_of_war_on_gaza/",
+      tags: ["daily-casualties", "journalism"],
     },
     {
       description: "Beyond the Numbers",
       image: "/img/exampleuse/beyondthenumbers.png",
       link: "https://beyond-the-numbers.vercel.app/",
+      tags: ["daily-casualties", "interactive", "visualization"],
     },
     {
       description: "Rebel Metrics",
       image: "/img/exampleuse/rebel-metrics-gaza-bars.png",
       link: "/docs/examples/rebel-metrics",
+      tags: ["daily-casualties", "interactive", "visualization"],
     },
     {
       description: "Genocide Monitor",
       image: "/img/exampleuse/genocidemonitor.png",
       link: "https://genocidemonitor.com/",
+      tags: ["daily-casualties", "interactive", "visualization"],
     },
     {
       description: "How many more?",
       image: "/img/exampleuse/howmanymore.png",
       link: "https://howmanymore.xyz/",
+      tags: ["daily-casualties", "interactive", "comprehending-scale"],
     },
     {
       description: "palestina.ba",
       image: "/img/exampleuse/palestina-ba.png",
       link: "https://palestina.ba/",
+      tags: ["daily-casualties", "interactive"],
     },
     {
-      description: "Hind's Banner for Markdown Readmes",
+      description: "Hind's Banner for Markdown Readme",
       image: "/img/exampleuse/hinds-banner.png",
       link: "https://github.com/alvii147/hinds-banner",
+      tags: ["daily-casualties", "developer-tool"],
     },
     {
       description: "The National: UN Ramadan ceasefire news",
       image: "/img/exampleuse/nworld-ramadan.png",
       link: "https://www.thenationalnews.com/world/us-news/2024/03/25/un-security-council-adopts-gaza-ceasefire-resolution/",
+      tags: ["daily-casualties", "journalism"],
     },
     {
       description: "Oct7FactCheck analysis",
       image: "/img/exampleuse/oct7factcheck.jpeg",
       link: "https://x.com/nickburbank710/status/1770226449116430688?s=20",
+      tags: ["daily-casualties", "journalism"],
     },
     {
       description: "Latest total killed label on avatar maker",
       image: "/img/exampleuse/tfp-ppm.png",
       link: "https://ppm.techforpalestine.org/",
+      tags: ["daily-casualties", "interactive"],
     },
     {
       description: "Line chart & count visualization",
       image: "/img/exampleuse/linechart.png",
       link: "https://genocide.club/hillel-fuld",
+      tags: ["daily-casualties", "visualization"],
     },
     {
       description: "Number of people killed daily",
       image: "/img/exampleuse/szh-counts.png",
       link: "https://www.instagram.com/p/C3Tyoy2rp-Z/?img_index=1",
+      tags: ["daily-casualties", "visualization"],
     },
     {
       description: "Bar chart race",
       image: "/img/exampleuse/racingbars.png",
       link: "https://livecodes.io/?x=id/5vjcrw2xdj8",
+      tags: ["daily-casualties", "visualization"],
     },
     {
       description: "Summary count grid",
       image: "/img/exampleuse/countgrid.png",
       link: "https://gazanumbers.jariyah.app/",
+      tags: ["daily-casualties", "visualization"],
     },
     {
       description: "The Economist",
       image: "/img/exampleuse/economist.png",
       link: "https://www.economist.com/",
+      tags: ["daily-casualties", "journalism"],
     },
     {
       description: "From the River to the Sea",
       image: "/img/exampleuse/river-to-the-sea.png",
       link: "https://from.the.river.to.the.sea.giving",
-    },
-  ]}
-/>
-
-## Killed in Gaza
-
-<ExampleUsageGrid
-  examples={[
-    {
-      description: "We Will Say Their Names (Exhibit Video)",
-      image: "/img/exampleuse/we-will-say-their-names.jpg",
-      link: "https://www.instagram.com/reel/DVUA357Afyd",
-    },
-    {
-      description: "Stones of Gaza",
-      image: "/img/exampleuse/stones-of-gaza.png",
-      link: "https://stonesofgaza.com",
+      tags: ["daily-casualties", "interactive", "comprehending-scale"],
     },
     {
-      description: "Civilian Names Poster + Artist Statement",
-      image: "/img/exampleuse/civilians-infographic.jpg",
-      link: "/docs/examples/poster",
-    },
-    {
-      description: "Remember Their Names",
-      image: "/img/exampleuse/af2c-remember.png",
-      link: "https://af2c.org/Palestine/",
-    },
-    {
-      description: "DOTS • Gaza Memorial",
-      image: "/img/exampleuse/dots.png",
-      link: "https://omibahuguna.github.io/dots",
+      description: "Video scrolling 14k names in 7 hours",
+      image: "/img/exampleuse/scrollingnames.png",
+      link: "https://www.youtube.com/watch?v=O7ar_xvvHxE",
+      tags: ["killed-in-gaza", "memorial", "comprehending-scale"],
     },
     {
       description: "Birds of Gaza children names",
       image: "/img/exampleuse/birdsofgaza.png",
       link: "https://birdsofgaza.com",
+      tags: ["killed-in-gaza", "memorial", "interactive"],
     },
     {
-      description: "Beyond the Numbers",
-      image: "/img/exampleuse/beyondthenumbers-names.png",
-      link: "https://beyond-the-numbers.vercel.app/martyrs",
-    },
-    {
-      description: "Remember Gaza",
-      image: "/img/exampleuse/nameskilledingaza.png",
-      link: "https://www.remembergaza.id",
-    },
-    {
-      description: "From the River to the Sea (Never Forget Page)",
-      image: "/img/exampleuse/river-to-the-sea-names.png",
-      link: "https://from.the.river.to.the.sea.giving/names",
-    },
-    {
-      description: "Python API example",
-      image: "/img/exampleuse/python-api.png",
-      link: "https://github.com/ummahrican/palestine-api",
-    },
-    {
-      description: "Video scrolling 14k names in 7 hours",
-      image: "/img/exampleuse/scrollingnames.png",
-      link: "https://www.youtube.com/watch?v=O7ar_xvvHxE",
+      description: "Remember Their Names",
+      image: "/img/exampleuse/af2c-remember.png",
+      link: "https://af2c.org/Palestine/",
+      tags: ["killed-in-gaza", "memorial", "interactive"],
     },
     {
       description: "UnityFast.org family names",
       image: "/img/exampleuse/unityfast.png",
       link: "https://unityfast.org",
+      tags: ["killed-in-gaza", "memorial"],
     },
   ]}
 />

site/src/components/ExampleUsageGrid/index.tsx

@@ -1,34 +1,143 @@
 import clsx from "clsx";
 import styles from "./styles.module.css";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+
+type DatasetTag = "daily-casualties" | "killed-in-gaza";
+type TypeTag =
+  | "interactive"
+  | "journalism"
+  | "comprehending-scale"
+  | "visualization"
+  | "memorial"
+  | "developer-tool";
+
+export type Example = {
+  image: string;
+  description: string;
+  link: string;
+  tags: Array<DatasetTag | TypeTag>;
+};
 
 type Props = {
-  examples: Array<{ image: string; description: string; link: string }>;
+  examples: Array<Example>;
 };
 
 const numberPerRow = 2;
 
+const tagGroups = {
+  dataset: {
+    label: "Dataset",
+    tags: {
+      "daily-casualties": "Daily Casualties",
+      "killed-in-gaza": "Killed in Gaza",
+    } satisfies Record<DatasetTag, string>,
+  },
+  type: {
+    label: "Type",
+    tags: {
+      interactive: "Interactive",
+      journalism: "Journalism",
+      "comprehending-scale": "Comprehending Scale",
+      visualization: "Visualization",
+      memorial: "Memorial",
+      "developer-tool": "Developer Tool",
+    } satisfies Record<TypeTag, string>,
+  },
+};
+
+type TagKey = DatasetTag | TypeTag;
+
 const linkTargetFor = (link: string) => {
   if (link.endsWith("pdf") || link.startsWith("http")) {
     return "_blank";
   }
 };
 
 export const ExampleUsageGrid = (props: Props) => {
+  const [activeTags, setActiveTags] = useState<Set<TagKey>>(new Set());
+
+  const toggleTag = (tag: TagKey) => {
+    setActiveTags((prev) => {
+      const next = new Set(prev);
+      if (next.has(tag)) {
+        next.delete(tag);
+      } else {
+        next.add(tag);
+      }
+      return next;
+    });
+  };
+
+  const clearFilters = () => {
+    setActiveTags(new Set());
+  };
+
+  const filteredExamples = useMemo(() => {
+    if (activeTags.size === 0) return props.examples;
+
+    const activeDatasetTags = Object.keys(tagGroups.dataset.tags).filter((t) =>
+      activeTags.has(t as DatasetTag)
+    );
+    const activeTypeTags = Object.keys(tagGroups.type.tags).filter((t) =>
+      activeTags.has(t as TypeTag)
+    );
+
+    return props.examples.filter((example) => {
+      const matchesDataset =
+        activeDatasetTags.length === 0 ||
+        activeDatasetTags.some((t) => example.tags.includes(t as DatasetTag));
+      const matchesType =
+        activeTypeTags.length === 0 ||
+        activeTypeTags.some((t) => example.tags.includes(t as TypeTag));
+      return matchesDataset && matchesType;
+    });
+  }, [props.examples, activeTags]);
+
   const rows = useMemo(() => {
-    return props.examples.reduce((acc, example) => {
+    return filteredExamples.reduce((acc, example) => {
       const newRow = Number.isInteger(acc.length / numberPerRow);
       if (newRow) {
         acc.push([example]);
       } else {
         acc[acc.length - 1].push(example);
       }
       return acc;
-    }, [] as Array<Props["examples"]>);
-  }, [props.examples]);
+    }, [] as Array<Example[]>);
+  }, [filteredExamples]);
 
   return (
     <div>
+      <div className={styles.filterContainer}>
+        {Object.values(tagGroups).map((group) => (
+          <div key={group.label} className={styles.filterGroup}>
+            <span className={styles.filterGroupLabel}>{group.label}:</span>
+            <div className={styles.filterButtons}>
+              {Object.entries(group.tags).map(([tag, label]) => (
+                <button
+                  key={tag}
+                  className={clsx(
+                    styles.filterButton,
+                    activeTags.has(tag as TagKey) && styles.filterButtonActive
+                  )}
+                  onClick={() => toggleTag(tag as TagKey)}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+          </div>
+        ))}
+        {activeTags.size > 0 && (
+          <button className={styles.clearButton} onClick={clearFilters}>
+            Clear filters
+          </button>
+        )}
+      </div>
+      {filteredExamples.length === 0 && (
+        <div className={styles.noResults}>
+          No examples match the selected filters.
+        </div>
+      )}
       {rows.map((row) => (
         <div className="row">
           {row.map((col) => (