resolve always present scrollbars on CohortBuilder page

uc-cdis · Feb 17, 2024 · fac4bf8 · fac4bf8
1 parent b4838d4
commit fac4bf8
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 9 deletions.
diff --git a/packages/frontend/rollup.config.mjs b/packages/frontend/rollup.config.mjs
@@ -114,7 +114,7 @@ const config = [
           tsconfig: 'tsconfig.json',
           jsc: {},
         },
-        swcPreserveDirectives(),
+        swcPreserveDirectives()
       ),
     ],
   },

diff --git a/packages/frontend/src/components/charts/Charts.tsx b/packages/frontend/src/components/charts/Charts.tsx
@@ -22,8 +22,9 @@ interface ChartsProps {
 }
 
 const Charts = ({ index, charts, data, counts,  isSuccess }: ChartsProps) => {
+
   return (
-    <Grid>
+    <Grid className="w-full mx-2">
       {data &&  Object.keys(charts).map((field) => (
         <Grid.Col span="auto" key={`${index}-charts-${field}-col`}>
           <Card shadow={'md'}>
@@ -47,6 +48,7 @@ const Charts = ({ index, charts, data, counts,  isSuccess }: ChartsProps) => {
       ))}
     </Grid>
   );
+
 };
 
 export default Charts;
diff --git a/packages/frontend/src/features/CohortBuilder/CohortPanel.tsx b/packages/frontend/src/features/CohortBuilder/CohortPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Tabs } from '@mantine/core';
 import { partial } from 'lodash';
 
@@ -33,6 +33,7 @@ import { Charts } from '../../components/charts';
 import ExplorerTable from './ExplorerTable/ExplorerTable';
 import CountsValue from '../../components/counts/CountsValue';
 import DownloadsPanel from './DownloadsPanel';
+import { useDeepCompareCallback, useDeepCompareEffect, useDeepCompareMemo } from 'use-deep-compare';
 
 const EmptyData = {};
 
@@ -143,7 +144,7 @@ export const CohortPanel = ({
     filters: cohortFilters,
   });
 
-  const getEnumFacetData = useCallback(
+  const getEnumFacetData = useDeepCompareCallback(
     (field: string) => {
       return {
         data: processBucketData(data?.[field]),
@@ -157,7 +158,7 @@ export const CohortPanel = ({
     [cohortFilters, data, isSuccess],
   );
 
-  const getRangeFacetData = useCallback(
+  const getRangeFacetData = useDeepCompareCallback(
     (field: string) => {
       return {
         data: processRangeData(data?.[field]),
@@ -171,7 +172,7 @@ export const CohortPanel = ({
   // Set up the hooks for the facet components to use based on the required index
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  const facetDataHooks: Record<FacetType, FacetRequiredHooks> = useMemo(() => {
+  const facetDataHooks: Record<FacetType, FacetRequiredHooks> = useDeepCompareMemo(() => {
     return {
       enum: {
         useGetFacetData: getEnumFacetData,
@@ -191,7 +192,7 @@ export const CohortPanel = ({
   }, [getEnumFacetData, getRangeFacetData, index]);
 
   // Set the facet definitions based on the data only the first time the data is loaded
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     if (isSuccess && Object.keys(facetDefinitions).length === 0) {
       const facetDefs = classifyFacets(data, index, guppyConfig.fieldMapping);
       setFacetDefinitions(facetDefs);

diff --git a/packages/frontend/src/features/CohortBuilder/ExplorerTable/ExplorerTable.tsx b/packages/frontend/src/features/CohortBuilder/ExplorerTable/ExplorerTable.tsx
@@ -126,7 +126,7 @@ const ExplorerTable = ({
   });
 
   return (
-    <div className="w-auto inline-block overflow-x-scroll">
+    <div className="inline-block overflow-x-scroll">
       <MantineReactTable table={table} />
     </div>
   );

diff --git a/packages/sampleCommons/next.config.js b/packages/sampleCommons/next.config.js
@@ -1,6 +1,7 @@
+/* tslint:disable no-var-requires */
 'use strict';
 
-import dns = require('dns');
+const dns = require('dns');
 
 dns.setDefaultResultOrder('ipv4first');