Skip to content
This repository has been archived by the owner on Jul 13, 2021. It is now read-only.

opentargets-archive/platform-app-customisations

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Platform UI customisations

This repository presents examples of customisations that can be done to the platform app UI

Customisation

To customise the platform app:

  • Clone the platform-app repository.
  • Create a directory somewhere outside the platform-app repository where the customisation files will be put.
  • Add an environment variable called $CUSTOMISATIONS_DIR that points to the customisation directory created in the step above.
  • Inside your customisation directory you can overwrite or add new files following the same directory structure as src/public.
  • When developing new customisations, you can use the yarn start:customise script inside the platform-app repository to see your customisations reflected in the app while developing. When done developing customisations, run the yarn reset command.
  • For production, you can produce a build containing the customisations by running the yarn build:customise script inside the platform-app repository. This will create a build directory containing static assets files (html, css, js) that you can deploy.

Customising the theme

To customise the theme, overwrite the theme.js file by having a theme.js file in your customisation directory.

Customising the footer

To customise the footer, overwrite BasePage.js with a BasePage component in the customisation directory so that it uses a custom Footer component.

Changing order of sections

One can change the order of sections in the target, disease, drug, and evidence page. To do so, overwrite the configuration.js and change the order of the strings in the arrays.

Deleting sections

To delete sections, remove their corresponding string from the configuration.js file

Adding a section

To add a section, create a directory that will contain the files related to it. This directory should have an index.js file.

The index.js file should have a structure as follows:

// helps to load graphql files
import { loader } from 'graphql.macro';

// the name of your new section
export const id = '<section-id>';
// the nice name you want for your new section
export const name = '<section-name>';

// a function of the response of summaryQuery, to determine whether there is data for this target (and therefore whether to load the detail or not)
export const hasSummaryData = <function>;

// (optional) queries against platform-api, the new graphql api
export const summaryQuery = loader('./summaryQuery.gql');
export const sectionQuery = loader('./sectionQuery.gql');

// react components to render the data:
// typically a string, above the main content section, but could have links
export { default as DescriptionComponent } from './Description';
// typically a string, in the summary widget, but could be more complex
export { default as SummaryComponent } from './Summary';
// the main content section
export { default as SectionComponent } from './Section';

Make sure to include the id string in the corresponding array in configuration.js and import and export the index.js in the corresponding sectionIndex.js file as it's done here.

About

Customisations for platform-app

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published