Update associations heat map for partner preview Platform

[d0choa]

The first step that's required for this is to update the static content in the next files:

• dataSources.js
• dataTypes.js

To include as placeholders, until confirmed by @andrewhercules:

• [x] dataSources.js: { id: 'ot_crispr', label: "Open Targets CRISPR" }
• [x] dataTypes.js: { id: 'ot_partner', label: "Open Targets Projects" }

[andrewhercules]

I agree with @d0choa's proposed labels:

"Open Targets CRISPR" for the datasource and "Open Targets Projects" for the data type.

Additionally, @d0choa suggested that we expand the entry for the dataSource.js and dataTypes.js file to include a type field that could be set to public or private that would show the lock icon and tooltip.

After updating the static configuration files to include the new data source and data type, can we please do the following?

• [x] Add the partner preview lock icon and tooltip component to the datasource filter label and datatype heat map column label

• [x] Adjust the colour scale, set in the constants.js file to be the following:

export const colorRange = [
  // '#ffffff',
  '#ebf0ed',
  '#d8e2dc',
  '#c5d4cb',
  '#b2c6ba',
  '#9fb8a9',
  '#8caa97',
  '#799c86',
  '#668e75',
  '#538064',
  '#407253',
];

@LucaFumis, can the colourRange be abstracted out from the constants.js file and made into a deployment context variable?

As discussed during todays' meeting, there are different ways we could adjust the colours used in the heatmap:

• Stringifying all the colour codes into a single string that is saved as a deploy context variable; splitting the string in the front-end (similar to D3's approach as noted by @d0choa)
• Setting each colour as a variable in the deployment context
• Using D3's built-in colour gradients (Observable notebook from @d0choa)
• Calculating the gradient using the primaryColour

@LucaFumis can you please investigate?

[ktsirigos]

work done