From 8f876f66f4463ecf2ca85b0927212743ec45d379 Mon Sep 17 00:00:00 2001 From: lflangis Date: Tue, 28 Nov 2023 14:36:25 -0500 Subject: [PATCH] fix(summary): SJIP-664 fix graph --- package-lock.json | 59 ++++++---- package.json | 2 +- src/store/user/thunks.ts | 5 +- .../SunburstGraphCard/GraphContent/index.tsx | 2 +- .../SunburstGraphCard/utils/sunburst-d3.jsx | 7 +- .../PageContent/tabs/Summary/index.tsx | 3 +- .../PageContent/tabs/Summary/utils/grid.tsx | 108 +++++++----------- 7 files changed, 90 insertions(+), 96 deletions(-) diff --git a/package-lock.json b/package-lock.json index 083b15cf..d492ecc7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,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", @@ -2857,9 +2857,9 @@ } }, "node_modules/@ferlab/ui": { - "version": "7.14.9", - "resolved": "https://registry.npmjs.org/@ferlab/ui/-/ui-7.14.9.tgz", - "integrity": "sha512-0WQqef/yi1Os62pD9lgl/bZ4vxYvD7E3NDHv+stdFPTHpsdmBC4D7YE14FxRa1fHAreGtrIVk3fPOAwUvfh9TA==", + "version": "7.14.15", + "resolved": "https://registry.npmjs.org/@ferlab/ui/-/ui-7.14.15.tgz", + "integrity": "sha512-m8J3ppOwyfN+VBHLs+XNqwzp4PkVFjF8Eiax3bsSwMGzNVPbaAt2otAQ/+YdqpfskzaPPt0ZPccMmY5oCKDmtA==", "dependencies": { "@ant-design/icons": "^4.7.0", "@dnd-kit/core": "^4.0.3", @@ -7132,9 +7132,9 @@ } }, "node_modules/clsx": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", "engines": { "node": ">=6" } @@ -10523,6 +10523,11 @@ "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", "dev": true }, + "node_modules/fast-equals": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-4.0.3.tgz", + "integrity": "sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==" + }, "node_modules/fast-glob": { "version": "3.2.12", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", @@ -14264,11 +14269,6 @@ "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz", "integrity": "sha512-oKMuF3xEeqDltrGMfDxAPGIVMSSRv8tbRSODbrs4KGsRRLEhrW8N8Rd4DRgB2+621hY8A8XwwrTVhXWpxFvMzg==" }, - "node_modules/lodash.isequal": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", - "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" - }, "node_modules/lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -18571,9 +18571,9 @@ } }, "node_modules/react-draggable": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz", - "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==", + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz", + "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==", "dependencies": { "clsx": "^1.1.1", "prop-types": "^15.8.1" @@ -18583,6 +18583,14 @@ "react-dom": ">= 16.3.0" } }, + "node_modules/react-draggable/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/react-easy-crop": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-4.6.2.tgz", @@ -18617,15 +18625,16 @@ "integrity": "sha512-ioBMEIxd4ePw4YtaloTUgqhQGqz5ebDdC4slEpLgy2sLx1LuZBC9iYCwDymTXzcntw6K1dHX183ulP32nNdG7w==" }, "node_modules/react-grid-layout": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-1.3.4.tgz", - "integrity": "sha512-sB3rNhorW77HUdOjB4JkelZTdJGQKuXLl3gNg+BI8gJkTScspL1myfZzW/EM0dLEn+1eH+xW+wNqk0oIM9o7cw==", + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-1.4.4.tgz", + "integrity": "sha512-7+Lg8E8O8HfOH5FrY80GCIR1SHTn2QnAYKh27/5spoz+OHhMmEhU/14gIkRzJOtympDPaXcVRX/nT1FjmeOUmQ==", "dependencies": { - "clsx": "^1.1.1", - "lodash.isequal": "^4.0.0", + "clsx": "^2.0.0", + "fast-equals": "^4.0.3", "prop-types": "^15.8.1", - "react-draggable": "^4.0.0", - "react-resizable": "^3.0.4" + "react-draggable": "^4.4.5", + "react-resizable": "^3.0.5", + "resize-observer-polyfill": "^1.5.1" }, "peerDependencies": { "react": ">= 16.3.0", @@ -18646,9 +18655,9 @@ } }, "node_modules/react-icons": { - "version": "4.8.0", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz", - "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==", + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz", + "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==", "peerDependencies": { "react": "*" } diff --git a/package.json b/package.json index 287f0365..29201cf1 100644 --- 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 index 6930ea32..ef9d3d20 100644 --- 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(deepCopyUserConfig, deepCopyNewConfig); + const mergedConfig = + deepCopyUserConfig.length > 0 + ? mergeDeep(deepCopyUserConfig, deepCopyNewConfig) + : deepCopyNewConfig; const { error } = await UserApi.update({ config: mergedConfig, diff --git a/src/views/DataExploration/components/PageContent/tabs/Summary/SunburstGraphCard/GraphContent/index.tsx b/src/views/DataExploration/components/PageContent/tabs/Summary/SunburstGraphCard/GraphContent/index.tsx index ba856da8..d6434ff4 100644 --- a/src/views/DataExploration/components/PageContent/tabs/Summary/SunburstGraphCard/GraphContent/index.tsx +++ b/src/views/DataExploration/components/PageContent/tabs/Summary/SunburstGraphCard/GraphContent/index.tsx @@ -115,7 +115,7 @@ const SunburstGraph = ({ field, previewMode = false, width = 335, height = 335 } } return ( - + 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 index 72dbc2cc..b42151f4 100644 --- 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 ( { 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 index 56857d93..18cfdc80 100644 --- 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,9 @@ import intl from 'react-intl-universal'; import { IResizableGridLayoutConfig } from '@ferlab/ui/core/layout/ResizableGridLayout'; +import { + mondoDefaultGridConfig, + observedPhenotypeDefaultGridConfig, +} from '@ferlab/ui/core/layout/ResizableGridLayout/utils'; import DataCategoryGraphCard from '../DataCategoryGraphCard'; import DataTypeGraphCard from '../DataTypeGraphCard'; @@ -20,60 +24,13 @@ export const getDefaultLayouts = (): IResizableGridLayoutConfig[] => [ title: intl.get('screen.dataExploration.tabs.summary.observed_phenotype.cardTitle'), id: OBSERVED_PHENOTYPE_ID, component: , - 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: , - 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 +41,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 +74,33 @@ export const getDefaultLayouts = (): IResizableGridLayoutConfig[] => [ id: DATA_CATEGORY_GRAPH_CARD_ID, component: , 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 +114,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, + }, }, ];