Release 2.2rc1

.eslintrc.json

@@ -34,7 +34,8 @@
       {
         "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }
-    ]
+    ],
+    "@typescript-eslint/no-explicit-any": "off"
   },
   "settings": {
     "react": {

.gitignore

@@ -49,3 +49,12 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.pre-commit-config.yaml

@@ -32,7 +32,7 @@ repos:
     hooks:
       - id: yarn-audit
         name: yarn audit
-        entry: npx yarn audit --groups dependencies
+        entry: npx yarn audit
         language: system
         pass_filenames: false
 

.prettierignore

@@ -1,11 +1,12 @@
 # See https://prettier.io/docs/en/ignore.html
 
 # Ignore artifacts:
-build
-coverage
-local_ignore
-bams
-vcfs
+build/
+coverage/
+local_ignore/
+bams/
+vcfs/
+htsget/
 
 # Ignore all HTML files:
 *.html
@@ -15,3 +16,8 @@ buildspec.yml
 docker-compose.yml
 README.md
 start.sh
+
+.yarnrc.yml
+.yarn/
+.local/
+dist/

.yarnrc.yml

@@ -0,0 +1,11 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
+    spec: "https://mskelton.dev/yarn-outdated/v3"
+  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
+    spec: "@yarnpkg/plugin-typescript"
+
+yarnPath: .yarn/releases/yarn-3.5.1.cjs

README.md

@@ -38,9 +38,14 @@ git push origin main
 ### TL;DR
 ```
 node -v
-v16.15.0
+v18.16.0
 
 npm i -g yarn
+
+(NOTE: yarn should auto resolve to local version from `.yarn` that configure in `package.json` > `packageManager`)
+yarn -v
+3.5.1
+
 yarn install
 
 aws sso login --profile dev

buildspec.yml

@@ -2,7 +2,7 @@ version: 0.2
 phases:
   install:
     runtime-versions:
-      nodejs: 14
+      nodejs: 18
     commands:
       - yarn install
   build:

package.json

@@ -1,53 +1,57 @@
 {
   "name": "data-portal-client",
-  "version": "2.1.0",
+  "version": "2.2.0-rc.1",
   "private": true,
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=18.0.0"
   },
   "scripts": {
-    "start": "source start.sh",
-    "dev": "source start.sh",
+    "start": "bash -c 'source start.sh'",
+    "dev": "bash -c 'source start.sh'",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint src",
     "prettier": "prettier --check .",
-    "precommit": "pre-commit run --all-files"
+    "prettier-fix": "prettier --write .",
+    "precommit": "pre-commit run --all-files",
+    "audit": "yarn npm audit"
   },
   "dependencies": {
-    "@aws-amplify/api": "^5.0.22",
-    "@aws-amplify/auth": "^5.2.0",
-    "@aws-amplify/core": "^5.1.5",
-    "@aws-sdk/client-lambda": "^3.300.0",
-    "igv": "2.13.11",
+    "@aws-amplify/api": "^5.4.5",
+    "@aws-amplify/auth": "^5.6.5",
+    "@aws-amplify/core": "^5.8.5",
+    "@aws-sdk/client-lambda": "^3.436.0",
+    "igv": "2.15.11",
+    "lodash": "^4.17.21",
     "mime": "^3.0.0",
     "moment": "^2.29.4",
-    "primeflex": "^3.3.0",
+    "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primereact": "^8.7.3",
+    "primereact": "^9.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-json-pretty": "^2.2.0",
     "react-query": "^3.39.3",
-    "react-router-dom": "^6.9.0",
-    "unsplash-js": "^7.0.15"
+    "react-router-dom": "^6.17.0",
+    "unsplash-js": "^7.0.18"
   },
   "devDependencies": {
-    "@types/mime": "^3.0.1",
-    "@types/node": "^18.15.10",
-    "@types/react": "^18.0.30",
-    "@types/react-dom": "^18.0.11",
+    "@types/lodash": "^4.14.200",
+    "@types/mime": "^3.0.3",
+    "@types/node": "^20.8.9",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.57.0",
-    "@typescript-eslint/parser": "^5.57.0",
-    "@vitejs/plugin-react": "^3.1.0",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "prettier": "^2.8.7",
-    "typescript": "^4.9.4",
-    "vite": "^4.2.1"
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "@vitejs/plugin-react": "^4.1.0",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.1",
+    "prettier": "^3.0.1",
+    "typescript": "^5.1.6",
+    "vite": "^4.5.0"
   },
-  "resolutions": {}
+  "packageManager": "yarn@3.5.1"
 }

src/api/fastq.ts

@@ -19,16 +19,22 @@ export type FastqRow = {
 
 export type FastqApiRes = DjangoRestApiResponse & { results: FastqRow[] };
 type UsePortalFastqAPIProps = {
-  additionalPath: string;
+  additionalPath?: string;
   apiConfig: Record<string, any>;
+  useQueryOption?: Record<string, any>;
 };
-export function usePortalFastqAPI({ additionalPath, apiConfig }: UsePortalFastqAPIProps) {
+export function usePortalFastqAPI({
+  additionalPath = '',
+  apiConfig,
+  useQueryOption,
+}: UsePortalFastqAPIProps) {
   return useQuery(
     ['portal-fastq', additionalPath, apiConfig],
     async (): Promise<FastqApiRes> =>
       await API.get('portal', `/fastq/${additionalPath}`, apiConfig),
     {
       staleTime: Infinity,
+      ...useQueryOption,
     }
   );
 }

src/api/gds.ts

@@ -54,14 +54,30 @@ export type PresignApiData = {
 export function usePortalGDSPresignAPI(gdsId?: string | number, apiConfig?: Record<string, any>) {
   return useQuery(
     ['portal-gds-presign', gdsId, apiConfig],
-    async () => await API.get('portal', `/gds/${gdsId}/presign`, { ...apiConfig }),
+    async (): Promise<PresignApiData> =>
+      await API.get('portal', `/gds/${gdsId}/presign`, { ...apiConfig }),
     {
       staleTime: 60 * 60 * 1000, // 1hour,
       enabled: !!gdsId,
     }
   );
 }
 
+/**
+ * Generate a brand new presigned url for the particular object Id.
+ *
+ * By default, the API it will have 'Attachment' Content-Disposition. For 'inline' set the 'Content-Disposition' and 'Content-Type'.
+ * Example on specifying inline in the apiConfig as follows. 
+    {
+      "headers": {
+        "Content-Disposition": "inline",
+        "Content-Type": "text/html"
+      }
+    }
+ * @param id
+ * @param apiConfig
+ * @returns
+ */
 export async function getGDSPreSignedUrl(id: number, apiConfig?: Record<string, any>) {
   const { error, signed_url } = await API.get('portal', `/gds/${id}/presign`, { ...apiConfig });
   if (error) {

src/api/lims.ts

@@ -20,7 +20,7 @@ export type LimsRow = {
   assay: string;
   override_cycles: string;
   phenotype: string;
-} & Record<string, string>;
+} & Record<string, string | number | null>;
 
 export type LimsApiRes = DjangoRestApiResponse & { results: LimsRow[] };
 

src/api/s3.ts

@@ -38,7 +38,7 @@ export type PresignApiData = {
 export function usePortalS3PresignAPI(s3Id?: string | number) {
   return useQuery(
     ['portal-s3-presign', s3Id],
-    async () => await API.get('portal', `/s3/${s3Id}/presign`, {}),
+    async (): Promise<PresignApiData> => await API.get('portal', `/s3/${s3Id}/presign`, {}),
     {
       staleTime: 60 * 60 * 1000, // 1hour,
       enabled: !!s3Id,

src/api/subject.ts

@@ -2,13 +2,14 @@ import { API } from '@aws-amplify/api';
 import { useQuery } from 'react-query';
 import { S3Row } from './s3';
 import { GDSRow } from './gds';
+import { LimsRow } from './lims';
 /**
  * Portal `/subject/{subjectId}` api
  */
 
 export type SubjectApiRes = {
   id: string;
-  lims: Record<string, string | number | boolean | null>[];
+  lims: LimsRow[];
   features: string;
   results: S3Row[];
   results_gds: GDSRow[];

src/app.css

@@ -3,7 +3,7 @@ button {
 }
 
 body {
-  /*background-color: rgb(231, 235, 240);*/
+  background-color: rgb(231, 235, 240);
 }
 
 .p-listbox-item:focus {

src/components/CircularLoaderWithText/index.tsx

@@ -17,8 +17,7 @@ export default function CircularLoaderWithText(props: Props): React.ReactElement
       }}>
       <ProgressSpinner
         style={{ height: spinnerSize, width: spinnerSize }}
-        strokeWidth='8'
-        fill='var(--surface-ground)'
+        strokeWidth='4'
         animationDuration='.5s'
       />
       {props.text ? <div style={{ paddingTop: '1rem' }}>{text}</div> : <></>}

src/components/DataTableWrapper/index.css

@@ -1,4 +1,4 @@
-.p-dropdown{
+.p-dropdown {
   margin-right: auto;
 }
 .p-datatable-wrapper {
@@ -10,6 +10,20 @@
   border-radius: 50% !important;
 }
 
+.p-paginator .p-paginator-current {
+  background-color: transparent !important;
+  border: 0 none !important;
+  color: #6c757d !important;
+  min-width: 3rem !important;
+  height: 3rem !important;
+  margin: 0.143rem !important;
+  padding: 0 0.5rem !important;
+}
+
+.p-paginator-pages button {
+  margin: 0.1rem !important;
+}
+
 .ui-datatable-hor-scroll .ui-datatable-tablewrapper,
 .scrolling-div .ui-datatable-tablewrapper {
   overflow: auto;

src/components/DataTableWrapper/index.tsx

@@ -1,10 +1,5 @@
 import React, { useState } from 'react';
-import {
-  DataTable,
-  DataTableProps,
-  DataTablePFSEvent,
-  DataTableSortOrderType,
-} from 'primereact/datatable';
+import { DataTable, DataTableProps, DataTableStateEvent } from 'primereact/datatable';
 import { Column, ColumnProps } from 'primereact/column';
 import { Dialog } from 'primereact/dialog';
 import { Button } from 'primereact/button';
@@ -25,13 +20,13 @@ export type PaginationProps = {
 type DataTableWrapperProps = {
   columns: ColumnProps[];
   isLoading: boolean;
-  dataTableValue: unknown[];
-  overrideDataTableProps?: DataTableProps;
+  dataTableValue: Record<string, any>[];
+  overrideDataTableProps?: DataTableProps<Record<string, any>[]>;
   paginationProps?: PaginationProps;
   handlePaginationPropsChange?: (event: { [key: string]: number }) => void;
   sortField?: string;
-  sortOrder?: DataTableSortOrderType;
-  onSort?: (event: DataTablePFSEvent) => void;
+  sortOrder?: 0 | 1 | -1 | null;
+  onSort?: (event: DataTableStateEvent) => void;
 };
 
 function DataTableWrapper(props: DataTableWrapperProps) {
@@ -47,7 +42,8 @@ function DataTableWrapper(props: DataTableWrapperProps) {
     onSort,
   } = props;
 
-  const additionalDataTableProps = { ...overrideDataTableProps };
+  const additionalDataTableProps = overrideDataTableProps ? { ...overrideDataTableProps } : {};
+
   // Pagination could be undefined (if not needed or don't want it)
   // This will guard if pagination props exist and could be mounter to the UI
   if (paginationProps && handlePaginationPropsChange) {
@@ -79,7 +75,6 @@ function DataTableWrapper(props: DataTableWrapperProps) {
       loading={isLoading}
       rowHover
       size='small'
-      responsiveLayout='scroll'
       className='ui-datatable-hor-scroll'
       emptyMessage='No Data found!'
       resizableColumns
@@ -195,19 +190,19 @@ export const convertPaginationEventToDjangoQueryParams = (event: { [key: string]
 /**
  * Django to Data Table Sorting Props
  */
-export type djangoSortingFormat = {
-  sortOrder: DataTableSortOrderType;
+export type DjangoSortingFormat = {
+  sortOrder: 0 | 1 | -1 | null | undefined;
   sortField: string;
 };
-export function convertDjangoStateToDjangoQuery(state: djangoSortingFormat) {
+export function convertDjangoStateToDjangoQuery(state: DjangoSortingFormat) {
   const ordering = state.sortOrder == -1 ? '-' : '';
   return {
     ordering: `${ordering}${state.sortField}`,
   };
 }
-type queryParamDjango = { ordering?: string } & Record<string, string | number>;
+type QueryParamDjango = { ordering?: string } & Record<string, string | number>;
 export function convertDjangoSortParamToDataTableProp(
-  queryParam: queryParamDjango
+  queryParam: QueryParamDjango
 ): Record<string, any> {
   const ordering = queryParam.ordering ?? '-id';
   const sortOrder = ordering.startsWith('-') ? -1 : 1;