Make badges and authors more user-friendly

Author: Boltzmachine

app/projects/hybrid/page.mdx

@@ -1,25 +1,19 @@
-import { AuthorList } from '@/components/utils'
-import { BadgeContainer, GithubBadge, ArxivBadge, PdfBadge, VenueBadge } from '@/components/badges'
+import { Authors } from '@/components/utils'
+import { Badges } from '@/components/badges'
 
 # Learning High-Order Relationships of Brain Regions
 
-<AuthorList 
-  authors={[
-    { name: "Weikang Qiu", affiliation: "Yale University" },
-    { name: "Huangrui Chu", affiliation: "Yale University" },
-    { name: "Selena Wang", affiliation: "Yale University" },
-    { name: "Haolan Zuo", affiliation: "Yale University" },
-    { name: "Xiaoxiao Li", affiliation: "University of British Columbia" },
-    { name: "Rex Ying", affiliation: "Yale University" }
-  ]}
+<Authors
+  authors="Weikang Qiu, Yale University; Huangrui Chu, Yale University; Selena Wang, Yale University; Haolan Zuo, Yale University; Xiaoxiao Li, University of British Columbia; Rex Ying, Yale University"
+/>
+
+<Badges
+  venue="ICML 2024"
+  github="https://github.com/Graph-and-Geometric-Learning/HyBRiD"
+  arxiv="https://arxiv.org/abs/2312.02203"
+  pdf="https://arxiv.org/pdf/2312.02203"
 />
 
-<BadgeContainer>
-<VenueBadge venue="ICML 2024" />
-<GithubBadge link="https://github.com/Graph-and-Geometric-Learning/HyBRiD" />
-<ArxivBadge link="https://arxiv.org/abs/2312.02203" />
-<PdfBadge link="https://arxiv.org/pdf/2312.02203" />
-</BadgeContainer>
 
 ## Introduction
 Discovering reliable and informative relationships among brain regions from functional magnetic resonance imaging (fMRI) signals is essential in phenotypic predictions. Most of the current methods fail to accurately characterize those interactions because they only focus on pairwise connections and overlook the high-order relationships of brain regions. We propose that these high-order relationships should be maximally informative and minimally redundant (MIMR). However, identifying such high-order relationships is challenging and under-explored due to the exponential search space and the absence of a tractable objective. In response to this gap, we propose a novel method named **HyBRiD** which aims to extract MIMR high-order relationships from fMRI data. **HyBRiD** employs a **CONSTRUCTOR** to identify hyperedge structures, and a **WEIGHTER** to compute a weight for each hyperedge, which avoids searching in exponential space. **HyBRiD** achieves the MIMR objective through an innovative information bottleneck framework named multi-head drop-bottleneck with theoretical guarantees. Our comprehensive experiments demonstrate the effectiveness of our model. Our model outperforms the state-of-the-art predictive model by an average of $11.2\%$, regarding the quality of hyperedges measured by CPM, a standard protocol for studying brain connections. 

app/projects/mage/page.mdx

@@ -1,21 +1,18 @@
-import { AuthorList } from '@/components/utils'
-import { BadgeContainer, GithubBadge, ArxivBadge } from '@/components/badges'
+import { Authors } from '@/components/utils'
+import { Badges } from '@/components/badges'
 
 # Explaining Graph Neural Networks via Structure-aware Interaction Index
 
-<AuthorList 
-  authors={[
-    { name: "Ngoc Bui", affiliation: "Yale University" },
-    { name: "Hieu Trung Nguyen", affiliation: "VinAI Research" },
-    { name: "Viet Anh Nguyen", affiliation: "The Chinese University of HongKong" },
-    { name: "Rex Ying", affiliation: "Yale University" }
-  ]}
+<Authors
+  authors="Ngoc Bui, Yale University; Hieu Trung Nguyen, VinAI Research; Viet Anh Nguyen, The Chinese University of Hong Kong; Rex Ying, Yale University"
 />
 
-<BadgeContainer>
-<GithubBadge link="https://github.com/ngocbh/MAGE" />
-<ArxivBadge link="https://arxiv.org/abs/2405.14352" />
-</BadgeContainer>
+<Badges
+  venue="ICML 2024"
+  github="https://github.com/ngocbh/MAGE"
+  arxiv="https://arxiv.org/abs/2405.14352"
+  pdf="https://arxiv.org/pdf/2405.14352"
+/>
 
 In this project, we aim to explore graph-theoretic-based attribution scores for explaining graph neural networks (GNNs). Prior work (GStarX, SubgraphX, SAME) has successfully applied solutions such as Shapley values and HN values to explain GNNs. However, several limitations remain:
 

components/badges.tsx

@@ -51,4 +51,25 @@ export const BadgeContainer = ({ children }: { children: ReactNode }) => {
         {children}
     </div>
     );
+}
+
+export function Badges({
+    github,
+    arxiv,
+    pdf,
+    venue,
+}: {
+    venue?: string;
+    github?: string;
+    arxiv?: string;
+    pdf?: string;
+}) {
+    return (
+        <BadgeContainer>
+            {venue && <VenueBadge venue={venue} />}
+            {github && <GithubBadge link={github} />}
+            {arxiv && <ArxivBadge link={arxiv} />}
+            {pdf && <PdfBadge link={pdf} />}
+        </BadgeContainer>
+    );
 }

components/utils.tsx

@@ -32,4 +32,14 @@ export function AuthorList({ authors }: { authors: Author[] }) {
           </div>
     </div>
   );
+}
+
+
+export function Authors({ authors }: { authors: string }) {
+    // authors in the format: author1, affliation1; author2, affiliation2; ...
+    const authorList = authors.split(';').map(author => {
+        const [name, affiliation] = author.split(',');
+        return { name: name.trim(), affiliation: affiliation.trim() };
+    });
+    return <AuthorList authors={authorList} />;
 }