add citation block and filters.

src/components/AIPoliciesTable.tsx

@@ -18,7 +18,23 @@ const AIPoliciesTable: React.FC<AIPoliciesTableProps> = ({ policies }) => {
     setOpenYears((prev) => ({ ...prev, [year]: !prev[year] }));
   };
 
-  const groupedPolicies = policies.reduce((acc, policy) => {
+  const uniqueTags = Array.from(new Set(policies.flatMap(policy => policy.tags.map(tag => tag.toLowerCase())))).map(tag => tag.charAt(0).toUpperCase() + tag.slice(1));
+
+  const [selectedTags, setSelectedTags] = useState<string[]>(uniqueTags);
+
+  const handleTagChange = (tag: string) => {
+    if (selectedTags.includes(tag)) {
+      setSelectedTags(selectedTags.filter(t => t !== tag));
+    } else {
+      setSelectedTags([...selectedTags, tag]);
+    }
+  };
+
+  const filteredPolicies = selectedTags.length === 0 
+    ? policies 
+    : policies.filter(policy => policy.tags.some(tag => selectedTags.includes(tag.charAt(0).toUpperCase() + tag.slice(1))));
+
+  const groupedPolicies = filteredPolicies.reduce((acc, policy) => {
     const year = new Date(policy.releaseDate).getFullYear();
     if (!acc[year]) {
       acc[year] = [];
@@ -39,6 +55,19 @@ const AIPoliciesTable: React.FC<AIPoliciesTableProps> = ({ policies }) => {
 
   return (
     <div className="container mx-auto p-6">
+      <div className="mb-6 flex justify-center">
+        {uniqueTags.map(tag => (
+          <label key={tag} className="inline-flex items-center mr-4">
+            <input
+              type="checkbox"
+              className="form-checkbox h-5 w-5 text-blue-600"
+              checked={selectedTags.includes(tag)}
+              onChange={() => handleTagChange(tag)}
+            />
+            <span className="ml-2 text-gray-700 dark:text-gray-400">{tag}</span>
+          </label>
+        ))}
+      </div>
       {sortedYears.map((year) => (
         <div key={year} className="mb-12">
           <button
@@ -67,6 +96,9 @@ const AIPoliciesTable: React.FC<AIPoliciesTableProps> = ({ policies }) => {
                       <div className="text-xs text-gray-400 dark:text-gray-500 mt-2">
                         {formatDate(policy.releaseDate)}
                       </div>
+                      <div className="text-xs text-gray-400 dark:text-gray-500 mt-2">
+                        {policy.tags.map(tag => tag.charAt(0).toUpperCase() + tag.slice(1)).join(', ')}
+                      </div>
                     </td>
                     <td className="py-6 px-6 text-right">
                       {policy.link.zh && (

src/pages/index.tsx

@@ -37,18 +37,7 @@ export async function getStaticProps() {
     // Read policy data from policies.json
     const policiesFilePath = path.join(process.cwd(), 'content', 'policies.json');
     const policiesContent = fs.readFileSync(policiesFilePath, 'utf-8');
-    const rawPolicyData = JSON.parse(policiesContent);
-
-    // Transform the policy data into the expected format
-    const policyData = rawPolicyData.map((policy: any) => ({
-      zh: policy.zh,
-      en: policy.en,
-      link: {
-        zh: policy.link.zh || null, // Only include link if provided
-        en: policy.link.en || null, // Only include link if provided
-      },
-      releaseDate: policy.releaseDate,
-    }));
+    const policyData = JSON.parse(policiesContent);
 
     // Sort policyData based on releaseDate in descending order
     policyData.sort((a: PolicyData, b: PolicyData) => {
@@ -100,8 +89,23 @@ const OpenSourceHeatmap: React.FC<{ policyData: PolicyData[] }> = ({
         </h1>
         
         <AIPoliciesTable policies={policyData} />
-      </div>
 
+        {/* Add citation section */}
+        <div className="mt-16">
+          <h2 className="text-2xl font-bold mb-4">Citation</h2>
+          <p className="text-gray-700 dark:text-gray-400">
+            If you use this resource in your research, please cite it as follows:
+          </p>
+          <pre className="bg-gray-100 dark:bg-gray-800 p-4 rounded mt-2">
+            {`@misc{china_ai_policy_${new Date().getFullYear()},
+  title={China AI Policy Research},
+  author={Tiezhen Wang, Adina Yakefu, Lu Cheng},
+  year={2024},
+}`}
+          </pre>
+        </div>
+      </div>
+      
       {/* <div className="text-center text-sm my-8 space-y-4">
         <p>
           Models, Datasets, and Spaces from the top AI labs.

src/types.ts

@@ -6,4 +6,5 @@ export interface PolicyData {
     en: string;
   };
   releaseDate: string;
+  tags: string[]; // Add this line
 }