fix(summary): SJIP-664 fix graph

include-dcc · Nov 28, 2023 · 7df4173 · 7df4173
1 parent dac7417
commit 7df4173
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 96 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,7 +63,7 @@
     "@apollo/client": "^3.5.10",
     "@dnd-kit/core": "^4.0.3",
     "@dnd-kit/sortable": "^5.1.0",
-    "@ferlab/ui": "^7.14.6",
+    "@ferlab/ui": "^7.14.15",
     "@loadable/component": "^5.15.2",
     "@nivo/bar": "^0.79.1",
     "@nivo/pie": "^0.79.1",

diff --git a/src/store/user/thunks.ts b/src/store/user/thunks.ts
@@ -69,7 +69,10 @@ const updateUserConfig = createAsyncThunk<
 
     const deepCopyUserConfig = JSON.parse(JSON.stringify(user.userInfo?.config));
     const deepCopyNewConfig = JSON.parse(JSON.stringify(config));
-    const mergedConfig = mergeDeep<TUserConfig>(deepCopyUserConfig, deepCopyNewConfig);
+    const mergedConfig =
+      deepCopyUserConfig.length > 0
+        ? mergeDeep<TUserConfig>(deepCopyUserConfig, deepCopyNewConfig)
+        : deepCopyNewConfig;
 
     const { error } = await UserApi.update({
       config: mergedConfig,

diff --git a/...aExploration/components/PageContent/tabs/Summary/SunburstGraphCard/GraphContent/index.tsx b/...aExploration/components/PageContent/tabs/Summary/SunburstGraphCard/GraphContent/index.tsx
@@ -115,7 +115,7 @@ const SunburstGraph = ({ field, previewMode = false, width = 335, height = 335 }
   }
 
   return (
-    <Row gutter={[24, 24]} id={`tooltip-wrapper-${field}`} className={styles.sunburstRowWrapper}>
+    <Row gutter={[24, 24]} className={styles.sunburstRowWrapper}>
       <Col lg={12} xl={10}>
         <svg
           className={styles.sunburstChart}

diff --git a/...taExploration/components/PageContent/tabs/Summary/SunburstGraphCard/utils/sunburst-d3.jsx b/...taExploration/components/PageContent/tabs/Summary/SunburstGraphCard/utils/sunburst-d3.jsx
@@ -116,8 +116,9 @@ const SunburstD3 = (
   [...document.getElementsByClassName(`tooltipsunburst-${type}`)].map((n) => n && n.remove());
 
   const Tooltip = d3
-    .select(`#tooltip-wrapper-${type}`)
+    .select('body')
     .append('div')
+    .attr('id', `#tooltip-wrapper-${type}`)
     .style('position', 'absolute')
     .style('display', 'none')
     .style('box-shadow', '0.5px 0.5px 2px 0.5px rgba(0,0,0,0.2)')
@@ -136,8 +137,8 @@ const SunburstD3 = (
   const mousemoveTooltip = function (d) {
     if (previewMode) return;
     Tooltip.html(tooltipFormatter(d.data))
-      .style('left', d3.event.offsetX + 25 + 'px')
-      .style('top', d3.event.offsetY + 25 + 'px');
+      .style('left', d3.event.pageX + 25 + 'px')
+      .style('top', d3.event.pageY + 25 + 'px');
   };
   const mouseoutTooltip = function () {
     if (previewMode) return;

diff --git a/src/views/DataExploration/components/PageContent/tabs/Summary/index.tsx b/src/views/DataExploration/components/PageContent/tabs/Summary/index.tsx
@@ -15,12 +15,13 @@ const SummaryTab = () => {
   const dispatch = useDispatch();
   const { userInfo } = useUser();
   const defaultLayouts = getDefaultLayouts();
+
   return (
     <Space className={styles.wrapper} direction="vertical">
       <ResizableGridLayout
         uid={UID}
         defaultLayouts={defaultLayouts}
-        layouts={userInfo?.config.data_exploration?.summary?.layouts || defaultLayouts}
+        layouts={userInfo?.config.data_exploration?.summary?.layouts}
         onReset={(layouts: TSerializedResizableGridLayoutConfig[]) => {
           dispatch(
             updateUserConfig({

diff --git a/src/views/DataExploration/components/PageContent/tabs/Summary/utils/grid.tsx b/src/views/DataExploration/components/PageContent/tabs/Summary/utils/grid.tsx
@@ -1,5 +1,10 @@
 import intl from 'react-intl-universal';
 import { IResizableGridLayoutConfig } from '@ferlab/ui/core/layout/ResizableGridLayout';
+import {
+  demographicsDefaultGridConfig,
+  mondoDefaultGridConfig,
+  observedPhenotypeDefaultGridConfig,
+} from '@ferlab/ui/core/layout/ResizableGridLayout/utils';
 
 import DataCategoryGraphCard from '../DataCategoryGraphCard';
 import DataTypeGraphCard from '../DataTypeGraphCard';
@@ -20,60 +25,13 @@ export const getDefaultLayouts = (): IResizableGridLayoutConfig[] => [
     title: intl.get('screen.dataExploration.tabs.summary.observed_phenotype.cardTitle'),
     id: OBSERVED_PHENOTYPE_ID,
     component: <SunburstGraphCard id={OBSERVED_PHENOTYPE_ID} field="observed_phenotype" />,
-    base: {
-      h: 4,
-      w: 8,
-      x: 0,
-      y: 0,
-      minW: 5,
-      minH: 4,
-      isResizable: false,
-    },
-    md: {
-      h: 4,
-      w: 6,
-      x: 0,
-    },
-    sm: {
-      h: 4,
-      w: 5,
-      x: 0,
-    },
-    xs: {
-      h: 4,
-      w: 6,
-      x: 0,
-    },
+    ...observedPhenotypeDefaultGridConfig,
   },
   {
     title: intl.get('screen.dataExploration.tabs.summary.mondo.cardTitle'),
     id: MONDO_ID,
     component: <SunburstGraphCard id={MONDO_ID} field="mondo" />,
-    base: {
-      h: 4,
-      w: 8,
-      x: 8,
-      y: 0,
-      minW: 5,
-      minH: 4,
-      isResizable: false,
-    },
-    md: {
-      h: 4,
-      w: 6,
-      x: 6,
-    },
-    sm: {
-      h: 4,
-      w: 5,
-      x: 5,
-    },
-    xs: {
-      h: 4,
-      w: 6,
-      x: 0,
-      y: 4,
-    },
+    ...mondoDefaultGridConfig,
   },
   {
     title: intl.get('screen.dataExploration.tabs.summary.demographic.cardTitle'),
@@ -84,21 +42,29 @@ export const getDefaultLayouts = (): IResizableGridLayoutConfig[] => [
       w: 8,
       x: 0,
       y: 4,
-      minW: 4,
+      minW: 2,
       minH: 2,
     },
     md: {
-      h: 2,
+      h: 3,
       w: 6,
       x: 0,
+      y: 4,
     },
     sm: {
-      h: 2,
+      h: 3,
       w: 5,
       x: 0,
+      y: 4,
     },
     xs: {
-      h: 2,
+      h: 3,
+      w: 6,
+      x: 0,
+      y: 8,
+    },
+    xxs: {
+      h: 3,
       w: 6,
       x: 0,
       y: 8,
@@ -109,25 +75,33 @@ export const getDefaultLayouts = (): IResizableGridLayoutConfig[] => [
     id: DATA_CATEGORY_GRAPH_CARD_ID,
     component: <DataCategoryGraphCard />,
     base: {
+      minH: 2,
+      minW: 2,
       h: 2,
       w: 8,
       x: 8,
       y: 4,
-      minW: 3,
-      minH: 2,
     },
     md: {
-      h: 2,
+      h: 3,
       w: 6,
       x: 6,
+      y: 4,
     },
     sm: {
-      h: 2,
+      h: 3,
       w: 5,
       x: 5,
+      y: 4,
     },
     xs: {
-      h: 2,
+      h: 3,
+      w: 6,
+      x: 0,
+      y: 10,
+    },
+    xxs: {
+      h: 3,
       w: 6,
       x: 0,
       y: 10,
@@ -141,26 +115,33 @@ export const getDefaultLayouts = (): IResizableGridLayoutConfig[] => [
       h: 3,
       w: 16,
       x: 0,
-      y: 6,
-      minW: 2,
-      minH: 2,
+      y: 8,
+      minH: 3,
+      minW: 4,
     },
     md: {
       h: 3,
       w: 12,
       x: 0,
+      y: 8,
     },
     sm: {
-      h: 4,
+      h: 3,
       w: 10,
       x: 0,
-      y: 8,
+      y: 12,
     },
     xs: {
-      h: 4,
+      h: 3,
       w: 6,
       x: 0,
       y: 18,
     },
+    xxs: {
+      h: 4,
+      w: 4,
+      x: 0,
+      y: 18,
+    },
   },
 ];