Bio page update (WIP)

scripts/write_form_data_to_dict.py

@@ -0,0 +1,135 @@
+import pandas as pd
+
+
+# Function to extract a year from a text string
+def extract_year(text):
+ if pd.isna(text) or text.strip() == "":
+ return None
+ try:
+ return int(text[-4:])
+ except (ValueError, IndexError):
+ return None
+
+
+# Function to convert Google Drive link to direct image URL
+def convert_drive_link_to_direct_image_url(link):
+ if pd.isna(link) or link.strip() == "":
+ return None
+ prefix = "https://drive.google.com/uc?export=view&id="
+ file_id = link.split("id=")[-1]
+ return f"{prefix}{file_id}"
+
+
+# Load the CSV file into a DataFrame
+df = pd.read_csv("./contributor_info_responses_5_6_24.csv")
+
+# Transform each row in the DataFrame to a `Person` dictionary, omitting None values
+people = df.apply(
+ lambda row: {
+ **(
+ {"name": f"{row['First Name']} {row['Last Name']}".strip()}
+ if not pd.isna(row["First Name"]) and not pd.isna(row["Last Name"])
+ else {}
+ ),
+ **(
+ {"bio": row["Bio"].strip()}
+ if not pd.isna(row["Bio"]) and row["Bio"].strip() != ""
+ else {}
+ ),
+ **(
+ {
+ "title": row[
+ "Title at Cornell (eg. Research Associate, MEng Student, PhD Student)"
+ ].strip()
+ }
+ if not pd.isna(
+ row[
+ "Title at Cornell (eg. Research Associate, MEng Student, PhD Student)"
+ ]
+ )
+ and row[
+ "Title at Cornell (eg. Research Associate, MEng Student, PhD Student)"
+ ].strip()
+ != ""
+ else {}
+ ),
+ **(
+ {
+ "image": convert_drive_link_to_direct_image_url(
+ row["Headshot photo of you (square-cropped, if possible)"]
+ )
+ }
+ if not pd.isna(row["Headshot photo of you (square-cropped, if possible)"])
+ and row["Headshot photo of you (square-cropped, if possible)"].strip() != ""
+ else {}
+ ),
+ **(
+ {
+ "role": row[
+ "Role at Gao Labs/Cornell (eg. Lead Developer for CAT) (optional)"
+ ].strip()
+ }
+ if not pd.isna(
+ row["Role at Gao Labs/Cornell (eg. Lead Developer for CAT) (optional)"]
+ )
+ and row[
+ "Role at Gao Labs/Cornell (eg. Lead Developer for CAT) (optional)"
+ ].strip()
+ != ""
+ else {}
+ ),
+ **({"team": row["Team"].strip()} if row["Team"] in ["uTech", "CAT"] else {}),
+ **(
+ {
+ "yearIfPastMember": extract_year(
+ row[
+ "What semester did you start contributing at Gao Labs? Please format your answer [SEASON YEAR]"
+ ]
+ )
+ }
+ if extract_year(
+ row[
+ "What semester did you start contributing at Gao Labs? Please format your answer [SEASON YEAR]"
+ ]
+ )
+ is not None
+ else {}
+ ),
+ **(
+ {"linkedinUrl": row["LinkedIn Profile URL (optional)"].strip()}
+ if not pd.isna(row["LinkedIn Profile URL (optional)"])
+ and row["LinkedIn Profile URL (optional)"].strip() != ""
+ else {}
+ ),
+ **(
+ {"websiteUrl": row["Personal Website URL (optional)"].strip()}
+ if not pd.isna(row["Personal Website URL (optional)"])
+ and row["Personal Website URL (optional)"].strip() != ""
+ else {}
+ ),
+ **(
+ {
+ "email": row[
+ "Email for people to contact you on website (optional)"
+ ].strip()
+ }
+ if not pd.isna(row["Email for people to contact you on website (optional)"])
+ and row["Email for people to contact you on website (optional)"].strip()
+ != ""
+ else {}
+ ),
+ **(
+ {"githubUrl": row["GitHub Profile URL (optional)"].strip()}
+ if not pd.isna(row["GitHub Profile URL (optional)"])
+ and row["GitHub Profile URL (optional)"].strip() != ""
+ else {}
+ ),
+ },
+ axis=1,
+).tolist()
+
+# Print new content of bios.const.ts to terminal (content of file can be replaced)
+print("import { Person } from '../types/Person.type'\nexport const people: Person[] =[")
+for p in people:
+ print(f"{p},")
+print("]")

website/src/app/app.component.ts

@@ -1,10 +1,31 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
  title = 'website';
+
+ constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {}
+
+ ngOnInit() {
+ // Register svg icons for use in bio-card component later
+ this.matIconRegistry.addSvgIcon(
+ 'linkedin',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/logos/LinkedIn_icon.svg')
+ );
+ this.matIconRegistry.addSvgIcon(
+ 'github',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/logos/github-mark.svg')
+ );
+ }
+
 }
+
+
+
+

website/src/app/app.module.ts

@@ -9,6 +9,8 @@ import { HomepageModule } from './pages/homepage/homepage.module';
 import { PublicationsModule } from './pages/publications/publications.module';
 import { MatButtonModule } from '@angular/material/button';
 import { ComponentsModule } from './components/components.module';
+import { HttpClientModule } from '@angular/common/http';
+
 
 @NgModule({
  declarations: [AppComponent],
@@ -21,6 +23,7 @@ import { ComponentsModule } from './components/components.module';
  HomepageModule,
  MatButtonModule,
  ComponentsModule,
+ HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent],

website/src/app/components/bio-card/bio-card.component.css

@@ -11,6 +11,22 @@
  justify-content: space-evenly;
 }
 
+.icon-button {
+ align-items: center;
+ justify-content: center;
+}
+
+.button-icon {
+ width: 24px;
+ height: 24px;
+ align-items: center;
+}
+
+/* .github-icon {
+ transform: scale(0.75);
+
+} */
+
 .card-header {
  margin: 5px;
 }
@@ -30,4 +46,5 @@
  text-overflow: ellipsis;
  flex: 1;
  flex-shrink: 1;
-}
+}
+

website/src/app/components/bio-card/bio-card.component.html

@@ -2,21 +2,34 @@
  <mat-card-header class="card-header">
  <mat-card-title>{{ person.name }}</mat-card-title>
  <mat-card-subtitle>{{ person.title }}</mat-card-subtitle>
- <!-- Include project tags: CAT, uTECH etc -->
+ <mat-card-subtitle *ngIf="person.role && person.team">{{ person.role }} for {{person.team}}</mat-card-subtitle>
+ <mat-card-subtitle *ngIf="person.role && !person.team">{{ person.role }}</mat-card-subtitle>
+ <mat-card-subtitle *ngIf="person.team && !person.role">{{person.team}}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
- <img
+ <img mat-card-image
  class="headshot-image"
  mat-card-image
  src="{{ person.image }}"
  alt="Professional headshot of {{ person.name }}"
+ (error)="handleImageError($event)"
  />
  </mat-card-content>
  <mat-card-actions class="contact-buttons">
- <button mat-button (click)="openEmail(person.email)" *ngIf="person.email">Email</button>
- <button mat-button (click)="openLink(person.websiteUrl)" *ngIf="person.websiteUrl">Website</button>
- <button mat-button (click)="openLink(person.linkedinUrl)" *ngIf="person.linkedinUrl">LinkedIn</button>
- <button mat-button (click)="openLink(person.githubUrl)" *ngIf="person.githubUrl">GitHub</button>
+ <button mat-button (click)="openEmail(person.email)" *ngIf="person.email" class="icon-button">
+ <mat-icon class="button-icon">email</mat-icon>
+ </button>
+ <button mat-button (click)="openLink(person.websiteUrl)" *ngIf="person.websiteUrl" class="icon-button">
+ <mat-icon class="button-icon">link</mat-icon>
+ </button>
+ <button mat-button (click)="openLink(person.linkedinUrl)" *ngIf="person.linkedinUrl" class="icon-button"> 
+ <img class="button-icon" src="../../../assets/logos/LinkedIn_icon.svg"/>
+ <!-- <mat-icon svgIcon="linkedin" class="button-icon"></mat-icon> -->
+ </button>
+ <button mat-button (click)="openLink(person.githubUrl)" *ngIf="person.githubUrl" class="icon-button github-icon">
+ <img class="button-icon" src="../../../assets/logos/github-mark.svg"/>
+ <!-- <mat-icon svgIcon="github" class="button-icon"></mat-icon> -->
+ </button>
  </mat-card-actions>
  <mat-card-content>
  <p class="bio-container">

website/src/app/components/bio-card/bio-card.component.ts

@@ -27,6 +27,12 @@ import { Person } from "src/app/types/Person.type";
 
  openEmail(email: string) {
  window.open(`mailto:${email}`);
- }
+ }
+
+ handleImageError(event: any) {
+ console.log('Failed to load image', event);
+ event.target.src = '../../../assets/headshots/default_headshot.jpeg';
+ }
+
 
  }

website/src/app/components/components.module.ts

@@ -8,6 +8,7 @@ import { RouterModule } from '@angular/router';
 import { MatCardModule } from '@angular/material/card';
 import { CommonModule } from '@angular/common';
 import { BioCardComponent } from './bio-card/bio-card.component';
+import { MatIconModule } from '@angular/material/icon';
 
 
 
@@ -24,7 +25,8 @@ import { BioCardComponent } from './bio-card/bio-card.component';
  MatButtonModule,
  RouterModule,
  MatCardModule,
- CommonModule
+ CommonModule,
+ MatIconModule
  ],
  exports: [
  BioDialogComponent,