Skip to content

Commit

Permalink
🐯👑 ↝ Onboarding navigation, improved documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gizmotronn
Gizmotronn committed Jun 29, 2023
1 parent c40c442 commit 869091b
Show file tree
Hide file tree
Showing 7 changed files with 239 additions and 62 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
91 changes: 47 additions & 44 deletions components/Core/indexAuth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,50 +142,53 @@ export default function IndexAuth() {
}, [session?.user?.id])

return (
<>
<button className="bg-white rounded-full p-4" onClick={() => setShowProfile(true)}>
<div className="relative w-10 h-10">
<div className="absolute top-0 left-0 w-10 h-2 bg-gray-400 rounded-full"></div>
<div className="absolute top-4 left-0 w-2 h-4 bg-gray-400 rounded-full"></div>
<div className="absolute top-4 right-0 w-2 h-4 bg-gray-400 rounded-full"></div>
<div className="absolute bottom-0 left-0 w-4 h-2 bg-gray-400 rounded-full"></div>
<div className="absolute bottom-0 right-0 w-4 h-2 bg-gray-400 rounded-full"></div>
<div className="absolute top-2 left-2 w-6 h-6 bg-blue-400 rounded-full"></div>
</div>
</button>

{session?.user?.id && showProfile == true && (
<p></p>
)

// return (<CoreLayout>
// <>
// <button className="bg-white rounded-full p-4" onClick={() => setShowProfile(true)}>
// <div className="relative w-10 h-10">
// <div className="absolute top-0 left-0 w-10 h-2 bg-gray-400 rounded-full"></div>
// <div className="absolute top-4 left-0 w-2 h-4 bg-gray-400 rounded-full"></div>
// <div className="absolute top-4 right-0 w-2 h-4 bg-gray-400 rounded-full"></div>
// <div className="absolute bottom-0 left-0 w-4 h-2 bg-gray-400 rounded-full"></div>
// <div className="absolute bottom-0 right-0 w-4 h-2 bg-gray-400 rounded-full"></div>
// <div className="absolute top-2 left-2 w-6 h-6 bg-blue-400 rounded-full"></div>
// </div>
// </button>

// {session?.user?.id && showProfile == true && (

<center>
<h1 className="">Your profile</h1><div className="align-content: center">
// <center>
// <h1 className="">Your profile</h1><div className="align-content: center">

<br />
<AccountEditor session={session} />

<p>Username: {profile?.username}</p>
<button onClick={() => {setEditMode(true)}}>Edit Profile</button>
<div>
<input
id='username'
type='text'
className="border py-2 px-3 rounded-md mt-1"
placeholder={profile?.username}
onChange={(e) => setUsername(e.target.value)}
value={username}
/>
<button onClick={() => updateProfile({ username, avatar_url })} className="inline-flex mx-1 gap-1 bg-white rounded-md shadow-sm shadow-gray-500 py-1 px-2">
Save profile
</button>
</div>
{/* )} */}
</div></center>
)}
<Db />
<UserOnboarding />
{session?.user?.id == 'cebdc7a2-d8af-45b3-b37f-80f328ff54d6' && (
<Link legacyBehavior href='/tests/dashboard'>Test</Link>
)}
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="starsailors" data-description="Support me on Buy me a coffee!" data-message="I hope you enjoyed using Star Sailors. Please consider contributing so I can get extra features out faster." data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
</>
)
// <br />
// <AccountEditor session={session} />

// <p>Username: {profile?.username}</p>
// <button onClick={() => {setEditMode(true)}}>Edit Profile</button>
// <div>
// <input
// id='username'
// type='text'
// className="border py-2 px-3 rounded-md mt-1"
// placeholder={profile?.username}
// onChange={(e) => setUsername(e.target.value)}
// value={username}
// />
// <button onClick={() => updateProfile({ username, avatar_url })} className="inline-flex mx-1 gap-1 bg-white rounded-md shadow-sm shadow-gray-500 py-1 px-2">
// Save profile
// </button>
// </div>
// {/* )} */}
// </div></center>
// )}
// <Db />
// {/* <UserOnboarding /> */}
// {session?.user?.id == 'cebdc7a2-d8af-45b3-b37f-80f328ff54d6' && (
// <Link legacyBehavior href='/tests/dashboard'>Test</Link>
// )}
// <script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="starsailors" data-description="Support me on Buy me a coffee!" data-message="I hope you enjoyed using Star Sailors. Please consider contributing so I can get extra features out faster." data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
// </></CoreLayout>
}
24 changes: 23 additions & 1 deletion components/onboarding/LightKurve/transitMethod.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,21 @@
import Link from 'next/link';
import React from 'react';

const Instructions: React.FC = () => {
return (
<div className="max-w-3xl mx-auto py-8 px-4 font-sans">
<div className="mb-8">
<br />
<div className="flex justify-between">
<Link href="/tests/onboarding/">
<button type="submit" value="Subscribe" name="member[subscribe]" id="member_submit" className="block px-5 py-3 text-base font-medium text-white bg-blue-600 border border-transparent rounded-lg shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-300 sm:px-10">Back</button>
</Link>
<Link href="/tests/planets/"> {/* Add a component/test that the user has to pass before getting to view the next step. How do we make this persistent though? Maybe just have this for milestones, provided they've updated their basic profile information */}
<div className="float-right">
<button type="submit" value="Subscribe" name="member[subscribe]" id="member_submit" className="block px-5 py-3 text-base font-medium text-white bg-blue-600 border border-transparent rounded-lg shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-300 sm:px-10">Next</button>
</div>
</Link>
</div><br />
<h2 className="text-3xl font-bold mb-4 text-primary">
The first study we’re taking part in is the Planet Hunters project
</h2>
Expand Down Expand Up @@ -38,7 +50,17 @@ const Instructions: React.FC = () => {
<p className="text-gray-700">
There are several citizen science projects that focus on the discovery, analysis, and follow-up of exoplanets - planets outside our Solar System. The Planet Hunters TESS Coffee Chat team works in collaboration with these projects, in particular, <a href="https://www.zooniverse.org/projects/nora-dot-eisner/planet-hunters-tess" className="text-accent underline">Planet Hunters Transiting Exoplanet Survey Satellite</a> or TESS.
</p>
</div>
</div><br />
<div className="flex justify-between">
<Link href="/tests/onboarding/">
<button type="submit" value="Subscribe" name="member[subscribe]" id="member_submit" className="block px-5 py-3 text-base font-medium text-white bg-blue-600 border border-transparent rounded-lg shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-300 sm:px-10">Back</button>
</Link>
<Link href="/tests/planets/">
<div className="float-right">
<button type="submit" value="Subscribe" name="member[subscribe]" id="member_submit" className="block px-5 py-3 text-base font-medium text-white bg-blue-600 border border-transparent rounded-lg shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-300 sm:px-10">Next</button>
</div>
</Link>
</div><br />
</div>
);
};
Expand Down
38 changes: 24 additions & 14 deletions components/onboarding/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@ import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
import React from 'react';
import Login from '../../pages/login';
import { useDarkMode } from '../Globals/DarkModeToggle';
import Link from 'next/link';

const Instructions: React.FC = () => {
// User prefs
const supabase = useSupabaseClient();
const session = useSession();

// Styling hooks
const [isDarkMode, toggleDarkMode] = useDarkMode();

const [isDarkMode, toggleDarkMode] = useDarkMode();
if (!session) {
return (
<Login />
Expand All @@ -28,34 +29,43 @@ const Instructions: React.FC = () => {
</button> */}
<p className="text-gray-700">
There's a number of exciting research projects you're going to be able to contribute to!
</p>
</p> <br />
<p className="text-gray-700">
Using the transit method to find exoplanets reveals a lot of information about the planet itself - the size of the dip in light is related to the fraction of light that is being blocked out by a planet - for a given star, a larger planet means the dip is larger, and a smaller planet results in a smaller dip.
</p>
<div className="my-8">
Welcome to "Star Sailors," an exciting realm of citizen science where you'll embark on a captivating journey as a star sailor. Immerse yourself in our training program, which will guide you through various projects focused on scientific research. Get ready to explore the vast expanse of space and contribute to unraveling the mysteries of the universe.
</p> <br />
{/* <div className="my-8">
<img src="https://file.notion.so/f/s/93246fc4-b0db-46a7-b488-37a82c7e53d1/Untitled.png?id=f02de9d7-b9a6-41e9-8adc-54b773d5295b&table=block&spaceId=215717d6-87ba-4724-a957-c84891dfbb82&expirationTimestamp=1688104800000&signature=0pxfyuWzoTSrZ0Fcggay1xvDhieon_3npbbrJlHfp9g&downloadName=Untitled.png" alt="Size Estimation" className="w-full" />
</div>
</div> */}
<p className="text-gray-700">
Space-based satellites such as <a href="https://solarsystem.nasa.gov/missions/gaia/in-depth/" className="text-accent underline">Gaia</a> can tell us the size of stars that TESS looks at, meaning that when a transit event is found, its depth can be used to estimate the size of the planet.
In the training program, you'll become skilled at analyzing graphs, videos, and data to identify exoplanets—planets that orbit stars beyond our solar system. Through informative tutorials, you'll learn to decipher the intricate patterns and anomalies within the graphs, gaining expertise in making informed classifications.
</p>
</div>

<div className="mb-8">
<h2 className="text-3xl font-bold mb-4 text-primary">Why not use AI?</h2>
<h2 className="text-3xl font-bold mb-4 text-primary">Collaboration</h2>
<blockquote className="italic bg-beige p-4 border-l-4 border-accent">
<p className="text-gray-700">
You might be wondering why astronomers use visual vetting (looking at data by eye) when there are computers that can do this. Computer algorithms are very good at finding certain types of transit events; however, they also tend to miss other types of transits. More specifically, most transit search algorithms require at least two transit events for the algorithm to identify it. This means that machines are biased toward finding short period planets (planets where the duration of a year is very short) and tend to miss the longer period planets.
Collaboration is at the heart of the training program. Engage in discussions with fellow star sailors, sharing insights and exchanging ideas. Together, you'll uncover the secrets hidden within the data. Consensus is sought through collaborative decision-making, allowing the community to leverage collective knowledge.
</p>
</blockquote>
</div>

<div className="mb-8">
<h2 className="text-3xl font-bold mb-4 text-primary">Voting</h2>
<blockquote className="italic bg-beige p-4 border-l-4 border-accent">
<p className="text-gray-700">
Once discussions have taken place, it's time to cast your vote. By voting, you contribute to the collective wisdom of the star sailor community, bringing us closer to understanding the cosmos. This user flow of data analysis, discussion, and voting forms the core of the training program, which remains consistent across all projects within "Star Sailors."
</p>
</blockquote>
</div>

<div>
<h2 className="text-3xl font-bold mb-4 text-primary">Other projects/classifications</h2>
<p className="text-gray-700">
There are several citizen science projects that focus on the discovery, analysis, and follow-up of exoplanets - planets outside our Solar System. The Planet Hunters TESS Coffee Chat team works in collaboration with these projects, in particular, <a href="https://www.zooniverse.org/projects/nora-dot-eisner/planet-hunters-tess" className="text-accent underline">Planet Hunters Transiting Exoplanet Survey Satellite</a> or TESS.
Prepare for an extraordinary journey as a Star Sailor, where your contributions as a citizen scientist will shape the course of astronomical discoveries. Welcome aboard this cosmic adventure!
</p>
</div>

</div><br /><br />
{/* Add user profile section, check username :) */}
<center><Link href="/tests/onboarding/planetHunters/1"><button type="submit" value="Subscribe" name="member[subscribe]" id="member_submit" className="block px-5 py-3 text-base font-medium text-white bg-blue-600 border border-transparent rounded-lg shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-300 sm:px-10">Begin training</button></Link></center>
</div>
);
};
Expand Down
Loading

0 comments on commit 869091b

Please sign in to comment.