feat: add dataset images

Display dataset images in lists

Sibling PR in data: nextstrain/nextclade_data#94

Author: ivan-aksamentov

packages_rs/nextclade-cli/src/dataset/dataset_download.rs

@@ -234,6 +234,7 @@ pub fn dataset_individual_files_load(
               rest_attrs: BTreeMap::default(),
               other: serde_json::Value::default(),
             },
+            image: None,
             files: DatasetFiles {
               reference: "".to_owned(),
               pathogen_json: "".to_owned(),

packages_rs/nextclade-web/src/components/Main/DatasetInfo.tsx

@@ -1,5 +1,5 @@
 import { isNil } from 'lodash'
-import { darken } from 'polished'
+import { darken, transparentize } from 'polished'
 import React, { useMemo } from 'react'
 import { Badge } from 'reactstrap'
 import { useRecoilValue } from 'recoil'
@@ -194,7 +194,7 @@ export interface DatasetInfoCircleProps {
 }
 
 function DatasetInfoAutodetectProgressCircle({ dataset, showSuggestions }: DatasetInfoCircleProps) {
-  const { attributes, path } = dataset
+  const { attributes, path, image } = dataset
   const { name } = attributes
 
   const circleBg = useMemo(() => darken(0.1)(colorHash(path, { saturation: 0.5, reverse: true })), [path])
@@ -219,12 +219,16 @@ function DatasetInfoAutodetectProgressCircle({ dataset, showSuggestions }: Datas
     return { circleText: `0%`, percentage: 0, countText: `0 / ${numberAutodetectResults}` }
   }, [showSuggestions, records, numberAutodetectResults, name.valueFriendly, name.value])
 
+  const circle = useMemo(() => {
+    if (image?.path) {
+      return <CircleImage $bg={circleBg} $image={image.path} />
+    }
+    return <Circle $bg={circleBg}>{circleText}</Circle>
+  }, [circleBg, circleText, image?.path])
+
   return (
     <>
-      <CircleBorder $percentage={percentage}>
-        <Circle $bg={circleBg}>{circleText}</Circle>
-      </CircleBorder>
-
+      <CircleBorder $percentage={percentage}>{circle}</CircleBorder>
       <CountText>{countText}</CountText>
     </>
   )
@@ -257,6 +261,7 @@ const CircleBorder = styled.div.attrs<CircleBorderProps>((props) => ({
   border-radius: 50%;
   width: 75px;
   height: 75px;
+  z-index: 10 !important;
 `
 
 const Circle = styled.div<{ $bg?: string; $fg?: string }>`
@@ -271,3 +276,18 @@ const Circle = styled.div<{ $bg?: string; $fg?: string }>`
   height: 60px;
   font-size: 1.2rem;
 `
+
+const CircleImage = styled.div<{ $bg?: string; $fg?: string; $image?: string }>`
+  background-image: ${(props) => `url(${props.$image})`};
+  background-color: ${(props) => props.$bg && transparentize(0.75)(props.$bg)};
+  background-blend-mode: overlay;
+  background-size: contain;
+  display: flex;
+  margin: auto;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  font-size: 1.2rem;
+`

packages_rs/nextclade-web/src/io/fetchDatasetsIndex.ts

@@ -2,6 +2,7 @@ import { head, mapValues, sortBy, sortedUniq } from 'lodash'
 import semver from 'semver'
 import { takeFirstMaybe } from 'src/helpers/takeFirstMaybe'
 import urljoin from 'url-join'
+import copy from 'fast-copy'
 
 import { Dataset, DatasetFiles, DatasetsIndexJson, DatasetsIndexV2Json, MinimizerIndexVersion } from 'src/types'
 import { axiosFetch } from 'src/io/axiosFetch'
@@ -27,10 +28,17 @@ export function fileUrlsToAbsolute(datasetServerUrl: string, dataset: Dataset):
   const restFilesAbs = mapValues(dataset.files, (file) =>
     file ? urljoin(datasetServerUrl, dataset.path, dataset.version?.tag ?? '', file) : undefined,
   ) as DatasetFiles
+
   const files = {
     ...restFilesAbs,
   }
-  return { ...dataset, files }
+
+  const image = copy(dataset.image)
+  if (image?.path) {
+    image.path = urljoin(datasetServerUrl, dataset.path, dataset.version?.tag ?? '', image.path)
+  }
+
+  return { ...dataset, files, image }
 }
 
 export function getLatestCompatibleEnabledDatasets(datasetServerUrl: string, datasetsIndexJson: DatasetsIndexV2Json) {

packages_rs/nextclade/src/analyze/virus_properties.rs

@@ -5,7 +5,7 @@ use crate::analyze::pcr_primer_changes::PcrPrimer;
 use crate::coord::position::AaRefPosition;
 use crate::coord::range::AaRefRange;
 use crate::gene::genotype::Genotype;
-use crate::io::dataset::{DatasetAttributes, DatasetCompatibility, DatasetFiles, DatasetVersion};
+use crate::io::dataset::{DatasetAttributes, DatasetCompatibility, DatasetFiles, DatasetImage, DatasetVersion};
 use crate::io::fs::read_file_to_string;
 use crate::io::json::json_parse;
 use crate::io::schema_version::{SchemaVersion, SchemaVersionParams};
@@ -32,6 +32,8 @@ pub struct VirusProperties {
 
   pub attributes: DatasetAttributes,
 
+  pub image: Option<DatasetImage>,
+
   pub files: DatasetFiles,
 
   #[serde(default = "bool_false")]

packages_rs/nextclade/src/io/dataset.rs

@@ -70,6 +70,8 @@ pub struct Dataset {
 
   pub attributes: DatasetAttributes,
 
+  pub image: Option<DatasetImage>,
+
   pub files: DatasetFiles,
 
   #[serde(default, skip_serializing_if = "DatasetCapabilities::is_default")]
@@ -302,6 +304,17 @@ impl DatasetAttributeValue {
   }
 }
 
+#[derive(Clone, Debug, Serialize, Deserialize, JsonSchema)]
+#[serde(rename_all = "camelCase")]
+pub struct DatasetImage {
+  pub path: Option<String>,
+
+  pub source: Option<String>,
+
+  #[serde(flatten)]
+  pub other: serde_json::Value,
+}
+
 #[derive(Clone, Debug, Serialize, Deserialize, JsonSchema)]
 #[serde(rename_all = "camelCase")]
 pub struct DatasetAttributes {