Dev2

src/constants/BrowserPaths.ts

@@ -1,6 +1,6 @@
 export const ABOUT = "/about"
 export const CONTACT = "/contact"
-export const SEARCH = "/results"
+export const RESULT = "/result" //[/:id]
 export const QUERY = "/query"
 export const HOME = "/"
 export const API_ERROR = "/error"

src/constants/const.ts

@@ -1,13 +1,18 @@
 export const API_URL = process.env.REACT_APP_API_BASE_URL;
 export const NO_OF_ITEMS_PER_PAGE = 25;
-export const MAX_IN_PLACE_DOWNLOAD_WITHOUT_EMAIL = 25;
+export const PAGE_SIZES = [25, 50, 100]
+export const PAGE_SIZE = 25
 export const G2P_MAPPING_URI = `${API_URL}/mappings`;
-export const DOWNLOAD_URI = `${API_URL}/download/stream`;
-export const EMAIL_URI = `${API_URL}/email/process`;
-export const API_HEADERS = { "Content-Type": "application/json", Accept: "*" };
+export const DEFAULT_HEADERS = {"Content-Type": "application/json", Accept: "*"};
+
+export const CONTENT_TEXT = {"Content-Type": "text/plain"}
+export const CONTENT_MULTIPART = {"Content-Type": "multipart/form-data"}
 export const DOWNLOAD_STATUS=`${API_URL}/download/status`;
 export const LOCAL_DOWNLOADS='PV_downloads';
+export const LOCAL_RESULTS='PV_results';
 export const DISMISS_BANNER = 'PV_banner';
+
+// TODO resubscribe option - clears the localData
 export const SUBSCRIPTION_STATUS = 'PV_subscribed';
 export const TITLE='EMBL-EBI ProtVar - Contextualising human missense variation'
 export const PV_FTP = 'https://ftp.ebi.ac.uk/pub/databases/ProtVar'

src/index.tsx

@@ -1,7 +1,7 @@
+import './styles/index.scss';
 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';

src/provider/LocalStorageContextProps.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+
+interface LocalStorageContextProps {
+  getValue: <T>(key: string) => T | null;
+  setValue: <T>(key: string, value: T) => void;
+  deleteValue: (key: string) => void;
+}
+
+const LocalStorageContext = createContext<LocalStorageContextProps | undefined>(undefined);
+
+export const useLocalStorageContext = () => {
+  const context = useContext(LocalStorageContext);
+  if (!context) {
+    throw new Error('useLocalStorageContext must be used within a LocalStorageProvider');
+  }
+  return context;
+};
+
+export const LOCAL_STORAGE_SET = "localStore"
+
+export const LocalStorageProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+
+  const getValue = <T,>(key: string): T | null => {
+    const storedValue = localStorage.getItem(key);
+    return storedValue ? JSON.parse(storedValue) : null;
+  };
+
+  const setValue = <T,>(key: string, value: T): void => {
+    localStorage.setItem(key, JSON.stringify(value));
+    const event = new CustomEvent(LOCAL_STORAGE_SET, { detail: key });
+    window.dispatchEvent(event)
+  };
+
+  const deleteValue = (key: string): void => {
+    localStorage.removeItem(key);
+  };
+
+  return (
+    <LocalStorageContext.Provider value={{ getValue, setValue, deleteValue }}>
+      {children}
+    </LocalStorageContext.Provider>
+  );
+};

src/services/ProtVarService.ts

@@ -1,88 +1,158 @@
 import axios, {AxiosResponse} from 'axios';
-import { setupCache } from 'axios-cache-interceptor/dist/index.bundle';
-import {API_HEADERS, API_URL, DOWNLOAD_STATUS, G2P_MAPPING_URI} from "../constants/const";
+import {setupCache} from 'axios-cache-interceptor/dist/index.bundle';
+import {
+  API_URL,
+  CONTENT_MULTIPART,
+  CONTENT_TEXT,
+  DEFAULT_HEADERS,
+  DOWNLOAD_STATUS,
+  G2P_MAPPING_URI
+} from "../constants/const";
 import {FunctionalResponse} from "../types/FunctionalResponse";
 import {PopulationObservationResponse} from "../types/PopulationObservationResponse";
 import {ProteinStructureResponse} from "../types/ProteinStructureResponse";
 import MappingResponse from "../types/MappingResponse";
-import {DownloadResponse} from "../types/DownloadResponse";
+import {DownloadRecord} from "../types/DownloadRecord";
+import {IDResponse, PagedMappingResponse, ResultType} from "../types/PagedMappingResponse";
 
 
 const instance = axios.create({
-    baseURL: API_URL
+  baseURL: API_URL
 });
 
 const api = setupCache(instance, {})
 
+// Coordinate Mapping
+// POST /mappings
 export function mappings(inputArr: string[], assembly?: string) {
-    return api.post<any, string[], AxiosResponse<MappingResponse>>(
-            G2P_MAPPING_URI,
-        inputArr,
-            {
-                params : { assembly },
-                headers: API_HEADERS,
-            }
-        );
+  return api.post<any, string[], AxiosResponse<MappingResponse>>(
+    G2P_MAPPING_URI,
+    inputArr,
+    {
+      params: {assembly},
+      headers: DEFAULT_HEADERS,
+    }
+  );
 }
 
+// POST /mapping/input
+// IN: text
+// OUT: PagedMappingResponse
+// See getResult
+export function submitInput(text: string, assembly?: string) {
+  return api.post<PagedMappingResponse>(
+    `${API_URL}/mapping/input`, text,
+    {
+      params: {assembly}, // idOnly defaults to false i.e. PagedMappingResponse is returned
+      headers: CONTENT_TEXT
+    }
+  );
+}
 
-export function downloadFileInput(file: File, assembly: string, email: string, jobName: string, functional: boolean, population: boolean, structure: boolean) {
-    const formData = new FormData();
-    formData.append('file', file);
-    return api.post<any, FormData, AxiosResponse<DownloadResponse>>(
-        `${API_URL}/download/fileInput`,
-        formData,
-        {
-            params : { email, jobName, function: functional, population, structure, assembly },
-            headers: {
-                'Content-Type': 'multipart/form-data'
-            },
-        }
-    );
+// POST /mapping/input
+// IN: text
+// OUT: IDResponse
+export function submitInputText(text: string, assembly?: string, idOnly: boolean = true) {
+  return api.post<IDResponse>(
+    `${API_URL}/mapping/input`, text,
+    {
+      params: {assembly, idOnly},
+      headers: CONTENT_TEXT
+    }
+  );
 }
 
-export function downloadTextInput(inputArr: string[], assembly: string, email: string, jobName: string, functional: boolean, population: boolean, structure: boolean) {
-    return api.post<any, string[], AxiosResponse<DownloadResponse>>(
-        `${API_URL}/download/textInput`,
-        inputArr,
-        {
-            params : { email, jobName, function: functional, population, structure, assembly },
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: '*'
-            },
-        }
-    );
+// POST /mapping/input
+// IN: file
+// OUT: IDResponse
+export function submitInputFile(file: File, assembly?: string, idOnly: boolean = true) {
+  const formData = new FormData();
+  formData.append('file', file);
+  return api.post<any, FormData, AxiosResponse<IDResponse>>(
+    `${API_URL}/mapping/input`,
+    formData,
+    {
+      params: {assembly, idOnly},
+      headers: CONTENT_MULTIPART,
+    }
+  );
+}
+
+// GET /mapping/input/{id}
+// IN: id
+// OUT: PagedMappingResponse
+export function getResult(type: ResultType, id: string, page?: number, pageSize?: number, assembly: string|null = null) {
+  let url = ''
+  let params = {}
+
+  if (type === ResultType.SEARCH) {
+    url = `${API_URL}/mapping/input/${id}`
+    params = {page, pageSize, assembly}
+  } else {
+    url = `${API_URL}/mapping/protein/${id}`
+    params = {page, pageSize}
+  }
+
+  return api.get<PagedMappingResponse>(
+    url,
+    {
+      params: params,
+      headers: DEFAULT_HEADERS,
+    }
+  );
 }
 
+// Annotation
 export function getFunctionalData(url: string) {
-    return api.get<FunctionalResponse>(url).then(
-        response => {
-            if (response.data.interactions && response.data.interactions.length > 1) {
-                response.data.interactions.sort((a, b) => b.pdockq - a.pdockq);
-            }
-            return response;
-        }
-    );
+  return api.get<FunctionalResponse>(url).then(
+    response => {
+      if (response.data.interactions && response.data.interactions.length > 1) {
+        response.data.interactions.sort((a, b) => b.pdockq - a.pdockq);
+      }
+      return response;
+    }
+  );
 }
 
 export function getPopulationData(url: string) {
-    return api.get<PopulationObservationResponse>(url);
+  return api.get<PopulationObservationResponse>(url);
 }
 
 export function getStructureData(url: string) {
-    return api.get<ProteinStructureResponse>(url);
+  return api.get<ProteinStructureResponse>(url);
+}
+
+// Download
+export function downloadFileInput(file: File, assembly: string, email: string, jobName: string, functional: boolean, population: boolean, structure: boolean) {
+  const formData = new FormData();
+  formData.append('file', file);
+  return api.post<any, FormData, AxiosResponse<DownloadRecord>>(
+    `${API_URL}/download/fileInput`,
+    formData,
+    {
+      params: {email, jobName, function: functional, population, structure, assembly},
+      headers: CONTENT_MULTIPART,
+    }
+  );
+}
+
+export function downloadTextInput(inputArr: string[], assembly: string, email: string, jobName: string, functional: boolean, population: boolean, structure: boolean) {
+  return api.post<any, string[], AxiosResponse<DownloadRecord>>(
+    `${API_URL}/download/textInput`,
+    inputArr,
+    {
+      params: {email, jobName, function: functional, population, structure, assembly},
+      headers: DEFAULT_HEADERS,
+    }
+  );
 }
 
 export function getDownloadStatus(ids: string[]) {
-    return api.post(
-        DOWNLOAD_STATUS,
-        ids,
-        {
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: '*'
-            },
-        }
-    );
-}
+  return api.post(
+    DOWNLOAD_STATUS,
+    ids,
+    {
+      headers: DEFAULT_HEADERS,
+    }
+  );
+}

src/styles/index.scss

@@ -63,3 +63,34 @@
 .trash-btn:hover {
   cursor: pointer;
 }
+
+.result-op-btn {
+  float: right;
+  font-size: 10px;
+  font-weight: bolder;
+  color: black;
+  padding: 4px;
+  border-radius: 20%;
+  border-bottom-color: lightgrey;
+}
+.result-op-btn:hover {
+  font-weight: bolder;
+  background-color: #e7e7e7;
+  cursor: pointer;
+}
+
+.download-count {
+  float: right;
+  min-width: 24px;
+  text-align: center;
+  display: inline-block;
+  //padding: 0.1rem 0.2rem;
+  //margin-right: 1rem;
+  //margin-bottom: 0.3rem;
+  border: none;
+  border-radius: 0.75rem;
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  background-color: #00709b;
+}

src/types/DownloadResponse.ts → src/types/DownloadRecord.ts

@@ -1,5 +1,5 @@
 
-export interface DownloadResponse {
+export interface DownloadRecord {
     inputType: string
     requested: Date
     downloadId: string

src/types/FormData.ts

@@ -10,4 +10,16 @@ export const initialFormData = {
     userInputs: [],
     file: null,
     assembly: DEFAULT_ASSEMBLY
+}
+
+export interface Form {
+    text: string
+    file: File | null
+    assembly: Assembly
+}
+
+export const initialForm = {
+    text: '',
+    file: null,
+    assembly: DEFAULT_ASSEMBLY
 }

src/types/MappingResponse.ts

@@ -84,7 +84,7 @@ export interface GenomeProteinMapping {
   genes: Array<Gene>;
   //input: string;
 }
-interface Gene {
+export interface Gene {
   ensg: string;
   reverseStrand: boolean;
   geneName: string;
@@ -94,7 +94,7 @@ interface Gene {
   caddScore: number;
 }
 // TODO clean up unused commented properties below
-interface IsoFormMapping {
+export interface IsoFormMapping {
   accession: string;
   canonical: boolean;
   canonicalAccession: string;