Notes

import React, {useState, useRef, useEffect} from 'react';
import isEmpty from 'lodash-es/isEmpty';
import map from 'lodash-es/map';
import {Link} from 'react-router-dom';
import queryString from 'query-string';
import Tree from 'react-d3-tree';
import Close from '@apple/symbols/light/xmark.svg';
import styles from './sass/variants-summary-graph-view.scss';
import {useMemo} from 'react';
import ConfirmModal from '@aosprodsys/brucke-ui-core/dist/es/components/Modal';

const getTreeData = (data = [], part) => {
const root = {
name: part,
children: []
};
const nodes = data.map(eachData => {
const node = {
name: eachData.optionGroupType,
children: []
};

if (eachData.variantValuesSummaryByVariantKey) {
const cnodes = Object.entries(eachData.variantValuesSummaryByVariantKey).map(([key, value]) => ({
name: key,
children: value.map(each => ({name: each}))
}));
node.children = cnodes;
}
return node;
});

root.children = nodes;
return root;
};

const getDepthNodes = node => {
if (node?.children && !node?.children?.length) {
return 0;
}
let maxChildDepth = 0;
node.children?.forEach(child => {
const childPath = getDepthNodes(child);
if (childPath > maxChildDepth) {
maxChildDepth = childPath;
}
});
return maxChildDepth + 1;
};

const getDepthGraphViewDropdownOptions = node => {
const depthCount = getDepthNodes(node);
const options = [];
for (let i = 1; i < depthCount; i++) {
options.push({
label: `Level ${i}`,
value: Number(i)
});
}
return options;
};

function VariantsSummaryGraphView({
groups,
optionValuesMap,
sortTemplateMap,
part,
detailLists,
query,
optionGroupDimensions,
optionGroupVariantValues,
setSelectedNode,
selectedNode,
graphViewInitialDepth,
setDepthGraphViewDropdownOptions,
onOptionGroupTypeClick,
imageKeysList
}) {
const {revision, segment, language, geo, channel} = query;
const treeContainer = useRef(null);
const [showImageModal, setShowImageModal] = useState({
show: false,
imageUrl: ''
});
const [translate, setTranslate] = useState({x: 0, y: 0});
const treeData = useMemo(() => getTreeData(groups, part), [groups, part, graphViewInitialDepth]);

useEffect(
() => {
const depthGraphViewDropdownOptions = getDepthGraphViewDropdownOptions(treeData);
setDepthGraphViewDropdownOptions(depthGraphViewDropdownOptions);
if (treeContainer.current) {
const dimensions = treeContainer.current.getBoundingClientRect();
setTranslate({x: dimensions.width / 2, y: dimensions.height / 4});
}
},
[treeContainer]
);
const clickTimeoutRef = useRef(null);
const renderCustomNode = ({nodeDatum, toggleNode}) => {
const containsDetail =
!isEmpty(detailLists[nodeDatum.name]) ||
!isEmpty(optionValuesMap[nodeDatum.name]) ||
!isEmpty(optionGroupVariantValues[nodeDatum.name]) ||
!isEmpty(optionGroupVariantValues[nodeDatum.name]) ||
!isEmpty(sortTemplateMap[nodeDatum.name]);
const isSelected = selectedNode === nodeDatum.name;
const handleClick = () => {
if (clickTimeoutRef.current) {
if (containsDetail) {
setSelectedNode(nodeDatum.name);
}
clearTimeout(clickTimeoutRef.current);
clickTimeoutRef.current = null;
} else {
clickTimeoutRef.current = setTimeout(() => {
toggleNode();
clickTimeoutRef.current = null;
}, 250); // Adjust time to match double-click detection
}
};

return (
<g onClick={handleClick}>
<circle r="30" fill={isSelected ? '#119af0' : containsDetail ? '#7ecfed' : '#a9cbcf'} />
<text fill="black" x="0" y="0" dy="0" textAnchor="middle" fontSize="16" fontWeight="400">
{nodeDatum.name}
</text>
</g>
);
};

return (
<div style={{width: '100vw', display: 'flex'}}>
<div className={styles.graphView} style={{width: !isEmpty(selectedNode) ? '70%' : '100%'}} ref={treeContainer}>
<Tree
data={treeData}
orientation="vertical"
translate={translate}
pathFunc="diagonal"
nodeSize={{x: 160, y: 200}}
separation={{siblings: 1, nonSiblings: 1}}
renderCustomNodeElement={renderCustomNode}
enableLegacyTransitions={true}
initialDepth={Number(graphViewInitialDepth) || 1}
/>
</div>
{!isEmpty(selectedNode) && (
<div className={styles.rightPanel}>
<Close
className="close-icon icon"
desiredFontSize={12}
onClick={() => {
setSelectedNode(null);
}}
/>
<div className="data-wrapper">
<button
className="button-header"
onClick={() => {
const selectedGroup = groups.find(group => {
return group.optionGroupType === selectedNode;
});

onOptionGroupTypeClick(selectedGroup);
}}
>
<div className="global-header-large">{selectedNode}</div>
</button>
{!isEmpty(detailLists[selectedNode]) && (
<details open={true} className="details-wrapper display-name">
<summary className="detail-title">
<span className="section-title global-header-medium">Display Name</span>
</summary>
<div className="data-detail">
{Object.entries(detailLists[selectedNode]).map(entry => {
const [key, value] = entry;
const dimensions = key.split('.').slice(2);
const dimensionArr = optionGroupDimensions[selectedNode];
const variants = dimensionArr?.map((dim, ind) => [dim, dimensions[ind]]);
const searchString = queryString.stringify({
optionGroupType: selectedNode,
revision,
geo,
segment,
language,
channel,
variants
});
return (
<div key={key} className="detail-row">
<span className="link global-link-large-bold">
<Link
to={`/option-value-display-name-setup?${searchString}`}
className="global-link-medium bell-link"
>
{key}
</Link>
</span>
<span className="global-body-medium">{value}</span>
</div>
);
})}
</div>
</details>
)}
{!isEmpty(optionValuesMap[selectedNode]) && (
<details className="details-wrapper" open={true}>
<summary className="detail-title">
<span className="section-title global-header-medium">Option Values</span>
</summary>
<div className="data-detail">
{optionValuesMap[selectedNode]?.map(ov => {
return (
<div className="option-value-row global-body-medium" key={ov.optionPartNumber}>
<div className="value">{ov.optionPartNumber}</div>
<div className="name">{ov.optionDisplay}</div>
</div>
);
})}
</div>
</details>
)}
{!isEmpty(optionGroupVariantValues[selectedNode]) && (
<details className="details-wrapper" open={true}>
<summary className="detail-title">
<span className="section-title global-header-medium">Variants</span>
</summary>
<div className="data-detail">
{map(optionGroupVariantValues[selectedNode], (variantVal, variantType) => {
return (
<details className="variant-type" key={variantType} open={true}>
<summary className="detail-title variant-type">
<span className="section-title global-header-medium">{variantType}</span>
</summary>
<div className="data-detail">
{variantVal?.map(val => {
return (
<div key={val} className="global-body-medium">
{val}
</div>
);
})}
</div>
</details>
);
})}
</div>
</details>
)}
{!isEmpty(optionValuesMap[selectedNode]) && (
<details className="details-wrapper" open={true}>
<summary className="detail-title">
<span className="section-title global-header-medium">Option Group Attributes</span>
</summary>
<div className="data-detail">
{optionValuesMap[selectedNode]
?.map(ov => {
const {optionValueAttributes} = ov;

return (
<div className="option-value-row global-body-medium" key={ov.optionPartNumber}>
{Object.entries(optionValueAttributes).map(([key, value]) => (
<div key={key} className="key-value-pair">
<div className="key">{key}</div>
<div className="value">{value}</div>
</div>
))}
</div>
);
})
.filter(
(item, index, self) => index === self.findIndex(t => t.optionPartNumber === item.optionPartNumber) // Ensure uniqueness based on optionPartNumber
)}
</div>
</details>
)}

{!isEmpty(optionGroupVariantValues[selectedNode]) &&
selectedNode === 'chassis' && (
<details className="details-wrapper" open={true}>
<summary className="detail-title">
<span className="section-title global-header-medium">Image Keys</span>
</summary>
<div className="data-detail">
{imageKeysList.map((imageValue, index) => {
return (
<div key={index}>
<div className="global-body-medium">
<button
className="global-body-medium"
key={imageValue.imageKey}
onClick={() => {
setShowImageModal({
show: true,
imageUrl: imageValue.imageUrl
});
}}
>
<span className="link">{imageValue.imageKey} </span>
</button>{' '}
= {imageValue.baseImageName}
</div>
</div>
);
})}
</div>
</details>
)}
{!isEmpty(optionValuesMap[selectedNode]) && (
<details className="details-wrapper" open={true}>
<summary className="detail-title">
<span className="section-title global-header-medium">Sort Template</span>
</summary>
<div className="data-detail">
{optionValuesMap[selectedNode]
?.map(ov => {
console.log(ov, 'ov');
const {optionSortOrderTemplate} = ov;
console.log(optionSortOrderTemplate, 'optionSortOrderTemplate');

return (
<div className="option-value-row global-body-medium" key={ov.optionPartNumber}>
{Object.entries(optionSortOrderTemplate).map(([key, value]) => (
<div key={key} className="key-value-pair">
<div className="key">{key}</div>
<div className="value">{value}</div>
</div>
))}
</div>
);
})
.filter(
(item, index, self) => index === self.findIndex(t => t.optionPartNumber === item.optionPartNumber) // Ensure uniqueness based on optionPartNumber
)}
</div>
</details>
)}
</div>
</div>
)}
<ConfirmModal
{...{
show: showImageModal?.show,

onHide: () =>
setShowImageModal({
show: false
}),
onConfirm: () =>
setShowImageModal({
show: false
}),
confirmButtonText: 'Close',
showCancelButton: false
}}
>
{showImageModal.imageUrl && (
<img
className={`${styles.imageViewModal}`}
src={showImageModal.imageUrl}
onError={event => (event.target.style.display = 'none')}
/>
)}
</ConfirmModal>
</div>
);
}
export default VariantsSummaryGraphView;