Skip to content

Update news #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
keckelt wants to merge 10 commits into
base: develop
Choose a base branch
from
Draft

Update news #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c387816
remove outdated yarn.lock
keckelt Oct 4, 2022
11565c2
reformat git dependencies
keckelt Oct 4, 2022
728c415
add RouterScrollToTop to coral public
keckelt Oct 4, 2022
7d65e73
add canvas-confetti dependency
keckelt Oct 4, 2022
9de4022
format coda
keckelt Oct 4, 2022
695a56a
temporary switch coral branch to dev_d3_merge_fix
keckelt Oct 4, 2022
60822a2
Revert "temporary switch coral branch to dev_d3_merge_fix"
keckelt Oct 5, 2022
42b63b6
prepare news page update
keckelt Oct 6, 2022
b1cb899
Merge branch 'develop' into update_news
keckelt Jan 13, 2023
fdd470e
linting changes
keckelt Jan 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 64 additions & 31 deletions src/pages/NewsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,47 @@
import * as React from 'react';
import {HeaderNavigation, OrdinoFooter, OrdinoScrollspy, OrdinoScrollspyItem, useScrollToSlug} from 'ordino';
import {Link} from 'react-router-dom';
import { HeaderNavigation, OrdinoFooter, OrdinoScrollspy, OrdinoScrollspyItem, useScrollToSlug } from 'ordino';
import { Link } from 'react-router-dom';
import confetti from 'canvas-confetti';

import { hasCookie } from 'coral';
import coralHero from '../assets/coral-hero.png';
import newSession from '../assets/news/new_session.png';
import exportCohorts from '../assets/news/export_cohorts.png';
import {hasCookie} from 'coral';

const sections = [
// The versions refer to the version of the product!, i.e., https://github.com/Caleydo/coral_product/blob/develop/package.json
{
id: 'v3',
name: 'Version 3',
date: '2022-08-04',
markup: () => (
<>
<p className="lead text-muted">
This update contains various <b>usability improvements</b> and several <b>bug fixes</b>. The most important changes are:
</p>
<ul>
<li>New Colors</li>
</ul>
</>
),
},
{
id: 'v2',
name: 'Version 2',
date: '2022-05-02',
markup: () => (
<>
<p className="lead text-muted">
This update contains various <b>usability improvements</b> and several <b>bug fixes</b>. The most important changes are:
</p>
<ul>
<li>New Colors</li>
<li>new prevalence</li>
<li>cohort numbers</li>
</ul>
</>
),
},
{
id: 'v1-2',
name: 'Version 1.2',
Expand All @@ -20,13 +53,10 @@ const sections = [
</p>
<h5 className="mt-4">Export Cohorts</h5>
<ul>
<li>It is now possible to export cohorts as a CSV-file from Coral and continue the analysis elsewhere.</li>
<li>
It is now possible to export cohorts as a CSV-file from Coral and continue the analysis elsewhere.
</li>
<li>
<b>How to</b>: Open the <i>Inspect Items</i> operation and add any attributes you would like to include in the export.
As soon as the data is loaded the export button will be displayed in the top right of the operation area.
The exported data will match the displayed table.
<b>How to</b>: Open the <i>Inspect Items</i> operation and add any attributes you would like to include in the export. As soon as the data is loaded
the export button will be displayed in the top right of the operation area. The exported data will match the displayed table.
</li>
</ul>
<img className="img-fluid border border-gray-300" src={exportCohorts} alt="Export cohorts" />
Expand All @@ -46,7 +76,7 @@ const sections = [
</li>
</ul>
</>
)
),
},
{
id: 'v1-0',
Expand All @@ -57,52 +87,55 @@ const sections = [
<h4 className="my-4">Hello Coral! 🐣</h4>

<p>
This is the first release of Coral.
Coral is a cohort analysis tool to interactively create and refine cohorts, which can then be compared, characterized, and inspected down to the level of single items.
This is the first release of Coral. Coral is a cohort analysis tool to interactively create and refine cohorts, which can then be compared,
characterized, and inspected down to the level of single items.
</p>

<img className="img-fluid mb-4" src={coralHero} alt="Screenshot of an analysis in Coral." />

<p>
Coral comes with this dedicated homepage to welcome new users, providing an overview of <Link to="/features">the features</Link>, <Link to="/datasets">available datasets</Link>, and <Link to="/publications">publications</Link>.
For an overview of Coral's features, we also provide an <Link to="/help">introductory video</Link> to get to know Coral.
Coral comes with this dedicated homepage to welcome new users, providing an overview of <Link to="/features">the features</Link>,{' '}
<Link to="/datasets">available datasets</Link>, and <Link to="/publications">publications</Link>. For an overview of Coral&apos;s features, we also
provide an <Link to="/help">introductory video</Link> to get to know Coral.
</p>

<p>
In the future, we will also present the most recent changes and developments here. <br />
You can skip this welcome page and start the analysis in Coral directly, by going to the <a href="./app" target="_blank" rel="noopener noreferrer"><code>/app</code></a> subsite.
You can skip this welcome page and start the analysis in Coral directly, by going to the{' '}
<a href="./app" target="_blank" rel="noopener noreferrer">
<code>/app</code>
</a>{' '}
subsite.
</p>
</>
)
}
),
},
];



export function NewsPage() {
useScrollToSlug();

React.useEffect(() => {
const celebrationCookieKey = sections[0]?.id + '_celebrated';
const celebrationCookieKey = `${sections[0]?.id}_celebrated`;
if (!hasCookie(celebrationCookieKey)) {
document.cookie = `${celebrationCookieKey}=true; SameSite=Lax;`;

// only celebrate recent releases
const timeDiff = new Date().getTime() - new Date(sections[0].date).getTime();
const maxTimeDiff = 2 * 7 * 24 * 60 * 60 * 1000; // two weeks in millis
if (timeDiff < maxTimeDiff) {
confetti({particleCount: 150, spread: 100, origin: {x: 0.2, y: 0.7}, angle: 45});
confetti({particleCount: 150, spread: 100, origin: {x: 0.7, y: 0.7}, angle: 135});
confetti({ particleCount: 150, spread: 100, origin: { x: 0.2, y: 0.7 }, angle: 45 });
confetti({ particleCount: 150, spread: 100, origin: { x: 0.7, y: 0.7 }, angle: 135 });
}
}
}, []);

return (
<>
<HeaderNavigation bg="none"></HeaderNavigation>
<HeaderNavigation bg="none" />
<div className="position-relative py-6">
<OrdinoScrollspy items={sections.map((section) => ({id: section.id, name: section.name}))}>
{(handleOnChange) =>
<OrdinoScrollspy items={sections.map((section) => ({ id: section.id, name: section.name }))}>
{(handleOnChange) => (
<>
<div className="container pb-6">
<div className="row">
Expand All @@ -112,11 +145,11 @@ export function NewsPage() {
// `id` attribute must match the one in the scrollspy
<OrdinoScrollspyItem className="pt-6" id={item.id} key={item.name} index={index} handleOnChange={handleOnChange}>
<>
<h4 className="text-start mt-2 d-flex align-items-center mb-3"><i className="me-2 ordino-icon-1 fas fa-chevron-circle-right"></i> {item.name} ({item.date})</h4>
<h4 className="text-start mt-2 d-flex align-items-center mb-3">
<i className="me-2 ordino-icon-1 fas fa-chevron-circle-right" /> {item.name} ({item.date})
</h4>
<div className="card shadow-sm h-100">
<div className="card-body">
{item.markup()}
</div>
<div className="card-body">{item.markup()}</div>
</div>
</>
</OrdinoScrollspyItem>
Expand All @@ -125,9 +158,9 @@ export function NewsPage() {
</div>
</div>
</div>
<OrdinoFooter></OrdinoFooter>
<OrdinoFooter />
</>
}
)}
</OrdinoScrollspy>
</div>
</>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/components/CoralTeaserCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ export function CoralTeaserCards() {
<div className="card shadow-sm h-100">
<div className="card-body">
<p className="card-text">
🎉 It's the 2-year anniversary of Coral and we're happy to launch Coral v1.0! 🚀
🎉 It's the 3-year anniversary of Coral! 🎉
</p>
<p className="card-text">
This websites introduces Coral's <Link to="/features">features</Link>, the <Link to="/datasets">available datasets</Link>, and <Link to="/publications">publications</Link>.
We also provide an <Link to="/help">introductory video</Link> to get to know Coral.
</p>
<p className="card-text">
In the upcoming releases, we will focus improving the usability and interactions with Coral.
In the upcoming releases, we will focus on improving the usability and interactions with Coral.
</p>
</div>
<div className="card-footer"><Link to="/news" className="btn btn-light"><i className="me-1 fas fa-angle-right"></i> Read the release notes</Link></div>
Expand Down