update to 0.10.46

uc-cdis · Oct 2, 2024 · 501b448 · 501b448
1 parent bf06092
commit 501b448
Show file tree

Hide file tree

Showing 10 changed files with 1,299 additions and 1,784 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,16 +18,32 @@
     "getDRSToHostname": "node ./node_modules/@gen3/toolsff/dist/getDRSToHostname.esm.js --out=config/"
   },
   "dependencies": {
-    "@gen3/frontend": "https://github.com/uc-cdis/gen3-frontend-framework/releases/download/v0.10.0-alpha/gen3-frontend-0.10.36.tgz",
-    "@mantine/core": "^6.0.21",
+    "@axe-core/react": "^4.10.0",
+    "@fontsource/montserrat": "^5.0.19",
+    "@fontsource/poppins": "^5.0.15",
+    "@fontsource/source-sans-pro": "^5.0.8",
+    "@gen3/core": "^0.10.46",
+    "@gen3/frontend": "^0.10.46",
+    "@grafana/faro-react": "^1.9.1",
+    "@grafana/faro-web-sdk": "^1.9.1",
+    "@grafana/faro-web-tracing": "^1.9.1",
+    "@mantine/core": "^7.12.1",
+    "@mantine/form": "^7.12.1",
+    "@mantine/hooks": "^7.12.1",
+    "@mantine/modals": "^7.12.1",
+    "@mantine/notifications": "^7.12.1",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
-    "@next/mdx": "^14.2.3",
+    "@next/mdx": "^14.2.8",
     "@types/mdx": "^2.0.11",
-    "cookies-next": "^4.1.1"
+    "cookies-next": "^4.1.1",
+    "mantine-react-table": "^2.0.0-beta.6",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0",
+    "swr": "^2.2.5"
   },
   "devDependencies": {
-    "@gen3/toolsff": "https://github.com/uc-cdis/gen3-frontend-framework/releases/download/v0.10.0-alpha/gen3-toolsff-0.10.36.tgz",
+    "@gen3/toolsff": "^0.10.46",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
@@ -41,22 +57,22 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-config-next": "14.2.3",
-    "next": "^14.2.3",
+    "eslint-config-next": "14.2.8",
+    "next": "^14.2.8",
     "postcss": "^8.4.29",
+    "postcss-import": "^16.1.0",
     "postcss-loader": "^7.3.2",
+    "postcss-modules": "^6.0.0",
     "postcss-preset-env": "^8.4.2",
+    "postcss-preset-mantine": "^1.17.0",
     "prettier": "^2.7.1",
-    "react": "^18.2.0",
-    "react-dom": "18.2.0",
-    "tailwindcss": "^3.3.7",
-    "ts-jest": "^29.0.3",
+    "tailwindcss": "^3.4.10",
+    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.1",
-    "typescript": "5.0.2",
-    "@typescript-eslint/eslint-plugin": "^7.12.0"
+    "typescript": "5.6.2"
   },
   "peerDependencies": {
-    "@gen3/core": "https://github.com/uc-cdis/gen3-frontend-framework/releases/download/v0.10.0-alpha/gen3-core-0.10.36.tgz",
+    "@gen3/core": "^0.10.46",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

diff --git a/src/lib/CohortBuilder/FileDetailsPanel.tsx b/src/lib/CohortBuilder/FileDetailsPanel.tsx
@@ -61,11 +61,11 @@ const extractData = (
 };
 
 export const FileDetailsPanel = ({
-  id,
-  index,
-  tableConfig,
-  onClose,
-}: TableDetailsPanelProps) => {
+                                   id,
+                                   index,
+                                   tableConfig,
+                                   onClose,
+                                 }: TableDetailsPanelProps) => {
   // get the idField from the configuration
   const idField = tableConfig.detailsConfig?.idField;
   // call the general Guppy GQL which takes an object { query: string, variables: object }
@@ -104,11 +104,11 @@ export const FileDetailsPanel = ({
 
   // create the rows for the table
   const rows = Object.entries(queryData).map(([field, value]) => (
-    <tr key={field}>
-      <td>
-        <Text weight="bold">{field}</Text>
-      </td>
-      <td>
+    <Table.Tr key={field}>
+      <Table.Td>
+        <Text fw="bold">{field}</Text>
+      </Table.Td>
+      <Table.Td>
         {/*
           if field is one that we want a link for make it an Anchor otherwise
           render as text.
@@ -125,23 +125,23 @@ export const FileDetailsPanel = ({
         ) : (
           <Text>{value ? (value as string) : ''}</Text>
         )}
-      </td>
-    </tr>
+      </Table.Td>
+    </Table.Tr>
   ));
   return (
     <Stack>
       <LoadingOverlay visible={isLoading} />
       <Text color="primary.4">Results for {id}</Text>
-      <Table withBorder withColumnBorders>
-        <thead>
-          <tr>
-            <th>Field</th>
-            <th>Value</th>
-          </tr>
-        </thead>
+      <Table withTableBorder withColumnBorders>
+        <Table.Th>
+          <Table.Td>
+            <Table.Th>Field</Table.Th>
+            <Table.Th>Value</Table.Th>
+          </Table.Td>
+        </Table.Th>
         <tbody>{rows}</tbody>
       </Table>
-      <Group position="right">
+      <Group >
         <CopyButton value={JSON.stringify(queryData)} timeout={2000}>
           {({ copied, copy }) => (
             <Tooltip

diff --git a/src/lib/Discovery/CustomRowRenderers.tsx b/src/lib/Discovery/CustomRowRenderers.tsx
@@ -30,7 +30,7 @@ const DetailsWithTagsRowRenderer = (
 
   return (
     <Box
-      sx={{
+      style={{
         display: 'flex',
         width: '100%',
       }}

diff --git a/src/lib/Discovery/Filemap.tsx b/src/lib/Discovery/Filemap.tsx
@@ -151,7 +151,7 @@ export const FilemapPopup = ({ value }: CellRenderFunctionProps) => {
           {value[0].length}
         </Button>
       </Popover.Target>
-      <Popover.Dropdown sx={{ pointerEvents: 'none' }}>
+      <Popover.Dropdown style={{ pointerEvents: 'none' }}>
         <div style={{ width: 380 }}>
           <ReactECharts option={chartDefinition} />
         </div>

diff --git a/src/lib/Grafana/grafana.ts b/src/lib/Grafana/grafana.ts
@@ -0,0 +1,42 @@
+import {
+  getWebInstrumentations,
+  initializeFaro,
+  ReactIntegration,
+} from '@grafana/faro-react';
+import { TracingInstrumentation } from '@grafana/faro-web-tracing';
+
+// Get the current, runtime version of the App to surface to Faro
+// import packageJson from "../../package.json";
+
+export const initGrafanaFaro = () => {
+  return initializeFaro({
+    url: 'https://faro.planx-pla.net/collect',
+
+    app: {
+      name: 'bih-data-commons',
+      //   version: packageJson.version,
+      version: '10.0.0',
+      environment: 'local',
+    },
+
+    instrumentations: [
+      // load the mandatory web instrumentation
+      ...getWebInstrumentations({
+        captureConsole: true,
+      }),
+
+      // add tracing instrumentation which should include the React Profiler
+      new TracingInstrumentation(),
+
+      new ReactIntegration({
+        // In the future, we may choose to integrate with React router instrumentation to
+        // get deeper metrics on matched routes, navigation types, etc.
+        // Next/router doesn't seem to be supported which won't give us route metrics.
+        //
+        // Reference: https://github.com/grafana/faro-web-sdk/tree/main/packages/react
+        //
+        // router: {}
+      }),
+    ],
+  });
+};
diff --git a/src/pages/SamplePage.tsx b/src/pages/SamplePage.tsx
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,5 +1,6 @@
-import App, { AppProps, AppContext, AppInitialProps } from 'next/app';
-import { useEffect } from 'react';
+import App, {AppProps, AppContext, AppInitialProps} from 'next/app';
+import React, {useEffect, useRef } from 'react';
+import { Faro, FaroErrorBoundary, withFaroProfiler } from "@grafana/faro-react";
 import {
   Gen3Provider,
   TenStringArray,
@@ -12,9 +13,22 @@ import {
 import '../styles/globals.css';
 import 'graphiql/graphiql.css';
 import '@graphiql/react/dist/style.css';
-import { GEN3_COMMONS_NAME, setDRSHostnames } from '@gen3/core';
+import '@fontsource/montserrat';
+import '@fontsource/source-sans-pro';
+import '@fontsource/poppins';
+import {GEN3_COMMONS_NAME, setDRSHostnames} from '@gen3/core';
 import drsHostnames from '../../config/drsHostnames.json';
 
+import { initGrafanaFaro } from '../lib/Grafana/grafana';
+
+if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const ReactDOM = require('react-dom');
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const axe = require('@axe-core/react');
+  axe(React, ReactDOM, 1000);
+}
+
 interface Gen3AppProps {
   colors: Record<string, TenStringArray>;
   icons: RegisteredIcons;
@@ -24,28 +38,42 @@ interface Gen3AppProps {
 }
 
 const Gen3App = ({
-  Component,
-  pageProps,
-  colors,
-  icons,
-  themeFonts,
-  sessionConfig,
-  modalsConfig,
-}: AppProps & Gen3AppProps) => {
+                   Component,
+                   pageProps,
+                   colors,
+                   icons,
+                   themeFonts,
+                   sessionConfig,
+                   modalsConfig,
+                 }: AppProps & Gen3AppProps) => {
   useEffect(() => {
     setDRSHostnames(drsHostnames);
   }, []);
 
+  const faroRef = useRef<null | Faro>(null);
+
+  useEffect(() => {
+    // if (
+    //   process.env.NEXT_PUBLIC_FARO_COLLECTOR_URL &&
+    //   process.env.NEXT_PUBLIC_FARO_APP_ENVIRONMENT != "local" &&
+    //   !faroRef.current
+    // ) {
+    faroRef.current = initGrafanaFaro();
+    // }
+  }, []);
+
   return (
-    <Gen3Provider
-      colors={colors}
-      icons={icons}
-      fonts={themeFonts}
-      sessionConfig={sessionConfig}
-      modalsConfig={modalsConfig}
-    >
-      <Component {...pageProps} />
-    </Gen3Provider>
+    <FaroErrorBoundary>
+      <Gen3Provider
+        colors={colors}
+        icons={icons}
+        fonts={themeFonts}
+        sessionConfig={sessionConfig}
+        modalsConfig={modalsConfig}
+      >
+        <Component {...pageProps} />
+      </Gen3Provider>
+    </FaroErrorBoundary>
   );
 };
 
@@ -112,4 +140,4 @@ Gen3App.getInitialProps = async (
     sessionConfig: {},
   };
 };
-export default Gen3App;
+export default withFaroProfiler(Gen3App);