fairtracks / fairtracks.net

Repo hosting the FAIRtracks landing page.

This is the source code of the FAIRtracks.net web site.

The website is built with Vue.js using the Nuxt and the Vuetify UI library, all in version 2. The code is originally based on the ModeVue template (available under the MIT license), which has been heavily extended, both visually and in terms of functionality.

Build Setup

You will need a Windows, Mac, or Linux computer with access to the command-line and permission to install new system packages. An active internet connection is required in order to install the following required software:

• Node https://nodejs.org/en/ (v16, v17, or v18)
• NPM https://www.npmjs.com/

Using the terminal, navigate to the folder containing the unzipped theme and run the npm install command. This will install all of the required packages and prepare your project for local development and production deployment. Once complete, type npm run dev and press the enter key. Vue CLI will then compile the project and serve a local server located at http://localhost:5050.

# install dependencies
$ npm install

# serve with hot reload at localhost:5050
$ npm run dev

# build for production and launch server at localhost:3000
$ npm run static
$ npm run static:quick  # drop image optimizations, for speed

(Text adapted from the ModeVue GitHub repo)

More info

For more information, please check out the FAIRtracks.net website!

fairtracks.net's Issues

Improve layout of overview sections

Primarily by editing the component OverviewLayout.vue.

Figure for "Track Collections"

I am not entirely sure the standards shown in Figure 5 are relevant to tracks.
Can someone verify this is actually what we want to show there?

Problems with characters and hyperlinks in the metadata of markdown files

the character ":" seems to create issues when used in the metadata. The error is
" incomplete explicit mapping pair; a key node is missed; or followed by a non-tabulated empty line"
Note that the character works fine if not followed by a space.

Also, hyperlinks seem not to work correctly when used in the description, e.g. [Genomic HyperBrowser](http://hyperbrowser.uio.no)
does not display correctly as Genomic HyperBrowser.

Material page - Layout

To-do:

• Reduce space between cards
• Remove white space by keeping description concise.
• Remove sub-sections
• Instead, add tags/labels on each card to categorise publication, poster, and presentations.
• Name change; replace 'Media' with 'Blog Post' on Materials page.
• Make sure published date text and button are aligned ("in same row/column")
• 'TrackFind' poster; mention conference name and date in description. Note: publication dates for poster are not required, we can instead mention 'Presented on '
• Add description for 'TrackFind' poster from Gundersen et al.
• Add buttons for each material type at the top (above cards); that allows user to filter for relevant content. Button colours would be based on colour scheme used throughout webpages. This should be implemented when material has a lot of information. It is not required at the moment.

Routing of tags & category filtering conditions from other pages

Setting up a rounting mechanism so that clicking a hyperlink from a different page could automatically render the materials page with the correct tags and/ or categories selected.

.githubRepoInfo.json not being generated

Looks like this file is required for the website to run on the localhost.

Issue persisted through multiple node/ npm versions.
Git pull/ push were working fine without the fine.

The file was added to .pretrierignore during commit 69c5ce3

Current solution: Obtain the file from someone else and keep it in project root.

topics page: list of acronyms

It might be useful to have a visible list of acronyms somewhere on the topics page to facilitate the readers. It is probably not urgent, especially if hard to implement, but something we should keep in mind.

Move to nuxt/content for inline markdown

Currently marked is used alongside nuxt/content, where the former is used for inline markdown content and the latter is used for full page markdown files. Moving to nuxt/content for all markdown content will make sure that links are rendered using nuxt-link components.

Improve site loading time

Reduce javascript client code by:

• Identify plugins that are only needed server-side and rename to plugin.server.js
• Move as many modules into buildModules as possible
• Include fonts in static content instead of loading from google
• Exchange large dependencies with smaller ones?
• Other tips and tricks?

Set up autodeployment of site to gh-pages to continuously update repo statistics

• Once a day?
• X times per day?
• Every hour?

Duplicate content

The paragraph "While track files are nowadays ..." appears both in "FAIR data and FAIRtracks" and "Track Metadata Models".

Issue with carousel and window resize

In at least static mode, the carousel images gets hidden if you do the following:

• Open index page
• Go to another page
• Resize the window
• Return to the index page

Resizing or reloading the index page will return the images.

Probably something to do with the onResizeWindow listener in component-relative-grid.

Navbar

Few things that we should look into regarding the navbar

• Materials no longer needs to be a drop down given the new layout
• Community tab vanishes on screen width below 1264
• Externals links give a 404 error when navbar becomes a vertical menu on smaller displays.

Long, cramped tables

Opening as issue to collect opinions on UI/ alternative suggestions regarding the tables.

Current idea:
I modified the tables so that when we have certain columns (organisms and assays in this snapshot) with more than 1 element, the entire column gets replaced with 'Multiple' and the column details appear in a tooltip.

The good:

• Retains searching
• Looks much better

The bad:

• Needs per table adjustments/ some fancy abstraction.
  This is mostly due to the fact that the table headers are different.

The ugly

• Code duplication between tables 😢

GSuite logo

Do we have a logo for GSuite to use as a title for the JSON2GSuite service card? Something like a bigger version of the one included in the overview figure on https://fairtracks.github.io/

Scrolling down to a topic is imprecise

Clicking a particular topic in the menu bar scrolls down, but some times does not stop at the correct place. Not certain in which contexts this works and does not work.

Materials page - Content

Publications from https://www.mn.uio.no/ifi/english/people/adm/sveinugu/index.html:

• Colocalization analyses of genomic elements: approaches, recommendations and challenges
• Coloc-stats: A unified web interface to perform colocalization analysis of genomic features.
• GSuite HyperBrowser: integrative analysis of dataset collections across the genome and epigenome.
• The Genomic HyperBrowser: an analysis web server for genome-scale data.
• Identifying elemental genomic track types and representing them uniformly.
• The Genomic HyperBrowser: inferential genomics at the sequence level.

Other publications:

• The BLUEPRINT Data Analysis Portal (https://doi.org/10.1016/j.cels.2016.10.021)

Posters:

• The GTrack ecosystem - expressive file formats for analysis of genomic track data (https://doi.org/10.7490/f1000research.1115292.1)
• Coloc-stats: a unified web interface to perform colocalization analysis of genomic features (include PDF for now)
• The Genomic HyperBrowser - extensive framework for integrative analysis across the genome and epigenome (include PDF for now)

Abstract functionality from materials page and make it avaiable elsewhere

Refactor the materials layout component so that other pages could use the tags/categories functionality.

Species name should be italic

First version of FAIRtracks.net web site

Improve rendering of static pages

The initial static pages generated by "npm run generate" have lots of artifacts, creating unnecessary flickering/reflow issues when first opening a page.

Go through the different "index.html" pages in "dist" folder and fix static rendering issues:

• index.html (Here, default carousel item should be full page)
• Main header and page banner
• code/index.html
• community/index.html
• material/index.html
• overview/index.html
• services/index.html
• standars/index.html
• topics/index.html
• Fix autogeneration of mode-vue demo pages (nuxt crawler exclude?)
• Only generate modevue-demo/all-sections/index.html static page on dev

Theme does not work in code page without javascript

And there is a flicker when reloading the site with javascript. At least in the currently deployed version.

Add a mediakit with vector logos etc.

Add tags to materials

Misc small issues

• Remove "coming soon" when appropriate sections are added. This is at least for "Analyzing tracks" and the source code page
• Add ENCODE in data model table?

Add notes asking for contributions

Make sure that there are notes asking people to contribute at strategic places on the web site. E.g. "If there are missing/incorrect contents in this table, please contribute...". Should be added for at least:

• Table of Genome Browsers
• Table of Track collections
• Table of Analysis software
• Services page
• Code page
• Overview sections (general comments)
• Community (improve current comments)

Please add to this list above whenever a new place for such a notice is discovered.

previews on material page - possible wrong file

In assets/materials/previews the two figures simovski_gsuite-hyperbrowser_2017.png and sandve_genomic-hyperBrowser_2013.png
appear to be the same (although the files are not identical). The actual content of the figure makes me think this should be used for sandve_genomic-hyperBrowser and not for simovski_gsuite-hyperbrowser.