Skip to content
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.

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

Mocks for pages listing shared datsets & narratives #305

Open
jameshadfield opened this issue Apr 12, 2021 · 1 comment
Open

Mocks for pages listing shared datsets & narratives #305

jameshadfield opened this issue Apr 12, 2021 · 1 comment
Labels
enhancement New feature or request

Comments

@jameshadfield
Copy link
Member

Recent work (including #287 #299 #201 #302) now makes it feasible to create pages listing datasets & narratives shared through nextstrain.org via methods such as community, groups etc. This issue focuses on mocks for the frontend work. Here I don’t consider the problem of collecting this data and keeping it in sync, this issue presumes that such a file is able to be fetched by the client. I also assume that such a file does not include parsing of the dataset file itself, which limits the metadata we are aware of for a given dataset / narrative.

For most of the sources I believe we can use a single template page, with different content (both text & fetched data file). These would be sourced from the following pages:

  • /pathogens (/core would redirect here) - representing our core datasets. Table columns would be dataset & date updated.
  • /staging Same table columns as above.
  • /groups Private groups should also be shown, implying that the datasets must be dynamically generated by our server. Table columns: “Dataset”, “date updated”, “Group name”.
  • /community Consideration should be taken on whether all datasets are shown, or whether people can opt-out. Table columns: “Dataset”, “date updated”, “GitHub organisation”.

image

We may also wish to have an /sharing page, which fetches data from all the above sources. Such a page would imply the others have been implemented!

  • /fetch would work somewhat differently, but it would be nice to surface a page for this functionality.

image

@jameshadfield
Copy link
Member Author

@eharkins's issue #343 on how to surface groups from the nextstrain.org frontpage made me revisit this issue. In general, I think we need a small set (6 or so) of components that we can reuse across all of the pages we are now creating (/groups, /community etc). These components will handle the styling, so that page authors can focus on the content rather than the aesthetics. It also provides continuity across the site.

Six reusable components that will allow the functionality we want for most pages

(Colours here identify the components, I'm not proposing we make each component a different colour 😂 )

image

*How a selection of pages would look

One benefit is that the source code for each of these pages would now have a much higher ratio of content to styling. Right now the two are very intertwined.

image

image

image

image

jameshadfield added a commit that referenced this issue Jun 4, 2021
As we expand the number of pages rendered by gatsby it becomes
more important to expose a small number of reusable components
which pages can use (see [1] for more).

Here we implement the concept of "panels" which are displayed in
a flexbox layout. Panels may contain custom content (we expose
`<Panel>` for this, or they may display a selection of cards
`<PanelWithCards`).

The exact breakpoints etc need further work, probably at a time
when the other components have been implemented.

Note that this commit intentionally includes content which should
be removed before release, either by subsequent commits or by
ammending this commit:
* /testing page
* wireframes around components

[1] #305
eharkins added a commit that referenced this issue Jul 28, 2021
temp solution for cards is to allow the Cards
component to use flexbox instead of bootstrap
for a more compact, two-column layout. This
will be refactored when we address the design
and flexibility of these components in #305, #347.

TODO:
- might need to unsquash ncov and narratives cards
to be able to read them on mobile
- allowing page sections to tile horizontally,
e.g. groups alongside sars cov 2 as in james' sketch
- more testing
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant