Disable zoom controls until mesh layout is finalized.

This commit is contained in:
Kia Lam
2022-02-22 13:45:30 -08:00
parent fee47fe347
commit 7ebf6b77e5
3 changed files with 11 additions and 1 deletions

View File

@@ -26,6 +26,7 @@ const Header = ({
zoomOut, zoomOut,
resetZoom, resetZoom,
zoomFit, zoomFit,
showZoomControls,
}) => { }) => {
const { light } = PageSectionVariants; const { light } = PageSectionVariants;
return ( return (
@@ -54,6 +55,7 @@ const Header = ({
variant="plain" variant="plain"
icon={<SearchPlusIcon />} icon={<SearchPlusIcon />}
onClick={zoomIn} onClick={zoomIn}
isDisabled={!showZoomControls}
> >
<SearchPlusIcon /> <SearchPlusIcon />
</Button> </Button>
@@ -65,6 +67,7 @@ const Header = ({
variant="plain" variant="plain"
icon={<SearchMinusIcon />} icon={<SearchMinusIcon />}
onClick={zoomOut} onClick={zoomOut}
isDisabled={!showZoomControls}
> >
<SearchMinusIcon /> <SearchMinusIcon />
</Button> </Button>
@@ -76,6 +79,7 @@ const Header = ({
variant="plain" variant="plain"
icon={<ExpandArrowsAltIcon />} icon={<ExpandArrowsAltIcon />}
onClick={zoomFit} onClick={zoomFit}
isDisabled={!showZoomControls}
> >
<ExpandArrowsAltIcon /> <ExpandArrowsAltIcon />
</Button> </Button>
@@ -87,6 +91,7 @@ const Header = ({
variant="plain" variant="plain"
icon={<ExpandIcon />} icon={<ExpandIcon />}
onClick={resetZoom} onClick={resetZoom}
isDisabled={!showZoomControls}
> >
<ExpandIcon /> <ExpandIcon />
</Button> </Button>

View File

@@ -34,7 +34,7 @@ const Loader = styled(ContentLoading)`
width: 100%; width: 100%;
background: white; background: white;
`; `;
function MeshGraph({ data, showLegend, zoom }) { function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
// function MeshGraph({ showLegend, zoom }) { // function MeshGraph({ showLegend, zoom }) {
const [isNodeSelected, setIsNodeSelected] = useState(false); const [isNodeSelected, setIsNodeSelected] = useState(false);
const [selectedNode, setSelectedNode] = useState(null); const [selectedNode, setSelectedNode] = useState(null);
@@ -236,9 +236,11 @@ function MeshGraph({ data, showLegend, zoom }) {
} }
function calculateAlphaDecay(a, aMin, x) { function calculateAlphaDecay(a, aMin, x) {
setShowZoomControls(false);
const decayPercentage = Math.min((aMin / a) * 100); const decayPercentage = Math.min((aMin / a) * 100);
if (decayPercentage >= x) { if (decayPercentage >= x) {
d3.select('.simulation-loader').style('visibility', 'hidden'); d3.select('.simulation-loader').style('visibility', 'hidden');
setShowZoomControls(true);
} }
} }
}; };

View File

@@ -11,6 +11,7 @@ import { CHILDSELECTOR, PARENTSELECTOR } from './constants';
function TopologyView() { function TopologyView() {
const [showLegend, setShowLegend] = useState(true); const [showLegend, setShowLegend] = useState(true);
const [showZoomControls, setShowZoomControls] = useState(false);
const { const {
isLoading, isLoading,
result: { meshData }, result: { meshData },
@@ -43,6 +44,7 @@ function TopologyView() {
zoomOut={zoomOut} zoomOut={zoomOut}
zoomFit={zoomFit} zoomFit={zoomFit}
resetZoom={resetZoom} resetZoom={resetZoom}
showZoomControls={showZoomControls}
/> />
{fetchInitialError ? ( {fetchInitialError ? (
<PageSection> <PageSection>
@@ -61,6 +63,7 @@ function TopologyView() {
data={meshData} data={meshData}
showLegend={showLegend} showLegend={showLegend}
zoom={zoom} zoom={zoom}
setShowZoomControls={setShowZoomControls}
/> />
)} )}
</CardBody> </CardBody>