From 0123448838fe0360dcdaf6db421c988c2d362cd5 Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Wed, 25 Sep 2024 14:46:48 +1000 Subject: [PATCH 1/9] feat: add carousel to home page (#66) --- .../components/Carousel/cards/constants.ts | 11 +++ .../components/Carousel/carousel.styles.ts | 46 ++++++++++ .../components/Carousel/carousel.tsx | 29 ++++++ .../components/Carousel/common/constants.ts | 11 +++ .../components/Carousel/common/utils.ts | 77 ++++++++++++++++ .../Carousel/components/Cards/cards.styles.ts | 92 +++++++++++++++++++ .../Carousel/components/Cards/cards.tsx | 32 +++++++ .../components/Carousel/content/index.tsx | 2 + .../Carousel/content/learnToAnalyzeData.mdx | 3 + .../shareUsageAndJoinAdvisoryPanel.mdx | 11 +++ .../Carousel/hooks/useInteractiveCarousel.ts | 50 ++++++++++ .../SectionHero/components/Hero/hero.tsx | 34 +++---- .../SectionHero/sectionHero.styles.ts | 76 +++++++-------- .../components/SectionHero/sectionHero.tsx | 42 +++------ .../SectionHero/components/Hero/hero.tsx | 2 +- .../common/Bullets/bullets.styles.ts | 22 ++--- app/components/common/Bullets/bullets.tsx | 7 +- mdx-components.tsx | 2 + 18 files changed, 440 insertions(+), 109 deletions(-) create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/cards/constants.ts create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.styles.ts create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.tsx create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/common/utils.ts create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.tsx create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/content/index.tsx create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/hooks/useInteractiveCarousel.ts diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/cards/constants.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/cards/constants.ts new file mode 100644 index 0000000..0c25329 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/cards/constants.ts @@ -0,0 +1,11 @@ +import { CardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card"; +import * as MDX from "../content"; + +export const CAROUSEL_CARDS: Pick[] = [ + { + text: MDX.ShareUsageAndJoinAdvisoryPanel({}), + }, + { + text: MDX.LearnToAnalyzeData({}), + }, +]; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.styles.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.styles.ts new file mode 100644 index 0000000..7ce1669 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.styles.ts @@ -0,0 +1,46 @@ +import { + mediaDesktopSmallUp, + mediaTabletUp, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import styled from "@emotion/styled"; +import { Bullets } from "../../../../../../../common/Bullets/bullets"; +import { + CAROUSEL_HEIGHT, + CAROUSEL_HEIGHT_SM, + MAX_CARD_WIDTH, +} from "./common/constants"; + +export const CarouselView = styled.div` + grid-column: 1 / -1; + max-width: ${MAX_CARD_WIDTH}px; + width: 100%; + + ${mediaDesktopSmallUp} { + grid-column: 7 / -1; + grid-row: 1 / 3; + justify-self: flex-end; + } +`; + +export const Carousel = styled.div` + cursor: grab; + height: ${CAROUSEL_HEIGHT_SM}px; + position: relative; /* Positions CardPositioner. */ + user-select: none; + + &:active { + cursor: grabbing; + } + + ${mediaTabletUp} { + height: ${CAROUSEL_HEIGHT}px; + } +`; + +export const StyledBullets = styled(Bullets)` + bottom: 14px; + left: 50%; + position: absolute; + transform: translateX(-50%); + z-index: 100; +`; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.tsx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.tsx new file mode 100644 index 0000000..10eb703 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.tsx @@ -0,0 +1,29 @@ +import { + Carousel as CarouselCards, + CarouselView, + StyledBullets, +} from "./carousel.styles"; +import { Cards } from "./components/Cards/cards"; +import { useInteractiveCarousel } from "./hooks/useInteractiveCarousel"; + +export const Carousel = (): JSX.Element => { + const { + activeIndex, + interactiveAction, + interactiveCards, + interactiveIndexes, + onSetActiveIndex, + } = useInteractiveCarousel(); + return ( + + + + + + + ); +}; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts new file mode 100644 index 0000000..7ac18f5 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts @@ -0,0 +1,11 @@ +export const CARD_OFFSET_Y = 8; +export const CARD_SCALE_X = 40; +export const MAX_CARD_HEIGHT = 216; +export const MAX_CARD_HEIGHT_SM = 216; +export const MAX_DECK_SIZE = 1; // Currently, deck size is only 1 additional card. +export const MAX_CARD_WIDTH = 504; +export const CAROUSEL_HEIGHT = MAX_CARD_HEIGHT + MAX_DECK_SIZE * CARD_OFFSET_Y; +export const CAROUSEL_HEIGHT_SM = + MAX_CARD_HEIGHT_SM + MAX_DECK_SIZE * CARD_OFFSET_Y; +export const TRANSITION_DELAY = 100; +export const TRANSITION_DURATION = 100; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/utils.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/utils.ts new file mode 100644 index 0000000..058ea65 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/utils.ts @@ -0,0 +1,77 @@ +import { + CARD_OFFSET_Y, + CARD_SCALE_X, + MAX_CARD_WIDTH, + MAX_DECK_SIZE, + TRANSITION_DELAY, + TRANSITION_DURATION, +} from "./constants"; + +/** + * Returns the carousel card's position in the deck. + * @param index - Card index. + * @param activeIndex - Active index. + * @param lastIndex - Last index. + * @returns card position (position zero to deck size). + */ +export function getCardPosition( + index: number, + activeIndex: number, + lastIndex: number +): number { + const order = index - activeIndex; + if (order >= 0) return order; + // If the order is negative, stack the card to the end of the deck. + // Grab the last (positive) position in the deck and add the card position (index + 1). + return lastIndex - activeIndex + index + 1; +} + +/** + * Returns the carousel card's x-axis scale. + * @param cardPosition - Card position. + * @returns card x-axis scale. + */ +export function getCardScaleX(cardPosition: number): string { + if (cardPosition === 0) return "scaleX(1)"; // The active card is scaled to 1. + return `scaleX(${ + (MAX_CARD_WIDTH - cardPosition * CARD_SCALE_X) / MAX_CARD_WIDTH + })`; +} + +/** + * Returns the carousel card's transform scaleX and translateY. + * @param cardPosition - Card position. + * @returns card transform. + */ +export function getCardTransform(cardPosition: number): string { + return `${getCardScaleX(cardPosition)} ${getCardTranslateY(cardPosition)}`; +} + +/** + * Returns the carousel card's transition. + * @param cardPosition - Card position. + * @returns card transition. + */ +export function getCardTransition(cardPosition: number): string { + return `all ${TRANSITION_DURATION}ms ease-in-out ${ + cardPosition * TRANSITION_DELAY + }ms, z-index 0ms ${TRANSITION_DELAY}ms`; +} + +/** + * Returns the carousel card's y-axis offset. + * @param cardPosition - Card position. + * @returns y-axis offset. + */ +export function getCardTranslateY(cardPosition: number): string { + return `translateY(${(MAX_DECK_SIZE - cardPosition) * CARD_OFFSET_Y}px)`; +} + +/** + * Returns the carousel card's z-index. + * @param cardPosition - Card position. + * @returns card z-index. + */ +export function getCardZIndex(cardPosition: number): number { + return MAX_DECK_SIZE - cardPosition; +} diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts new file mode 100644 index 0000000..db4a36a --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts @@ -0,0 +1,92 @@ +import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import { + inkLight, + smokeMain, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import { + textBody500, + textBodyLarge500, + textBodySmall4002Lines, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; +import { elevation01 } from "@databiosphere/findable-ui/lib/theme/common/shadows"; +import styled from "@emotion/styled"; +import { ButtonBase as MButtonBase, Card as MCard } from "@mui/material"; +import { + MAX_CARD_HEIGHT, + MAX_CARD_HEIGHT_SM, + MAX_CARD_WIDTH, +} from "../../common/constants"; +import { + getCardTransform, + getCardTransition, + getCardZIndex, +} from "../../common/utils"; + +interface Props { + cardPosition: number; +} + +export const CardPositioner = styled("div")` + display: grid; + height: 100%; + max-height: ${MAX_CARD_HEIGHT_SM}px; + max-width: ${MAX_CARD_WIDTH}px; + position: absolute; + transform: ${({ cardPosition }) => getCardTransform(cardPosition)}; + transition: ${({ cardPosition }) => getCardTransition(cardPosition)}; + width: 100%; + z-index: ${({ cardPosition }) => getCardZIndex(cardPosition)}; + + ${mediaTabletUp} { + max-height: ${MAX_CARD_HEIGHT}px; + } +`; + +export const Card = styled(MCard)` + border: none; + box-shadow: ${elevation01}, inset 0 0 0 1px ${smokeMain}; + display: flex; + height: 100%; + width: 100%; +` as typeof MCard; + +export const CardSection = styled.div` + display: flex; + flex: 1; + flex-direction: column; + padding: 24px; +`; + +export const CardContent = styled.div` + h1, + h2, + h3 { + ${textBodyLarge500}; + margin: 0; + } + + p { + ${textBodySmall4002Lines}; + color: ${inkLight}; + margin: 8px 0; + + &:last-of-type { + margin-bottom: 0; + } + } +`; + +export const CardCallToAction = styled(MButtonBase)` + &.MuiButtonBase-root { + ${textBody500}; + color: #28285b; + margin-top: 16px; + text-decoration: underline; + text-decoration-skip-ink: none; + text-underline-position: from-font; + + &:hover { + text-decoration: none; + } + } +`; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.tsx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.tsx new file mode 100644 index 0000000..b475bff --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.tsx @@ -0,0 +1,32 @@ +import { CardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card"; +import { RoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles"; +import { Fragment } from "react"; +import { getCardPosition } from "../../common/utils"; +import { Card, CardContent, CardPositioner, CardSection } from "./cards.styles"; + +export interface CardsProps { + activeIndex: number; + cards: CardProps[]; +} + +export const Cards = ({ activeIndex, cards }: CardsProps): JSX.Element => { + const lastIndex = cards.length - 1; + return ( + + {cards.map(({ text }, c) => { + return ( + + + + {text} + + + + ); + })} + + ); +}; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/index.tsx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/index.tsx new file mode 100644 index 0000000..f2b2a8a --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/index.tsx @@ -0,0 +1,2 @@ +export { default as LearnToAnalyzeData } from "./learnToAnalyzeData.mdx"; +export { default as ShareUsageAndJoinAdvisoryPanel } from "./shareUsageAndJoinAdvisoryPanel.mdx"; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx new file mode 100644 index 0000000..8db9387 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx @@ -0,0 +1,3 @@ +### Learn how to analyze your data! + +The new BRC-analytics platform will make heavy use of the Galaxy platform for analysis of data. To learn how to use this system or to improve your already existing skills enroll into [Galaxy Academy 2024](https://training.galaxyproject.org/training-material/events/galaxy-academy-2024.html). The Academy is a global online training event that will take place October 7 - 11, 2024. For more information please see [the event page](https://training.galaxyproject.org/training-material/events/galaxy-academy-2024.html). Note that free registration is required. diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx new file mode 100644 index 0000000..54d19b5 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx @@ -0,0 +1,11 @@ +### Share your usage and join our advisory panel. + +BRC Analytics is actively evolving to provide comprehensive data access and analytical tools for all 785 eukaryotic pathogens, host taxa, and vectors previously supported by VEuPathDB.We need your help to improve—share your usage patterns and join our design advisory panel to help shape the future of the platform. + + + Get Involved + diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/hooks/useInteractiveCarousel.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/hooks/useInteractiveCarousel.ts new file mode 100644 index 0000000..996fe42 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/hooks/useInteractiveCarousel.ts @@ -0,0 +1,50 @@ +import { CardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card"; +import { useMemo } from "react"; +import { + UseSwipeInteraction, + useSwipeInteraction, +} from "../../../../../../../../../hooks/useSwipeInteraction/useSwipeInteraction"; +import { CAROUSEL_CARDS } from "../cards/constants"; + +export interface UseInteractiveCarousel { + activeIndex: UseSwipeInteraction["activeIndex"]; + interactiveAction?: UseSwipeInteraction["interactiveAction"]; + interactiveCards: CardProps[]; + interactiveIndexes: number[]; + onSetActiveIndex: UseSwipeInteraction["onSetActiveIndex"]; + onSetSwipeAction: UseSwipeInteraction["onSetSwipeAction"]; +} + +/** + * Facilitates interaction capabilities for the carousel. + * @returns carousel cards, interactive indexes, and interactive actions. + */ +export function useInteractiveCarousel(): UseInteractiveCarousel { + // Raw carousel cards. + const carouselCards = CAROUSEL_CARDS; + // Get the interactive indexes. + const interactiveIndexes = useMemo( + () => buildInteractiveIndexes(carouselCards), + [carouselCards] + ); + // Get the active index and interactive actions. + const swipeInteraction = useSwipeInteraction( + interactiveIndexes.length, + true, + 8000 + ); + return { + interactiveCards: carouselCards, + interactiveIndexes, + ...swipeInteraction, + }; +} + +/** + * Returns array of interactive indexes. + * @param cards - Cards. + * @returns a list of indexes that are interactive. + */ +function buildInteractiveIndexes(cards: CardProps[]): number[] { + return [...Array(cards.length).keys()]; +} diff --git a/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx b/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx index 17fd3fe..c90f23a 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx +++ b/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx @@ -8,7 +8,6 @@ import { Height, } from "../../../../../../../Layout/components/Hero/common/entities"; import { - getElementHref, getFillUrl, getViewBox, } from "../../../../../../../Layout/components/Hero/common/utils"; @@ -27,7 +26,7 @@ export interface HeroProps { export const Hero = ({ gridSize = GRID_SIZE, - height = GRID_SIZE * 3, + height = gridSize * 4, }: HeroProps): JSX.Element => { return ( - {[ - ELEMENT_ID.PATTERN_SMOKE_RECT, - ELEMENT_ID.PATTERN_SMOKE_CIRCLE, - // ELEMENT_ID.PATTERN_BLUE_RECT, - // ELEMENT_ID.PATTERN_YELLOW_RECT, - ].map((elementId) => ( - - - - ))} - {/**/} - + {[ELEMENT_ID.PATTERN_SMOKE_RECT, ELEMENT_ID.PATTERN_SMOKE_CIRCLE].map( + (elementId) => ( + + + + ) + )} ); }; diff --git a/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts b/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts index d2a3fc9..30fdee3 100644 --- a/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts +++ b/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts @@ -1,12 +1,10 @@ -import { - mediaDesktopSmallUp, - mediaTabletUp, -} from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import { mediaDesktopSmallUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; import { inkLight, smokeLightest, } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; -import { textBodyLarge400 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; +import { textBodyLarge4002Lines } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; +import { black } from "@databiosphere/findable-ui/lib/theme/common/palette"; import styled from "@emotion/styled"; import { section, @@ -25,68 +23,56 @@ export const Section = styled.section` export const SectionLayout = styled.div` ${sectionLayout}; ${sectionGrid}; - align-content: flex-end; - min-height: 400px; - padding: 56px 16px; + align-content: flex-start; + gap: 56px 16px; + justify-items: center; + padding: 112px 16px; + + ${mediaDesktopSmallUp} { + gap: 8px 16px; + justify-items: unset; + } `; export const Headline = styled.div` + display: grid; + gap: 8px 0; grid-column: 1 / -1; + text-align: center; + max-width: 560px; ${mediaDesktopSmallUp} { - grid-column: 1 / 8; + grid-column: 1 / span 6; + text-align: left; } `; export const Head = styled.h1` - font-family: "Inter Tight", sans-serif; - font-size: 64px; + color: ${black}; + font-family: "Inter", sans-serif; + font-size: 48px; font-weight: 500; - letter-spacing: -0.4px; - line-height: 72px; + letter-spacing: -1.4px; + line-height: 56px; margin: 0; - - ${mediaTabletUp} { - span { - display: block; - } - } `; export const SubHeadline = styled.div` - grid-column: 1 / -1; - - ${mediaDesktopSmallUp} { - grid-column: 8 / -1; - justify-self: flex-end; - } -`; - -export const SubHeadlinePositioner = styled.div` display: grid; - gap: 20px; - max-width: 392px; + gap: 16px; + justify-items: center; .MuiButton-root { - justify-self: flex-start; + text-transform: none; + } + + ${mediaDesktopSmallUp} { + justify-items: flex-start; } `; export const Subhead = styled.h2` - ${textBodyLarge400}; + ${textBodyLarge4002Lines}; color: ${inkLight}; margin: 0; - - span { - display: block; - margin: 8px 0; - - &:first-of-type { - margin-top: 0; - } - - &:last-of-type { - margin-bottom: 0; - } - } `; diff --git a/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx b/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx index a098c2a..d5be6e6 100644 --- a/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx +++ b/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx @@ -1,5 +1,6 @@ -import { ANCHOR_TARGET } from "@databiosphere/findable-ui/lib/components/Links/common/entities"; import { Button } from "@mui/material"; +import { ROUTES } from "../../../../../../../routes/constants"; +import { Carousel } from "./components/Carousel/carousel"; import { Hero } from "./components/Hero/hero"; import { Head, @@ -8,45 +9,30 @@ import { SectionLayout, Subhead, SubHeadline, - SubHeadlinePositioner, } from "./sectionHero.styles"; export const SectionHero = (): JSX.Element => { return (
- + - Analytics for - pathogen, host, - and vector data + Analytics for pathogen, + host, and vector data - - - + - - BRC Analytics is under active development. This site will - provide data access and analytical tools for all 785 eukaryotic - pathogens, host taxa, and vectors previously served by - VEuPathDB. However, we cannot do this alone. - - - Use the button below to tell us about your usage patterns and - enroll into our design advisory panel. - + Comprehensive tools for exploring and interpreting genomic + annotations and functional insights into disease-causing organisms + and their carriers - - - + + +
); diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx index b418239..c5ef873 100644 --- a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx +++ b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx @@ -19,7 +19,7 @@ export interface HeroProps { export const Hero = ({ gridSize = GRID_SIZE, - height = GRID_SIZE * 1.5, + height = gridSize * 1.5, }: HeroProps): JSX.Element => { return ( props !== "isActive", })` background-color: ${smokeMain}; - border-radius: 50%; - cursor: pointer; - display: inline-block; height: 6px; width: 6px; - ${(props) => - props.isActive && + ${({ isActive }) => + isActive && css` - background-color: ${primaryMain(props)}; + background-color: #fc5e60; `} `; diff --git a/app/components/common/Bullets/bullets.tsx b/app/components/common/Bullets/bullets.tsx index 5290bbd..a4b081e 100644 --- a/app/components/common/Bullets/bullets.tsx +++ b/app/components/common/Bullets/bullets.tsx @@ -1,4 +1,4 @@ -import { Bullet, Bullets as SectionBullets } from "./bullets.styles"; +import { Bullet, Bullets as SectionBullets, StyledDot } from "./bullets.styles"; interface BulletsProps { activeBullet: number; @@ -18,14 +18,15 @@ export const Bullets = ({ {bullets.map((bullet) => ( { onBullet(bullet); }} onKeyDown={(): void => { onBullet(bullet); }} - /> + > + + ))} ); diff --git a/mdx-components.tsx b/mdx-components.tsx index d50f817..38cb574 100644 --- a/mdx-components.tsx +++ b/mdx-components.tsx @@ -1,9 +1,11 @@ import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link"; import { MDXComponents } from "mdx/types"; +import { CardCallToAction } from "./app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles"; export function useMDXComponents(components: MDXComponents): MDXComponents { return { ...components, + CardCTA: CardCallToAction, a: ({ children, href }) => Link({ label: children, url: href ?? "" }), }; } From 9c57d3773117cf87ba4cc6d7337c9e32d67ad5d1 Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Wed, 25 Sep 2024 15:18:49 +1000 Subject: [PATCH 2/9] feat: updated grid size on home page (#66) --- .../SectionHero/components/Hero/hero.tsx | 2 +- .../SectionHero/sectionHero.styles.ts | 3 +- .../components/SectionHero/sectionHero.tsx | 56 +++++++++++-------- .../Layout/components/Hero/common/utils.ts | 24 +++++++- .../common/Section/section.styles.ts | 5 ++ app/components/common/Section/section.tsx | 22 ++++++++ 6 files changed, 86 insertions(+), 26 deletions(-) create mode 100644 app/components/common/Section/section.styles.ts create mode 100644 app/components/common/Section/section.tsx diff --git a/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx b/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx index c90f23a..c56714d 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx +++ b/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx @@ -26,7 +26,7 @@ export interface HeroProps { export const Hero = ({ gridSize = GRID_SIZE, - height = gridSize * 4, + height = gridSize * 3, }: HeroProps): JSX.Element => { return ( { return ( -
- - - -
- Analytics for pathogen, - host, and vector data - - - - Comprehensive tools for exploring and interpreting genomic - annotations and functional insights into disease-causing organisms - and their carriers - - - - - - - + + {(height): JSX.Element => ( + + + + + + Analytics for pathogen, + host, and vector data + + + + Comprehensive tools for exploring and interpreting genomic + annotations and functional insights into disease-causing + organisms and their carriers + + + + + + + + )} + ); }; diff --git a/app/components/Layout/components/Hero/common/utils.ts b/app/components/Layout/components/Hero/common/utils.ts index 55c2284..a5c2dff 100644 --- a/app/components/Layout/components/Hero/common/utils.ts +++ b/app/components/Layout/components/Hero/common/utils.ts @@ -1,4 +1,10 @@ -import { SHAPE_HEIGHT, SHAPE_WIDTH, X_POSITION, Y_POSITION } from "./constants"; +import { + GRID_SIZE, + SHAPE_HEIGHT, + SHAPE_WIDTH, + X_POSITION, + Y_POSITION, +} from "./constants"; /** * Returns the path for the animateMotion element of the blue rectangle. @@ -63,6 +69,22 @@ export function calculateCircleYPosition( return gridSize / 2 - (gridSize / 2) * Math.sin(degreesToRadians(angle)); } +/** + * Calculates the grid size based on the height and count. + * @param height - Section height. + * @param patternCount - Pattern count; vertical repeat of grid pattern. + * @returns grid size. + */ +export function calculateGridSize( + height = GRID_SIZE * 2, + patternCount?: number +): number { + if (height <= GRID_SIZE * 2) { + return height / (patternCount || 2); + } + return height / (patternCount || 3); +} + /** * Returns radians from degrees. * @param angle - Angle. diff --git a/app/components/common/Section/section.styles.ts b/app/components/common/Section/section.styles.ts new file mode 100644 index 0000000..acd2b39 --- /dev/null +++ b/app/components/common/Section/section.styles.ts @@ -0,0 +1,5 @@ +import styled from "@emotion/styled"; + +export const StyledSection = styled.section` + width: 100%; +`; diff --git a/app/components/common/Section/section.tsx b/app/components/common/Section/section.tsx new file mode 100644 index 0000000..e2659e9 --- /dev/null +++ b/app/components/common/Section/section.tsx @@ -0,0 +1,22 @@ +import { + getBorderBoxSizeHeight, + useResizeObserver, +} from "@databiosphere/findable-ui/lib/hooks/useResizeObserver"; +import { useRef } from "react"; +import { StyledSection } from "./section.styles"; + +export interface SectionProps { + children: (height?: number) => JSX.Element; + className?: string; +} + +export const Section = ({ children, className }: SectionProps): JSX.Element => { + const sectionRef = useRef(null); + const { height } = + useResizeObserver(sectionRef, getBorderBoxSizeHeight) || {}; + return ( + + {children?.(height)} + + ); +}; From bcbe4e4e961ded9309e20ebcb7bf6d450d735fdc Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Wed, 25 Sep 2024 15:32:13 +1000 Subject: [PATCH 3/9] feat: updated pages section hero (#66) --- .../SectionHero/components/Hero/hero.tsx | 35 +++++++----------- .../SectionHero/sectionHero.styles.ts | 6 ++- .../components/SectionHero/sectionHero.tsx | 37 +++++++++++-------- 3 files changed, 39 insertions(+), 39 deletions(-) diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx index c5ef873..786dbe7 100644 --- a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx +++ b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx @@ -1,11 +1,7 @@ import { Fragment } from "react"; import { FILL, GRID_SIZE } from "../../../../../../../Hero/common/constants"; import { ELEMENT_ID, Height } from "../../../../../../../Hero/common/entities"; -import { - getElementHref, - getFillUrl, - getViewBox, -} from "../../../../../../../Hero/common/utils"; +import { getFillUrl, getViewBox } from "../../../../../../../Hero/common/utils"; import { CoralPinkCircle } from "../../../../../../../Hero/components/Defs/CoralPinkCircle/coralPinkCircle"; import { SmokeCircle } from "../../../../../../../Hero/components/Defs/SmokeCircle/smokeCircle"; import { SmokeRect } from "../../../../../../../Hero/components/Defs/SmokeRect/smokeRect"; @@ -34,22 +30,19 @@ export const Hero = ({ - {[ - ELEMENT_ID.PATTERN_SMOKE_RECT, - ELEMENT_ID.PATTERN_YELLOW_RECT, - ELEMENT_ID.PATTERN_SMOKE_CIRCLE, - ].map((elementId) => ( - - - - ))} - + {[ELEMENT_ID.PATTERN_SMOKE_RECT, ELEMENT_ID.PATTERN_SMOKE_CIRCLE].map( + (elementId) => ( + + + + ) + )} ); }; diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.styles.ts b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.styles.ts index 5e97aad..0b33942 100644 --- a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.styles.ts +++ b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.styles.ts @@ -5,9 +5,10 @@ import { } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import { textBodyLarge400 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; import styled from "@emotion/styled"; +import { Section } from "../../../../../../../common/Section/section"; import { section, sectionGrid, sectionLayout } from "../../section.styles"; -export const Section = styled.section` +export const StyledSection = styled(Section)` ${section}; background-color: ${smokeLightest}; overflow: hidden; @@ -18,7 +19,8 @@ export const Section = styled.section` export const SectionLayout = styled.div` ${sectionLayout}; ${sectionGrid}; - min-height: 184px; + align-content: flex-start; + min-height: 152px; padding: 56px 16px; `; diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx index aff6432..aab53e7 100644 --- a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx +++ b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx @@ -2,13 +2,14 @@ import { Breadcrumb, Breadcrumbs, } from "@databiosphere/findable-ui/lib/components/common/Breadcrumbs/breadcrumbs"; -import { ReactNode } from "react"; +import { Fragment, ReactNode } from "react"; +import { calculateGridSize } from "../../../../../Hero/common/utils"; import { Hero } from "./components/Hero/hero"; import { Head, Headline, - Section, SectionLayout, + StyledSection, Subhead, SubHeadline, } from "./sectionHero.styles"; @@ -25,19 +26,23 @@ export const SectionHero = ({ subHead, }: SectionHeroProps): JSX.Element => { return ( -
- - - - - {head} - - {subHead && ( - - {subHead} - - )} - -
+ + {(height): JSX.Element => ( + + + + + + {head} + + {subHead && ( + + {subHead} + + )} + + + )} + ); }; From 072d36e502cd935d1631eaa4a4e6ebe38bfe94ac Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Thu, 26 Sep 2024 11:16:02 +1000 Subject: [PATCH 4/9] feat: updated carousel for small viewport (#66) --- .../components/Carousel/common/constants.ts | 2 +- .../Carousel/components/Cards/cards.styles.ts | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts index 7ac18f5..9b7e753 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts @@ -1,7 +1,7 @@ export const CARD_OFFSET_Y = 8; export const CARD_SCALE_X = 40; export const MAX_CARD_HEIGHT = 216; -export const MAX_CARD_HEIGHT_SM = 216; +export const MAX_CARD_HEIGHT_SM = 280; export const MAX_DECK_SIZE = 1; // Currently, deck size is only 1 additional card. export const MAX_CARD_WIDTH = 504; export const CAROUSEL_HEIGHT = MAX_CARD_HEIGHT + MAX_DECK_SIZE * CARD_OFFSET_Y; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts index db4a36a..0635e65 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts @@ -1,4 +1,7 @@ -import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import { + mediaTabletDown, + mediaTabletUp, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; import { inkLight, smokeMain, @@ -74,6 +77,13 @@ export const CardContent = styled.div` margin-bottom: 0; } } + + ${mediaTabletDown} { + -webkit-box-orient: vertical; + display: -webkit-box; + -webkit-line-clamp: 10; + overflow: hidden; + } `; export const CardCallToAction = styled(MButtonBase)` @@ -85,6 +95,12 @@ export const CardCallToAction = styled(MButtonBase)` text-decoration-skip-ink: none; text-underline-position: from-font; + p { + color: inherit; + font: inherit; + margin: 0; + } + &:hover { text-decoration: none; } From eb93671db550976d4538ec71e18232bbce33acc1 Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Thu, 26 Sep 2024 13:47:37 +1000 Subject: [PATCH 5/9] feat: added carousel arrows (#66) --- .../components/Carousel/carousel.styles.ts | 11 ++++ .../components/Carousel/carousel.tsx | 11 ++++ .../components/Carousel/common/constants.ts | 1 + .../components/Carousel/common/utils.ts | 13 ++++ .../Carousel/components/Arrow/arrow.styles.ts | 60 +++++++++++++++++++ .../Carousel/components/Arrow/arrow.tsx | 21 +++++++ 6 files changed, 117 insertions(+) create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Arrow/arrow.styles.ts create mode 100644 app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Arrow/arrow.tsx diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.styles.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.styles.ts index 7ce1669..c295152 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.styles.ts +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.styles.ts @@ -35,6 +35,17 @@ export const Carousel = styled.div` ${mediaTabletUp} { height: ${CAROUSEL_HEIGHT}px; } + + .MuiIconButton-root { + opacity: 0; + transition: opacity 150ms ease-in-out; + } + + &:hover { + > .MuiIconButton-root { + opacity: 1; + } + } `; export const StyledBullets = styled(Bullets)` diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.tsx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.tsx index 10eb703..1230623 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.tsx +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.tsx @@ -1,8 +1,10 @@ +import { SWIPE_ACTION } from "../../../../../../../../hooks/useSwipeInteraction/common/entities"; import { Carousel as CarouselCards, CarouselView, StyledBullets, } from "./carousel.styles"; +import { Arrow } from "./components/Arrow/arrow"; import { Cards } from "./components/Cards/cards"; import { useInteractiveCarousel } from "./hooks/useInteractiveCarousel"; @@ -13,11 +15,20 @@ export const Carousel = (): JSX.Element => { interactiveCards, interactiveIndexes, onSetActiveIndex, + onSetSwipeAction, } = useInteractiveCarousel(); return ( + onSetSwipeAction(SWIPE_ACTION.SWIPE_BACKWARD)} + swipeAction={SWIPE_ACTION.SWIPE_BACKWARD} + /> + onSetSwipeAction(SWIPE_ACTION.SWIPE_FORWARD)} + swipeAction={SWIPE_ACTION.SWIPE_FORWARD} + /> props !== "swipeAction", +})` + & { + background-color: ${white}; + border-radius: 50%; + box-shadow: inset 0 0 0 1px ${smokeDark}, 0 1px 0 0 ${black08}; + color: ${inkMain}; + position: absolute; + top: 50%; + transform: ${({ swipeAction }) => getArrowTransform(swipeAction)}; + z-index: ${MAX_DECK_SIZE + 1}; + + &:hover { + background-color: ${smokeLightest}; + } + + &:active { + box-shadow: inset 0 0 0 1px ${smokeDark}; + } + + ${mediaTabletDown} { + display: none; + } + } + + ${({ swipeAction }) => + swipeAction === SWIPE_ACTION.SWIPE_BACKWARD && + css` + left: 0; + `} + + ${({ swipeAction }) => + swipeAction === SWIPE_ACTION.SWIPE_FORWARD && + css` + right: 0; + `} +`; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Arrow/arrow.tsx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Arrow/arrow.tsx new file mode 100644 index 0000000..7438289 --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Arrow/arrow.tsx @@ -0,0 +1,21 @@ +import { SouthIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/SouthIcon/southIcon"; +import { SwipeAction } from "../../../../../../../../../../hooks/useSwipeInteraction/common/entities"; +import { IconButton } from "./arrow.styles"; + +interface ArrowProps { + onClick: () => void; + swipeAction: SwipeAction; +} + +export const Arrow = ({ onClick, swipeAction }: ArrowProps): JSX.Element => { + return ( + + + + ); +}; From a498f68d46bd83c30532d2a52623430eae5f209c Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Thu, 26 Sep 2024 14:00:15 +1000 Subject: [PATCH 6/9] feat: updated card content and actions (#66) --- .../Carousel/components/Cards/cards.styles.ts | 27 +++++-------------- .../Carousel/content/learnToAnalyzeData.mdx | 15 +++++++++-- .../shareUsageAndJoinAdvisoryPanel.mdx | 13 +++++---- mdx-components.tsx | 5 ++-- 4 files changed, 29 insertions(+), 31 deletions(-) diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts index 0635e65..8175a27 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts @@ -13,7 +13,7 @@ import { } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; import { elevation01 } from "@databiosphere/findable-ui/lib/theme/common/shadows"; import styled from "@emotion/styled"; -import { ButtonBase as MButtonBase, Card as MCard } from "@mui/material"; +import { Card as MCard } from "@mui/material"; import { MAX_CARD_HEIGHT, MAX_CARD_HEIGHT_SM, @@ -86,23 +86,10 @@ export const CardContent = styled.div` } `; -export const CardCallToAction = styled(MButtonBase)` - &.MuiButtonBase-root { - ${textBody500}; - color: #28285b; - margin-top: 16px; - text-decoration: underline; - text-decoration-skip-ink: none; - text-underline-position: from-font; - - p { - color: inherit; - font: inherit; - margin: 0; - } - - &:hover { - text-decoration: none; - } - } +export const CardActions = styled.div` + ${textBody500}; + align-items: center; + display: flex; + gap: 16px; + margin-top: 16px; `; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx index 8db9387..db318fb 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx @@ -1,3 +1,14 @@ -### Learn how to analyze your data! +### Analyze your data with Galaxy -The new BRC-analytics platform will make heavy use of the Galaxy platform for analysis of data. To learn how to use this system or to improve your already existing skills enroll into [Galaxy Academy 2024](https://training.galaxyproject.org/training-material/events/galaxy-academy-2024.html). The Academy is a global online training event that will take place October 7 - 11, 2024. For more information please see [the event page](https://training.galaxyproject.org/training-material/events/galaxy-academy-2024.html). Note that free registration is required. +The BRC-analytics platform makes heavy use of the Galaxy platform for analysis of data. To learn how to use Galaxy, or to improve your already existing skills, enroll in the [Galaxy Academy 2024](https://training.galaxyproject.org/training-material/events/galaxy-academy-2024.html), a global online training event taking place October 7 - 11, 2024. + + + + + diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx index 54d19b5..d60960d 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx @@ -2,10 +2,9 @@ BRC Analytics is actively evolving to provide comprehensive data access and analytical tools for all 785 eukaryotic pathogens, host taxa, and vectors previously supported by VEuPathDB.We need your help to improve—share your usage patterns and join our design advisory panel to help shape the future of the platform. - - Get Involved - + + + diff --git a/mdx-components.tsx b/mdx-components.tsx index 38cb574..1803365 100644 --- a/mdx-components.tsx +++ b/mdx-components.tsx @@ -1,11 +1,12 @@ import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link"; import { MDXComponents } from "mdx/types"; -import { CardCallToAction } from "./app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles"; +import { CardActions } from "./app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles"; export function useMDXComponents(components: MDXComponents): MDXComponents { return { ...components, - CardCTA: CardCallToAction, + CardActions, + Link, a: ({ children, href }) => Link({ label: children, url: href ?? "" }), }; } From 023862656f50a86e639508a0bd6e3cd9f1697bf6 Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Thu, 26 Sep 2024 14:02:47 +1000 Subject: [PATCH 7/9] feat: slow carousel rotation (#66) --- .../Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx | 4 ++-- .../components/Carousel/hooks/useInteractiveCarousel.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx index d60960d..30f9aed 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/shareUsageAndJoinAdvisoryPanel.mdx @@ -1,6 +1,6 @@ -### Share your usage and join our advisory panel. +### Share your usage and join our advisory panel -BRC Analytics is actively evolving to provide comprehensive data access and analytical tools for all 785 eukaryotic pathogens, host taxa, and vectors previously supported by VEuPathDB.We need your help to improve—share your usage patterns and join our design advisory panel to help shape the future of the platform. +BRC Analytics is actively evolving to provide comprehensive data access and analytical tools for all 785 eukaryotic pathogens, host taxa, and vectors previously supported by VEuPathDB. We need your help to improve—share your usage patterns and join our design advisory panel to help shape the future of the platform. Date: Thu, 26 Sep 2024 14:18:49 +1000 Subject: [PATCH 8/9] feat: added pause to carousel with mouse enter (#66) --- .../Carousel/hooks/useInteractiveCarousel.ts | 2 +- .../useSwipeInteraction.tsx | 19 ++++++++++++++++--- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/hooks/useInteractiveCarousel.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/hooks/useInteractiveCarousel.ts index 589cbc7..1d22cc6 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Carousel/hooks/useInteractiveCarousel.ts +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/hooks/useInteractiveCarousel.ts @@ -31,7 +31,7 @@ export function useInteractiveCarousel(): UseInteractiveCarousel { const swipeInteraction = useSwipeInteraction( interactiveIndexes.length, true, - 20000 + 12000 ); return { interactiveCards: carouselCards, diff --git a/app/hooks/useSwipeInteraction/useSwipeInteraction.tsx b/app/hooks/useSwipeInteraction/useSwipeInteraction.tsx index 4dcc009..c4539b9 100644 --- a/app/hooks/useSwipeInteraction/useSwipeInteraction.tsx +++ b/app/hooks/useSwipeInteraction/useSwipeInteraction.tsx @@ -14,6 +14,8 @@ import { SwipeAction, SwipeCoordinates, SWIPE_ACTION } from "./common/entities"; export interface InteractiveAction { onMouseDown: (mouseEvent: MouseEvent) => void; + onMouseEnter: () => void; + onMouseLeave: () => void; onMouseUp: (mouseEvent: MouseEvent) => void; onTouchEnd: (touchEvent: TouchEvent) => void; onTouchMove: (touchEvent: TouchEvent) => void; @@ -39,6 +41,7 @@ export function useSwipeInteraction( swipeEnabled = true, swipeDelay = 0 ): UseSwipeInteraction { + const [interactiveDelay, setInteractiveDelay] = useState(swipeDelay); const swipeStartCoordsRef = useRef( DEFAULT_SWIPE_COORDINATES ); @@ -52,6 +55,14 @@ export function useSwipeInteraction( swipeStartCoordsRef.current = getMouseCoords(mouseEvent); }, []); + const onMouseEnter = useCallback((): void => { + setInteractiveDelay(0); + }, []); + + const onMouseLeave = useCallback((): void => { + setInteractiveDelay(swipeDelay); + }, [swipeDelay]); + const onMouseUp = useCallback((mouseEvent: MouseEvent): void => { const mouseStartCoords = swipeStartCoordsRef.current; const mouseEndCoords = getMouseCoords(mouseEvent); @@ -123,12 +134,12 @@ export function useSwipeInteraction( }, [swipeAction, onSwipeToIndex]); useEffect(() => { - if (swipeDelay === 0) return; + if (interactiveDelay === 0) return; const timeout = setTimeout(() => { onSwipeToIndex(1); - }, swipeDelay); + }, interactiveDelay); return () => clearTimeout(timeout); - }, [activeIndex, swipeDelay, onSwipeToIndex]); + }, [activeIndex, interactiveDelay, onSwipeToIndex]); if (!swipeEnabled) { return { @@ -142,6 +153,8 @@ export function useSwipeInteraction( activeIndex, interactiveAction: { onMouseDown, + onMouseEnter, + onMouseLeave, onMouseUp, onTouchEnd, onTouchMove, From b8eb483d8abdba7a853b8fe23aa80c5f2c55837a Mon Sep 17 00:00:00 2001 From: David Rogers Date: Wed, 25 Sep 2024 21:32:57 -0700 Subject: [PATCH 9/9] Update learnToAnalyzeData.mdx --- .../components/Carousel/content/learnToAnalyzeData.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx index db318fb..85e58a0 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/content/learnToAnalyzeData.mdx @@ -1,6 +1,6 @@ -### Analyze your data with Galaxy +### Learn how to analyze your data with Galaxy -The BRC-analytics platform makes heavy use of the Galaxy platform for analysis of data. To learn how to use Galaxy, or to improve your already existing skills, enroll in the [Galaxy Academy 2024](https://training.galaxyproject.org/training-material/events/galaxy-academy-2024.html), a global online training event taking place October 7 - 11, 2024. +The BRC Analytics platform makes heavy use of the Galaxy platform for data analysis. To learn how to use Galaxy or to improve your existing skills, enroll in the [Galaxy Academy 2024](https://training.galaxyproject.org/training-material/events/galaxy-academy-2024.html), a global online training event taking place October 7 - 11, 2024.