Skip to content

Commit

Permalink
Merge pull request #440 from include-dcc/fix/SJIP-664/graphs-13
Browse files Browse the repository at this point in the history
Fix/sjip 664/graphs 13
  • Loading branch information
lflangis authored Nov 28, 2023
2 parents dac7417 + 8f876f6 commit bbb9ac0
Show file tree
Hide file tree
Showing 7 changed files with 90 additions and 96 deletions.
59 changes: 34 additions & 25 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 4 additions & 1 deletion src/store/user/thunks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)')
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -20,60 +24,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'),
Expand All @@ -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,
Expand All @@ -109,25 +74,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,
Expand All @@ -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,
},
},
];

0 comments on commit bbb9ac0

Please sign in to comment.