NickAkhmetov/HMP-180 Cell Types Landing Page

CHANGELOG-hmp-180.md

@@ -0,0 +1 @@
+- Added first pass implementation of cell types page.

CHANGELOG-hmp-371.md

@@ -0,0 +1 @@
+- Update MUI Theme file to use TypeScript.

CHANGELOG-swr-fixes.md

@@ -0,0 +1 @@
+- Fix some TypeScript issues in the SWR helpers.

context/app/main.py

@@ -3,7 +3,7 @@
 from . import (
     routes_main, routes_browse, routes_api, routes_file_based,
     routes_auth, routes_cells, routes_markdown, routes_notebooks,
-    routes_workspaces, default_config)
+    routes_workspaces, routes_cell_types, default_config)
 from .flask_static_digest import FlaskStaticDigest
 flask_static_digest = FlaskStaticDigest()
 
@@ -71,6 +71,7 @@ def create_app(testing=False):
     app.register_blueprint(routes_markdown.blueprint)
     app.register_blueprint(routes_notebooks.blueprint)
     app.register_blueprint(routes_workspaces.blueprint)
+    app.register_blueprint(routes_cell_types.blueprint)
 
     app.register_error_handler(400, bad_request)
     app.register_error_handler(401, unauthorized)

context/app/routes_cell_types.py

@@ -0,0 +1,92 @@
+from flask import render_template, current_app, jsonify, escape
+
+from hubmap_api_py_client import Client
+import requests
+
+from .utils import get_default_flask_data, make_blueprint, get_organs
+
+blueprint = make_blueprint(__name__)
+
+
+def _get_client(app):
+    return Client(app.config['XMODALITY_ENDPOINT'] + '/api/')
+
+
+@blueprint.route('/cell-types')
+def cell_types_ui():
+    organs = get_organs()
+    return render_template(
+        'base-pages/react-content.html',
+        title='Cell Types',
+        flask_data={**get_default_flask_data(), 'organs': organs}
+    )
+
+
+# Fetches list of all cell types
+@blueprint.route('/cell-types/list.json')
+def cell_types_list():
+    celltype_token_post = requests.post(
+        'https://cells.api.hubmapconsortium.org/api/celltype/',
+        {}).json()
+    celltype_token = celltype_token_post['results'][0]['query_handle']
+    celltype_list = requests.post('https://cells.api.hubmapconsortium.org/api/celltypeevaluation/', {
+        'key': celltype_token,
+        'set_type': 'cell_type',
+        'limit': 500}).json()
+    print(celltype_list)
+    celltype_list = celltype_list['results']
+    return jsonify(celltype_list)
+
+
+# Fetches cell type description
+@blueprint.route('/cell-types/<cell_type>/description.json')
+def cell_type_description(cell_type):
+    headers = {"accept": 'application/json'}
+    celltype_concepts = requests.get(
+        f'https://ontology.api.hubmapconsortium.org/terms/%s/concepts' % escape(cell_type),
+        headers=headers).json()
+    if (len(celltype_concepts) == 0):
+        return jsonify('No description available')
+    concept = celltype_concepts[0]
+    description = requests.get(
+        f'https://ontology.api.hubmapconsortium.org/concepts/%s/definitions' % escape(concept),
+        headers=headers).json()
+    if (len(description) == 0):
+        return jsonify('No description available')
+    return jsonify(description[0]['definition'])
+
+
+# Fetches dataset UUIDs for a given cell type
+@blueprint.route('/cell-types/<cell_type>/datasets.json')
+def cell_type_datasets(cell_type):
+    client = _get_client(current_app)
+    datasets = client.select_datasets(where='celltype', has=[cell_type]).get_list()
+    datasets = [dataset['uuid'] for dataset in list(datasets)]
+
+    return jsonify(datasets)
+
+
+# Fetches list of organs for a given cell type
+@blueprint.route('/cell-types/<cell_type>/organs.json')
+def cell_type_organs(cell_type):
+    client = _get_client(current_app)
+    organs = client.select_organs(where='celltype', has=[cell_type]).get_list()
+    organs = [organ['grouping_name'] for organ in list(organs)]
+    organs = ', '.join([organ for organ in list(organs)])
+
+    return jsonify(organs)
+
+
+# Fetches list of assays for a given cell type
+@blueprint.route('/cell-types/<cell_type>/assays.json')
+def cell_type_assays(cell_type):
+    # TODO: Uncomment when assays are available
+    # client = _get_client(current_app)
+    # assays = [assay['grouping_name']
+    #           for assay
+    #           in client.select_assays(where='celltype', has=[cell_type]).get_list()]
+    # assays = ','.join([dataset for dataset in list(assays)])
+
+    assays = ', '.join(['TBD'])
+
+    return jsonify(assays)

context/app/static/js/components/Markdown/style.js

@@ -9,7 +9,7 @@ const StyledPaper = styled(Paper)`
   padding: 30px 40px 30px 40px;
 
   a {
-    color: ${(props) => props.theme.palette.link.main};
+    color: ${(props) => props.theme.palette.common.link};
   }
 
   img {

context/app/static/js/components/Routes/Routes.jsx

@@ -33,6 +33,7 @@ const DatasetSearch = lazy(() => import('js/pages/entity-search/DatasetSearch'))
 const Workspaces = lazy(() => import('js/pages/Workspaces'));
 const WorkspacePleaseWait = lazy(() => import('js/pages/WorkspacePleaseWait'));
 const Genes = lazy(() => import('js/pages/Genes'));
+const CellTypes = lazy(() => import('js/pages/CellTypes'));
 
 function Routes({ flaskData }) {
   const {
@@ -280,6 +281,14 @@ function Routes({ flaskData }) {
     );
   }
 
+  if (urlPath.startsWith('/cell-types')) {
+    return (
+      <Route>
+        <CellTypes />
+      </Route>
+    );
+  }
+
   if ('markdown' in flaskData) {
     return (
       <Route>

context/app/static/js/components/detailPage/cellTypes/DetailPage/Header.tsx

@@ -0,0 +1,2 @@
+// Placeholder for the cells type detail page in the future
+export default {};

context/app/static/js/components/detailPage/cellTypes/LandingPage/Header.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { useCellTypesList } from '../hooks';
+
+function Header() {
+  const cellList = useCellTypesList();
+  console.warn(cellList);
+  return <Box />;
+}
+
+export default Header;

context/app/static/js/components/detailPage/cellTypes/hooks.ts

@@ -0,0 +1,14 @@
+import useSWR from 'swr';
+
+import { fetcher } from 'js/helpers/swr';
+
+export const useCellTypesList = () => {
+  const { data, error } = useSWR(`/cell-types/list.json`, (url) => fetcher({ url }), {
+    revalidateOnFocus: false,
+  });
+  return {
+    cellTypes: data,
+    isLoading: !error && !data,
+    isError: error,
+  };
+};

context/app/static/js/components/detailPage/files/DataProducts/DataProducts.tsx

@@ -43,7 +43,7 @@ export function DataProducts({ files }: DataProductsProps) {
                 <StyledInfoIcon color="primary" />
               </SecondaryBackgroundTooltip>
             </Box>
-            <FileSize size={totalFileSize} variant="body1" color="secondary.secondary" />
+            <FileSize size={totalFileSize} variant="body1" color="secondary.main" />
           </Box>
           {/* <Button variant="contained" color="primary" startIcon={<DownloadIcon />} sx={{ borderRadius: '4px' }}>
             Download All

context/app/static/js/components/detailPage/files/FileBrowserDirectory/style.js

@@ -7,7 +7,7 @@ import Box from '@mui/material/Box';
 const StyledTableRow = styled(TableRow)(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`,
   '&:hover': {
-    backgroundColor: theme.palette.hoverShadow.main,
+    backgroundColor: theme.palette.common.hoverShadow,
   },
   cursor: 'pointer',
 }));

context/app/static/js/components/detailPage/files/FileBrowserFile/style.js

@@ -8,7 +8,7 @@ import Chip from '@mui/material/Chip';
 const StyledRow = styled(TableRow)`
   border-bottom: 1px solid ${(props) => props.theme.palette.divider};
   &:hover {
-    background-color: ${(props) => props.theme.palette.hoverShadow.main};
+    background-color: ${(props) => props.theme.palette.common.hoverShadow};
   }
 `;
 

context/app/static/js/components/detailPage/provenance/ProvTableDerivedLink/style.ts

@@ -0,0 +1,19 @@
+import { styled } from '@mui/material/styles';
+
+const LinkButton = styled('a')(({ theme }) => ({
+  color: theme.palette.white.main,
+  borderRadius: theme.spacing(0.5),
+  backgroundColor: theme.palette.primary.main,
+  ...theme.typography.subtitle2,
+  marginTop: theme.spacing(1),
+  width: '175px',
+  boxSizing: 'content-box',
+  padding: theme.spacing(1, 4),
+  textAlign: 'center',
+  '&:hover': {
+    boxShadow: theme.shadows[8],
+    filter: theme.palette.primary.hover,
+  },
+}));
+
+export { LinkButton };

context/app/static/js/components/home/ExternalLink/style.js

@@ -7,7 +7,7 @@ const Flex = styled.div`
   display: flex;
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
   &:hover {
-    background-color: ${(props) => props.theme.palette.hoverShadow.main};
+    background-color: ${(props) => props.theme.palette.common.hoverShadow};
   }
 `;
 

context/app/static/js/components/searchPage/ResultsTable/style.js

@@ -40,7 +40,7 @@ const StyledTableRow = styled(TableRow)`
     padding-left: ${sidePadding};
     padding-right: ${sidePadding};
     & p {
-      color: ${(props) => props.theme.palette.halfShadow.main};
+      color: ${(props) => props.theme.palette.common.halfShadow};
       margin: 0px;
     }
   }

context/app/static/js/components/searchPage/SelectedFilter/style.js

@@ -10,7 +10,7 @@ const StyledCancelIcon = styled(CancelIcon)`
 
 const SelectedFilterDiv = styled.div`
   background-color: white;
-  border: 1px solid ${(props) => props.theme.palette.hoverShadow.main};
+  border: 1px solid ${(props) => props.theme.palette.common.hoverShadow};
   border-radius: 8px;
   margin: 8px 8px 0 0;
   display: flex;

context/app/static/js/helpers/swr/errors.ts

@@ -0,0 +1,18 @@
+type SWRErrorInfo = {
+  info: object;
+  status: number;
+};
+
+class SWRError extends Error {
+  public info: object;
+
+  public status: number;
+
+  constructor(message: string, { info, status }: SWRErrorInfo) {
+    super(message);
+    this.info = info;
+    this.status = status;
+  }
+}
+
+export { SWRError };

context/app/static/js/helpers/swr/fetchers.ts

@@ -1,9 +1,18 @@
-type fetchOptionsType = {
-  urls: string;
+import { SWRError } from './errors';
+
+type FetchOptionsType = {
   requestInit?: RequestInit;
   expectedStatusCodes?: number[];
 };
 
+type SingleFetchOptionsType = FetchOptionsType & {
+  url: string;
+};
+
+type MultiFetchOptionsType = FetchOptionsType & {
+  urls: string[];
+};
+
 /**
  * SWR fetcher which accepts an array of URLs and returns the responses as JSON
  * A custom requestInit object can be passed to fetch as well.
@@ -17,13 +26,14 @@ type fetchOptionsType = {
  * @param fetchOptions.expectedStatusCodes - Optional array of status codes which reflect a succesful request
  */
 
-export async function multiFetcher<T>({ urls, requestInit = {}, expectedStatusCodes = [200] }: fetchOptionsType) {
+export async function multiFetcher<T>({ urls, requestInit = {}, expectedStatusCodes = [200] }: MultiFetchOptionsType) {
   const f = (url: string) =>
-    fetch(url, requestInit).then((response) => {
+    fetch(url, requestInit).then(async (response) => {
       if (!expectedStatusCodes.includes(response.status)) {
-        const error = new Error(`The request to ${urls.join(', ')} failed.`);
-        error.info = response.json();
-        error.status = response.status;
+        const error = new SWRError(`The request to ${urls.join(', ')} failed.`, {
+          info: await response.json(),
+          status: response.status,
+        });
         throw error;
       }
       return response.json();
@@ -39,14 +49,14 @@ export async function multiFetcher<T>({ urls, requestInit = {}, expectedStatusCo
  * SWR fetcher which accepts a single URL and returns the response as JSON.
  * A custom requestInit object can be passed to fetch as well.
  * @example // without requestInit
- * const { data } = useSWR({ urls, multiFetcher });
+ * const { data } = useSWR({ urls, fetcher });
  * @example // with requestInit
  * const { data } = useSWR({ urls, token }, ({ urls, token }) => multiFetcher({ urls, { headers: { Authorization: `Bearer ${token}` } } })
  * @param fetchOptions
- * @param fetchOptions.urls - Array of URLs to fetch
+ * @param fetchOptions.url - URL to fetch
  * @param fetchOptions.requestInit - Optional RequestInit object to pass to fetch
  * @param fetchOptions.expectedStatusCodes - Optional array of status codes which reflect a succesful request
  */
-export async function fetcher<T>({ url, requestInit = {}, expectedStatusCodes = [200] }: fetchOptionsType) {
+export async function fetcher<T>({ url, requestInit = {}, expectedStatusCodes = [200] }: SingleFetchOptionsType) {
   return multiFetcher({ urls: [url], requestInit, expectedStatusCodes }).then((data) => data[0]) as Promise<T>;
 }

context/app/static/js/pages/CellTypes/CellTypes.tsx

@@ -0,0 +1,13 @@
+import { Stack } from '@mui/material';
+import Header from 'js/components/detailPage/cellTypes/LandingPage/Header';
+import React from 'react';
+
+function CellTypes() {
+  return (
+    <Stack spacing={3} direction="column">
+      <Header />
+    </Stack>
+  );
+}
+
+export default CellTypes;

context/app/static/js/pages/CellTypes/index.ts

@@ -0,0 +1,3 @@
+import CellTypes from './CellTypes';
+
+export default CellTypes;

context/app/static/js/shared-styles/panels/Panel/style.js

@@ -20,7 +20,7 @@ const PanelBox = styled.div`
   flex-direction: column;
 
   &:hover {
-    background-color: ${(props) => props.theme.palette.hoverShadow.main};
+    background-color: ${(props) => props.theme.palette.common.hoverShadow};
   }
   @media (min-width: ${(props) => props.theme.breakpoints.values.md}px) {
     flex-direction: row;

context/app/static/js/shared-styles/panels/index.js

@@ -20,7 +20,7 @@ const PanelWrapper = styled.div`
   flex-direction: column;
 
   &:hover {
-    background-color: ${(props) => props.theme.palette.hoverShadow.main};
+    background-color: ${(props) => props.theme.palette.common.hoverShadow};
   }
   @media (min-width: ${(props) => props.theme.breakpoints.values.md}px) {
     flex-direction: row;

context/app/static/js/theme/index.ts

@@ -0,0 +1,3 @@
+import Theme from './theme';
+
+export default Theme;