Website Updates (#186)

* fix: build errors on methods

* feat: update blog image & meta for twitter share link

neurofusion/next-client/public/posts/2022-12-20-entry.md

@@ -14,6 +14,8 @@ I’ve only scratched the surface of neurotechnology and I’m convinced this is
 
 ## Research Interest
 
+![Picture of whiteboard in Ore's lab](/images/blog/whiteboard_sketch.jpg)
+
 The "quantified self" is a term used for people who track and share data about their own health and productivity. This can be anything from manually writing down what they eat every day, to wearing a fitness tracker that records their steps and heart rate, to software programs that people can use to track how much time they spend working, and how productive they are during that time. What hasn't been done yet is to correlate all of this data with brain activity. I want to bring together data from different sources to get a better understanding of how we spend our days, and how we can get the most from them.1
 
 Improvements in neuroscience have resulted in the development of low-cost BCIs (brain-computer interfaces) that can record EEG (electroencephalogram) activity. However, adoption of BCIs has been limited to niche applications leaving hobbyists without specific domain knowledge waiting for scenarios where BCIs could provide value to them.
@@ -32,6 +34,8 @@ One thought at the back of my mind going into this:
 
 ## _The unexamined life is not worth living - Socrates_
 
+![Animated Image of Ore looking ahead](/images/blog/looking_ahead.jpg)
+
 ## What’s the plan?
 
 Short answer - I’m still figuring it out.
@@ -72,10 +76,10 @@ If anything peaks your fancy and you’d like to join me on this quest, shoot me
 
 Thanks for reading Fusion Newsletter!! Subscribe for free to receive new posts and join me on the journey.
 
-1. How Self-tracking and the Quantified Self Promote Health and Well-being: Systematic Review https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8493454/
+1. [How Self-tracking and the Quantified Self Promote Health and Well-being: Systematic Review https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8493454/](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8493454/)
 
-1. EEG power spectral measures of cognitive workload: A meta-analysis https://onlinelibrary.wiley.com/doi/10.1111/psyp.14009
+1. [EEG power spectral measures of cognitive workload: A meta-analysis https://onlinelibrary.wiley.com/doi/10.1111/psyp.14009](https://onlinelibrary.wiley.com/doi/10.1111/psyp.14009)
 
-1. Easing Into Open Science: A Guide for Graduate Students and Their Advisors https://online.ucpress.edu/collabra/article/7/1/18684/115927/Easing-Into-Open-Science-A-Guide-for-Graduate
+1. [Easing Into Open Science: A Guide for Graduate Students and Their Advisors https://online.ucpress.edu/collabra/article/7/1/18684/115927/Easing-Into-Open-Science-A-Guide-for-Graduate](https://online.ucpress.edu/collabra/article/7/1/18684/115927/Easing-Into-Open-Science-A-Guide-for-Graduate)
 
-1. Square Signals : Satisfaction and progress in open-ended work https://blog.andymatuschak.org/post/159979927467/satisfaction-and-progress-in-open-ended-work
+1. [Square Signals : Satisfaction and progress in open-ended work https://blog.andymatuschak.org/post/159979927467/satisfaction-and-progress-in-open-ended-work](https://blog.andymatuschak.org/post/159979927467/satisfaction-and-progress-in-open-ended-work)

neurofusion/next-client/public/posts/2023-01-31-entry1.md

@@ -1,5 +1,5 @@
 ---
-title: "Entry #01: What does making your health & behaviour data accessible even mean?"
+title: "What does making your health & behaviour data accessible even mean?"
 description: notes on what I've gathered so far!
 publishedDate: 2023/01/31
 coverImage: /images/blog/health-behavior.webp
@@ -10,7 +10,7 @@ authors:
   - Ore Ogundipe
 ---
 
-Sometime in the past month, I watched “Brain On Fire”1 on Netflix and - in true Ore fashion - found myself googling “how to be a trained neurologist?”
+Sometime in the past month, I watched “Brain On Fire”<sup>1</sup> on Netflix and - in true Ore fashion - found myself googling “how to be a trained neurologist?”
 
 The main character, Susannah, experiences a rapid decline in her health within a month, and the process of finding out what is wrong with her is a difficult and uphill battle. The film highlights the importance of being able to understand and identify symptoms in order to effectively diagnose and treat neurological conditions, as well as the difficulties that can arise when symptoms are not easily visible.
 
@@ -32,9 +32,11 @@ Here is paper from a recent study that shows the relationship between some of th
 
 With my Oura, for example, I know that my sleep is critical for me to have a chance of being my best self. Once I start to slip up, I immediately try to course correct because I know it’ll help in the long run.
 
+![Screenshot from the Oura app showing my sleep data over time. This was me self-correcting after days of poor sleep!](/images/blog/oura_sleep_screenshot.jpg)
+
 ### 2. Events
 
-In a section of “Reading our minds”3, the author attests to how feeble our memory is. You can remember clearly how you felt when you had lunch yesterday afternoon, but trying to recall how you felt doing the same thing exactly 2 weeks ago is a challenging task at best.
+In a section of “Reading our minds”<sup>3</sup>, the author attests to how feeble our memory is. You can remember clearly how you felt when you had lunch yesterday afternoon, but trying to recall how you felt doing the same thing exactly 2 weeks ago is a challenging task at best.
 
 However, it's these small changes over time that lead to certain outcomes. Psychologists and psychiatrists have adopted these methods of self-evaluation based on different criteria, but they can be limited in their ability to capture the complexity of our emotional experiences. There are broadly two approaches to subjective measurement of emotional states individually:
 
@@ -46,7 +48,7 @@ Imagine a future where you can look through your history when you start feeling
 
 ---
 
-## _“How we spend our days is of course, how we spend our lives” - Annie Dillard_
+_“How we spend our days is of course, how we spend our lives” - Annie Dillard_
 
 ---
 
@@ -58,14 +60,20 @@ In the background, watcher apps like Magicflow & ActivityWatch capture what tab
 
 Now that I have agency over how I spend my days, this has been a very helpful tool to help me quickly self correct, I look through the data often and then manually checkout my health data also to see if there are tweaks I can make. It also good to when it’s time to slow down - while deep work is nice, but I’m not a robot.
 
+![Screenshot of my computer screentime through the month of January](/images/blog/magicflow_screentime.jpg)
+
 ### 4. Brain Power
 
 Neurons in your brain are constantly transmitting information - even as you’re reading this now. As this happens, an action potential is generated for every exchange (read as: electricity). By using a method called electroencephalography (EEG). We can place on the scalp to record electric activity from different regions of the brain and decompose a time period - for example 5mins of eyes closed - into the frequency waves that make it up4.
 
-Brain wave frequency are of 5 types: Delta [1-4Hz], Theta [4-8Hz], Alpha [8-12Hz], Beta [12-25Hz], Gamma [>25Hz]5. A combination of these essentially represent the state of mind of a person in time - deducing this is where the magic is at. The thing about brain data - at least EEG - is that currently, if you don’t tag what you’re recording there’s nothing to compare it with, reducing it’s value.
+Brain wave frequency are of 5 types: Delta [1-4Hz], Theta [4-8Hz], Alpha [8-12Hz], Beta [12-25Hz], Gamma [>25Hz]<sup>5</sup>. A combination of these essentially represent the state of mind of a person in time - deducing this is where the magic is at. The thing about brain data - at least EEG - is that currently, if you don’t tag what you’re recording there’s nothing to compare it with, reducing it’s value.
+
+![Screenshot of absolute delta & alpha power for a 10mins - eyes closed - session of brain activity displayed on the Fusion Explorer](/images/blog/fusion_brain_power_vis.png)
 
 Now, there’s a lot of hypothesis about what the ratio in changes between the brain frequency bands mean, but often times, when I’ve taken my recorded data to people with expertise and asked questions about the frequency band changes the conversation usually goes like this.
 
+![Making sense of brain data](/images/blog/confused_about_explaining_braindata.jpg)
+
 First of all, credit to them for not lying to me, but I was also disappointed. Overcoming that, I've since tweaked my approach to recording brain activity over multiple days with sufficient tagging. So far the results from my data have been quite interesting (to me) - but that could also be because I’m eternally optimistic. I don’t have any concrete insights to share here (yet), but best believe, you’d be the first to know once I do!
 
 I’ve also found a study exploring the EEG power profiles of twins as a marker as a biomarker of wellbeing6. In the study, researchers picked a sample of twins, recorded their resting state - eyes closed - EEG and also had them fill out surveys on their subject measures of wellbeing. With some analysis, they were able to place participants into high, moderate & low wellbeing groups based on a combination of their Alpha, Beta & Delta power.
@@ -102,15 +110,15 @@ This however, doesn’t mean that all hope is lost, I’m confident that things
 
 As you’ve probably already picked up, this is a lot of sensitive information about you. We’re already at a time where the model of the internet is set up to capitalize on your data and serve you ads. There are companies with great values who go through great lengths to assure that your data privacy & usage ethical but it’s on a “trust me, bro” basis.
 
-Can we do better than this? - I think so. I’ll likely deep dive in another entry but for now, the long story short is that I’d be leveraging the 4th "Nostr Implementation Possibility" aka. NIP047 for data transfer that ensure encryption from source to data storage and a single key pair which can be changed over time.
+Can we do better than this? - I think so. I’ll likely deep dive in another entry but for now, the long story short is that I’d be leveraging the 4th "Nostr Implementation Possibility" aka. NIP04<sup>7</sup> for data transfer that ensure encryption from source to data storage and a single key pair which can be changed over time.
 
 <blockquote class="twitter-tweet"><p lang="en" dir="ltr">veryyyyy tempted to use this for data transfer on neurofusion - no worrying about who has access/can see your data<br><br>you package data &amp; only someone with shared key can unpackage it <a href="https://t.co/E8FF6fIqhV">https://t.co/E8FF6fIqhV</a></p>&mdash; Ọrẹ Ògúndípẹ̀ 🧠 (@OgundipeOre) <a href="https://twitter.com/OgundipeOre/status/1619161456800579585?ref_src=twsrc%5Etfw">January 28, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 
 ## Authenticity of pursuit
 
 ---
 
-## _Everyday I wake up and get to push the bounds of my understanding here is a privilege that I don’t take for granted_
+_Everyday I wake up and get to push the bounds of my understanding here is a privilege that I don’t take for granted_
 
 Time really does go by fast! It’s already been a month being fully invested in this. I’m much clearer about what parts of this effort gets tagged as research & what parts can be a product other people can use.
 
@@ -139,10 +147,10 @@ Ore!
 
 ---
 
-1. Brain on Fire (film) - Wikipedia
-2. How people wake up is associated with previous night’s sleep together with physical activity and food intake | Nature Communications
-3. Reading Our Minds: The Rise of Big Data Psychiatry - Daniel Barron - Google Books
-4. A Primer on EEG Spectrograms - PMC (nih.gov)
-5. EEG (Electroencephalography): The Complete Pocket Guide - iMotions
-6. Ore’s notes on the paper - EEG Profiles as a biomarker of wellbeing, a twin study
-7. nips/04.md at master · nostr-protocol/nips (github.com)
+1. [Brain on Fire (film) - Wikipedia](<https://en.wikipedia.org/wiki/Brain_on_Fire_(film)>)
+2. [How people wake up is associated with previous night’s sleep together with physical activity and food intake | Nature Communications](https://www.nature.com/articles/s41467-022-34503-2)
+3. [Reading Our Minds: The Rise of Big Data Psychiatry - Daniel Barron - Google Books](https://books.google.ca/books/about/Reading_Our_Minds.html?id=3NPfzQEACAAJ&redir_esc=y)
+4. [A Primer on EEG Spectrograms - PMC (nih.gov)](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8901534/)
+5. [EEG (Electroencephalography): The Complete Pocket Guide - iMotions](https://imotions.com/blog/learning/best-practice/eeg/#eeg-frequency-ranges-frequency-bands)
+6. [Ore’s notes on the paper - EEG Profiles as a biomarker of wellbeing, a twin study](https://www.notion.so/Electroencephalography-profiles-as-a-biomarker-of-wellbeing-A-twin-study-sciencedirectassets-com-c660b5d9dbe546c1929f926677e60500)
+7. [nips/04.md at master · nostr-protocol/nips (github.com)](https://github.com/nostr-protocol/nips/blob/master/04.md)

neurofusion/next-client/src/components/layouts/meta.tsx

@@ -64,11 +64,15 @@ export const Meta = ({ meta: pageMeta }: { meta?: Partial<MetaSeo> }) => {
       <meta property="og:image:height" content="628" />
       {/** End OpenGraph Metadata */}
       {/** Twitter Metadata */}
-      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:card" content="app" />
       <meta name="twitter:site" content="@usefusionapp" />
       <meta name="twitter:title" content={meta.title} />
       <meta name="twitter:description" content={meta.description} />
       <meta name="twitter:image" content={meta.image} />
+      <meta name="twitter:app:name:iphone" content="Fusion Copilot" />
+      <meta name="twitter:app:id:iphone" content="6445860500" />
+      <meta name="twitter:app:name:googleplay" content="Fusion Copilot" />
+      <meta name="twitter:app:id:googleplay" content="com.neurofusion.fusion" />
       {/** End Twitter Metadata */}
     </Head>
   );

neurofusion/next-client/src/pages/analysis.tsx

@@ -13,15 +13,17 @@ interface ResponseImage {
 }
 
 const AnalysisPage: NextPage = () => {
-  const [file, setFile] = useState(null);
+  const [file, setFile] = useState<File | null>(null);
 
   const [images, setImages] = useState<ResponseImage[]>([]);
   const [loading, setLoading] = useState(false);
 
-  const handleFileChange = (e: { target: { files: React.SetStateAction<null>[] } }) => {
-    setFile(e.target.files[0]);
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      setFile(files[0]);
+    }
   };
-
   const handleUpload = async () => {
     // TODO: support multiple file uploads for comparison
     if (file) {

neurofusion/next-client/src/pages/integrations.tsx

@@ -4,11 +4,16 @@ import { getServerSession } from "next-auth";
 import { authOptions } from "./api/auth/[...nextauth]";
 
 import { IntegrationsContainer } from "~/components/features/integrations";
-import { DashboardLayout } from "~/components/layouts";
+import { DashboardLayout, Meta } from "~/components/layouts";
 
 const IntegrationsPage: NextPage = () => {
   return (
     <DashboardLayout>
+      <Meta
+        meta={{
+          title: "Integrations | Fusion - Personal Insights from your daily habits and actions",
+        }}
+      />
       <IntegrationsContainer />
     </DashboardLayout>
   );

neurofusion/next-client/src/pages/playground.tsx

@@ -5,7 +5,7 @@ import React, { use, useEffect } from "react";
 import { authOptions } from "./api/auth/[...nextauth]";
 
 import { Experiment } from "~/components/lab";
-import { DashboardLayout } from "~/components/layouts";
+import { DashboardLayout, Meta } from "~/components/layouts";
 import { IExperiment } from "~/@types";
 
 const PlaygroundPage: NextPage = () => {
@@ -90,11 +90,16 @@ const PlaygroundPage: NextPage = () => {
 
   return (
     <DashboardLayout>
+      <Meta
+        meta={{
+          title: "Playground | Fusion Explorer",
+        }}
+      />
       <h1 className="text-4xl">Playground</h1>
-      <label htmlFor="countries" className="my-2 block text-sm font-medium text-gray-900 dark:text-white">
+      <label htmlFor="activity" className="my-2 block text-sm font-medium text-gray-900 dark:text-white">
         Select activity:
         <select
-          id="countries"
+          id="activity"
           className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-indigo-500 dark:focus:ring-indigo-500"
           onChange={handleExperimentSelect}
           value={activeExperiment.name}