Dev

package.json

@@ -3,12 +3,13 @@
   "version": "0.1.0",
   "private": false,
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@playwright/test": "1.30.0",
     "@types/file-saver": "2.0.5",
     "@types/react": "18.2.74",
     "@types/react-dom": "18.2.23",
     "@types/react-router-dom": "5.3.3",
-    "@types/uuid": "^8.3.1",
+    "@types/uuid": "9.0.8",
     "axios": "1.3.2",
     "axios-cache-interceptor": "1.0.1",
     "balloon-css": "^1.2.0",
@@ -17,19 +18,19 @@
     "file-saver": "^2.0.5",
     "pdbe-molstar": "3.1.2",
     "react": "18.2.0",
+    "react-cookie-consent": "9.0.0",
     "react-dom": "18.2.0",
     "react-dropdown-now": "^6.0.1",
+    "react-markdown": "^8.0.7",
     "react-router-dom": "6.22.3",
     "react-scripts": "4.0.3",
+    "rehype-raw": "6.1.1",
+    "remark-gfm": "3.0.1",
     "simple-react-notifications2": "1.2.17",
+    "tinygradient": "1.1.5",
     "typescript": "4.9.5",
-    "uuid": "3.4.0",
-    "web-vitals": "2.1.4",
-    "react-markdown": "^8.0.7",
-    "remark-gfm": "3.0.1",
-    "rehype-raw": "6.1.1",
-    "react-cookie-consent": "9.0.0",
-    "@babel/plugin-proposal-private-property-in-object": "7.21.11"
+    "uuid": "9.0.1",
+    "web-vitals": "2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/constants/ExternalUrls.ts

@@ -11,6 +11,7 @@ export const RHEA_URL = "https://www.rhea-db.org/rhea/";
 export const INTACT_URL = "https://www.ebi.ac.uk/intact/search?query="
 export const UNIPROT_ACCESSION_URL = "https://www.uniprot.org/uniprot/"
 export const CADD_INFO_URL = "https://cadd.gs.washington.edu/info"
+export const AM_INFO_URL = "https://alphamissense.hegelab.org/"
 export const VCF_FORMAT_INFO_URL = "https://github.com/ebi-uniprot/protvar-be/blob/main/docs/vcf-format.md"
 export const DBSNP_URL = "https://www.ncbi.nlm.nih.gov/snp/"
 export const CLINVAR_RCV_URL = "https://www.ncbi.nlm.nih.gov/clinvar/"

src/index.tsx

@@ -1,18 +1,18 @@
-import * as React from "react";
-import { createRoot } from "react-dom/client";
+import React from "react";
+import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import './styles/index.scss';
 import reportWebVitals from './reportWebVitals';
 
 import App from './ui/App';
 
-const container = document.getElementById('root');
-if (!container) throw new Error('Failed to find the root element');
-const root = createRoot(container);
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(
-	<BrowserRouter basename={process.env.PUBLIC_URL}>
-		<App />
-	</BrowserRouter>
+	<React.StrictMode>
+		<BrowserRouter basename={process.env.PUBLIC_URL}>
+			<App/>
+		</BrowserRouter>
+	</React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/styles/base/_variables.scss

@@ -44,8 +44,6 @@ $search-results-badge-border-colour: #333;
 $search-results-badge-colour: #333;
 $novel-variant-colour: #f00;
 $non-coding-variant-colour: #999;
-$cadd-score-green-background-colour: #6dab49;
-$cadd-score-red-background-colour: #da0f21;
 $significance-data-block-border-colour: #ddd;
 $publications-label-background-colour: #ffb100;
 $input-example-border-colour: #ffb100;

src/styles/search/_ImpactSearchResults.scss

@@ -73,14 +73,6 @@
 			border-style: none;
 			height: 100%;
 		}
-
-		.cadd-score {
-			width: 2rem;
-			text-align: center;
-			display: inline-block;
-			margin-right: 1rem;
-			margin-bottom: 0.3rem;
-		}
 	}
 
 	.img-table {
@@ -443,37 +435,6 @@
 		vertical-align: top;
 	}
 
-	.cadd-score {
-		padding: 0.3rem 0.4rem;
-		border-radius: 0.75rem;
-		font-size: 0.8rem;
-		font-weight: 700;
-
-		&--DarkGreen {
-			background-color: DarkGreen;
-		}
-
-		&--DarkSeaGreen {
-			color: $white-colour;
-			background-color: DarkSeaGreen;
-		}
-
-		&--Gold {
-			color: $white-colour;
-			background-color:Gold;
-		}
-
-		&--DarkOrange {
-			color: $white-colour;
-			background-color: DarkOrange;
-		}
-
-		&--FireBrick {
-			color: $white-colour;
-			background-color: FireBrick;
-		}
-	}
-
 	.expanded-row {
 		background-color: #CDD9E4;
 	}
@@ -689,16 +650,35 @@
 		padding-left: 1rem;
 	}
 
-	.eve-benign {
-		color: blue;
+	.esm1b-score-grad {
+		background-color: #460556;
+		background-image: linear-gradient(to right, #460556, #218c8f, #f9e725);
+		width: 8rem;
+		height: 1.5rem;
 	}
-
-	.eve-pathogenic {
-		color: red;
+	.esm1b-score-grad-std {
+		background-color: red;
+		background-image: linear-gradient(to right, blue, lightgray, red);
+		width: 8rem;
+		height: 1.5rem;
+	}
+	.score-label {
+		text-align: justify;
+		width: 8rem;
+		height: 1.5rem;
+		font-size: 0.7em;
+	}
+	.score-label:after {
+		content: "";
+		display: inline-block;
+		width: 100%;
 	}
 
-	.eve-uncertain {
-		color: lightgrey;
+	.conserv-score-grad {
+		background-color: #732faf;
+		background-image: linear-gradient(to right, #732faf, #194888, #277777, #72cb5d, #bab518, #c46307, #9d0101);
+		width: 8rem;
+		height: 1.5rem;
 	}
 }
 
@@ -776,3 +756,24 @@
 .pae-desc {
 	padding-left: 20px;
 }
+
+.aa-pred{
+	display: grid;
+	grid-template-columns: 35% 20% auto;
+}
+
+.info {
+	display: inline-block;
+	padding-left: 4px;
+	padding-right: 4px;
+}
+.info::before {
+	content: 'i';
+	font-style: italic;
+	vertical-align: super;
+	font-size: smaller;
+}
+.info:hover {
+	cursor: help;
+}
+

src/types/FunctionalResponse.ts

@@ -17,7 +17,6 @@ export interface FunctionalResponse {
     pockets: Array<Pocket>
     foldxs: Array<Foldx>
     interactions: Array<P2PInteraction>
-    conservScore: number
 }
 
 export interface GeneName {
@@ -81,7 +80,7 @@ export interface Foldx {
     position: number
     wildType: string
     mutatedType: string
-    foldxDdq: number
+    foldxDdg: number
     plddt: number
 }
 

src/types/MappingResponse.ts

@@ -118,8 +118,10 @@ interface IsoFormMapping {
 //  evolutionalInferenceUri: string;
 //  proteinStructure: Array<any>;
   proteinStructureUri: string;
-  eveScore: number;
-  eveClass: number;
+  conservScore: ConservScore;
+  amScore: AMScore;
+  eveScore: EVEScore;
+  esmScore: ESMScore;
 }
 interface Ensp {
   ensp: string;
@@ -139,4 +141,23 @@ export interface ParsedInput{
   inputString: string
   invalidReason: string
 }
+
+export interface ConservScore {
+  score:number
+}
+
+export interface EVEScore {
+  score:number
+  eveClass:string
+}
+
+export interface ESMScore {
+  score:number
+}
+
+export interface AMScore {
+  amPathogenicity:number
+  amClass:string
+}
+
 export default MappingResponse;

src/ui/App.tsx

@@ -1,4 +1,4 @@
-import {useState} from "react";
+import React, {createContext, useState} from "react";
 import {useNavigate, Route, Routes} from "react-router-dom";
 import HomePage from "./pages/home/HomePage";
 import SearchResultsPage from "./pages/search/SearchResultPage";
@@ -18,13 +18,19 @@ import DownloadPage from "./pages/download/DownloadPage";
 import HelpPage from "./pages/help/HelpPage";
 import {FormData, initialFormData} from "../types/FormData";
 
+export const StdColorContext = createContext(true);
 
 export default function App() {
+  const [stdColor, setStdColor] = useState(true);
   const [loading, setLoading] = useState(false);
   const [formData, setFormData] = useState<FormData>(initialFormData);
   const [page, setPage] = useState<Page>(firstPage(0));
   const [searchResults, setSearchResults] = useState<MappingRecord[][][]>([]);
   const navigate = useNavigate();
+  const toggleStdColor = () => {
+    setStdColor(stdColor ? false : true);
+  };
+
   // MappingRecord 3d array -> [][][] list of mappings/genes/isoforms
     // mappings : [
     //     ...
@@ -152,7 +158,7 @@ export default function App() {
       .finally(() => setLoading(false));
   }
 
-  return (
+  return (<StdColorContext.Provider value={stdColor}>
     <Routes>
       <Route
         path={HOME}
@@ -172,14 +178,16 @@ export default function App() {
             formData={formData}
             fetchNextPage={fetchPage}
             loading={loading}
+            toggleStdColor={toggleStdColor}
           />} />
-      <Route path={QUERY} element={<QueryPage />} />
+      <Route path={QUERY} element={<QueryPage toggleStdColor={toggleStdColor} />} />
       <Route path={API_ERROR} element={<APIErrorPage />} />
       <Route path={ABOUT} element={<AboutPage />} />
       <Route path={RELEASE} element={<ReleasePage />} />
       <Route path={CONTACT} element={<ContactPage />} />
       <Route path={DOWNLOAD} element={<DownloadPage searchResults={searchResults}/>} />
       <Route path={HELP} element={<HelpPage />} />
     </Routes>
+    </StdColorContext.Provider>
   );
 }

src/ui/components/common/Common.tsx

@@ -0,0 +1,10 @@
+export function Info(props: {text?: string}) {
+  if (props.text === null)
+    return <></>
+  return <div className="info" title={props.text}></div>
+}
+
+export const pubmedRef = (id: number) => {
+  return <sup><a href={`http://www.ncbi.nlm.nih.gov/pubmed/${id}`} target="_blank"
+                 rel="noreferrer" title={`Source: PubMed ID ${id}`}>ref</a></sup>
+}

src/ui/components/function/FunctionalDataRow.tsx

@@ -3,31 +3,28 @@ import ProteinFunctionTable from './ProteinFunctionTable';
 import GeneAndTranslatedSequenceTable from './GeneAndTranslatedSequenceTable';
 import ProteinInformationTable from './ProteinInformationTable';
 import ResidueRegionTable from './ResidueRegionTable';
-import { TranslatedSequence } from '../../../utills/Convertor';
+import {MappingRecord} from '../../../utills/Convertor';
 import ProteinIcon from '../../../images/proteins.svg';
 import {FunctionalResponse} from "../../../types/FunctionalResponse";
 
 interface FunctionalDataRowProps {
-  apiData: FunctionalResponse
-  refAA: string
-  variantAA: string
-  ensg: string
-  ensp: Array<TranslatedSequence>
+  functionalData: FunctionalResponse
+  record: MappingRecord
 }
 
 function FunctionalDataRow(props: FunctionalDataRowProps) {
-  const { refAA, variantAA, ensg, ensp, apiData } = props;
+  const { functionalData, record } = props;
 
   return (
     <tr>
       <td colSpan={TOTAL_COLS} className="expanded-row">
         <div className="significances-groups">
           <div className="column">
-            <h5><img src={ProteinIcon} className="click-icon" alt="protein icon" title="Functional information" /> Reference Function</h5>
-            <ResidueRegionTable apiData={apiData} refAA={refAA} variantAA={variantAA} />
-            <ProteinFunctionTable comments={apiData.comments} />
-            <ProteinInformationTable apiData={apiData} />
-            <GeneAndTranslatedSequenceTable ensg={ensg} ensp={ensp} />
+            <h5><img src={ProteinIcon} className="click-icon" alt="protein icon" title="Functional information" /> Functional information</h5>
+            <ResidueRegionTable functionalData={functionalData} record={record} />
+            <ProteinFunctionTable comments={functionalData.comments} />
+            <ProteinInformationTable apiData={functionalData} />
+            <GeneAndTranslatedSequenceTable ensg={record.ensg!} ensp={record.ensp!} />
           </div>
         </div>
       </td>