Skip to content

Commit

Permalink
Merge pull request #274 from RENCI/issue-269-Compare-like-products
Browse files Browse the repository at this point in the history 
Compare mode updates
  • Loading branch information
@lstillwe
lstillwe authored Oct 7, 2024
2 parents ee3271b + 44019fe commit f53b6a6
Show file tree
Hide file tree
Showing 6 changed files with 101 additions and 59 deletions.
72 changes: 40 additions & 32 deletions src/components/compare-panel/compare-panel.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
import React, { Fragment, useRef } from 'react';
import { Stack, Typography, Box, Button, Card } from '@mui/joy';
import React, { useRef } from 'react';
import { Stack, Typography, Button, Card, Tooltip } from '@mui/joy';
import { useLayers } from '@context';
import { SwapHorizontalCircleSharp as SwapLayersIcon } from '@mui/icons-material';
import { SwapHorizontalCircleSharp as SwapLayersIcon,
CloseSharp as ResetIcon } from '@mui/icons-material';
import { getHeaderSummary } from "@utils/map-utils";
import Draggable from "react-draggable";

/**
* renders the compare mode selections.
*
* @returns JSX.Element
* @constructor
*/
export const ComparePanel = () => {
const {
defaultModelLayers,
Expand Down Expand Up @@ -77,12 +85,14 @@ export const ComparePanel = () => {

// render the panel
return (
<Fragment>
{
// display the selected product details for each pane
(leftPaneID !== defaultSelected || rightPaneID !== defaultSelected) ?
<Draggable
bounds="parent"
nodeRef={ nodeRef }
handle="#draggable-compare-card"
cancel={'[class*="MuiDialogContent-root"]'}
>
<Card
ref={nodeRef}
ref={ nodeRef }
variant="soft"
sx={{
p: 0,
Expand All @@ -92,34 +102,32 @@ export const ComparePanel = () => {
filter: 'opacity(0.9)',
'&:hover': {filter: 'opacity(1.0)'},
ml: 1, mr: 1,
width: '750px',
zIndex: 999
}}>
<Stack direction={"row"} gap={ 1 } ref={ nodeRef } sx={{ mt: .5 , mb: .5 }}>
{
// render the left pane selections
<Stack direction={"column"} gap={ .5 } sx={{ ml: .5 }}>
<Typography sx={{ m: 0, width: '350px'}} level="body-xs">{ getHeaderSummaryByID(leftPaneID) } </Typography>
<Typography sx={{ m: 0 }} level="body-xs">{ leftPaneType } </Typography>
</Stack>
}

<Box textAlign='center'>
<Button size="md" color="success" sx={{ m: 0 }} onClick={ swapPanes }><SwapLayersIcon/></Button>
</Box>
{
// display the selected product details for each pane
(leftPaneID !== defaultSelected && rightPaneID !== defaultSelected) ?
<Stack direction={'column'} alignItems="center" sx={{ cursor: 'move' }} id="draggable-compare-card">
<Typography sx={{ mt: .5, mb: .5 }} level="body-sm"><strong>Comparing { leftPaneType } products</strong> </Typography>

{
<Stack direction={"column"} gap={ .5 }>
<Typography sx={{ m: 0, width: '350px' }} level="body-xs">{ getHeaderSummaryByID(rightPaneID) } </Typography>
<Typography sx={{ m: 0 }} level="body-xs">{ rightPaneType }</Typography>
</Stack>
}
<Stack direction={"row"} gap={ .5 } sx={{ mb: .5, mr: .5}}>
<Typography sx={{ ml: .5 }} level="body-xs">{ getHeaderSummaryByID(leftPaneID) } </Typography>

<Box textAlign='center'>
<Button size="md" sx={{ mr: .5 }} onClick={ resetCompare }>Reset</Button>
</Box>
</Stack>
</Card> : ''
}
</Fragment>
<Tooltip title={"Swap pane products"}>
<Button size="xs" color="success" sx={{ mt: .5 }} onClick={ swapPanes }><SwapLayersIcon/></Button>
</Tooltip>

<Typography sx={{ ml: .5 }} level="body-xs">{ getHeaderSummaryByID(rightPaneID) } </Typography>

<Tooltip title={"Close compare mode"}>
<Button size="xs" color="danger" sx={{ mt: .5 }} onClick={ resetCompare }><ResetIcon/></Button>
</Tooltip>
</Stack>
</Stack> : ''
}
</Card>
</Draggable>
);
};
20 changes: 15 additions & 5 deletions src/components/legend/legend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,25 @@ export const MapLegend = () => {

const {
defaultModelLayers,
getLayerIcon
getLayerIcon,
leftLayerProps, rightLayerProps
} = useLayers();
const {
mapStyle,
} = useSettings();

useEffect(() => {
const legendLayer = defaultModelLayers.find(layer => layer.state.visible && layer.properties.product_type !== 'obs');
// init the selected legend layer properties storage
let legendLayer = null;

// if we are in compare mode
if(leftLayerProps && rightLayerProps)
// use either set of layer properties
legendLayer = leftLayerProps;
else
// else use the default selected layer
legendLayer = defaultModelLayers.find(layer => layer.state.visible && layer.properties.product_type !== 'obs');

if (!legendLayer) {
setLegendVisibilty("hidden");
}
Expand Down Expand Up @@ -80,7 +91,7 @@ export const MapLegend = () => {
});
});
}
}, [defaultModelLayers, mapStyle]);
}, [defaultModelLayers, mapStyle, leftLayerProps, rightLayerProps]);

// define the starting size of the card
const [newWidth, setNewWidth] = useState(45);
Expand Down Expand Up @@ -110,7 +121,6 @@ export const MapLegend = () => {
setNewWidth(newWidth + event.movementX);
setNewHeight(newHeight + event.movementY);
}}
axis="x"
>
<Card
ref={ nodeRef }
Expand All @@ -119,7 +129,7 @@ export const MapLegend = () => {
sx={{
ml: 10,
position: 'absolute',
top: '60px',
top: '10px',
right: '10px',
transition: 'filter 250ms',
filter: 'opacity(0.9)',
Expand Down
Binary file added src/components/side-by-side/icon-compare.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/components/side-by-side/range-icon.png
View file
Binary file not shown.
6 changes: 3 additions & 3 deletions src/components/side-by-side/range.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
cursor: ew-resize;
pointer-events: auto;
border: 1px solid #ddd;
background-image: url(range-icon.png);
background-image: url(icon-compare.png);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 40px 40px;
Expand All @@ -65,7 +65,7 @@
cursor: ew-resize;
pointer-events: auto;
border: 1px solid #ddd;
background-image: url(range-icon.png);
background-image: url(icon-compare.png);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 40px 40px;
Expand All @@ -81,7 +81,7 @@
cursor: ew-resize;
pointer-events: auto;
border: 1px solid #ddd;
background-image: url(range-icon.png);
background-image: url(icon-compare.png);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 40px 40px;
Expand Down
62 changes: 43 additions & 19 deletions src/components/trays/compare-layers/CompareLayersTray.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,9 +109,12 @@ export const CompareLayersTray = () => {
};

/**
* resets the accordion
* resets the compare view
*/
const resetAccordion = () => {
const resetCompareView = () => {
// reset the compare view and controls
resetCompare();

// rollup the accordions
setAccordionIndex(null);
};
Expand Down Expand Up @@ -152,10 +155,34 @@ export const CompareLayersTray = () => {
*/
useEffect(() => {
// reset this view
resetCompare();
resetAccordion();
resetCompareView();
}, [defaultModelLayers]);

/**
* gets the enabled state of the layer select button based on other selections
*
* @param paneSide
* @param paneType
* @returns {boolean}
*/
const isSelectButtonDisabled = ( paneSide, paneType ) => {
// init the return
let isDisabled = false;

// make the right panel selection buttons disabled for all other product types
if (paneSide === 'left' && rightPaneType !== paneType && rightPaneID !== defaultSelected) {
isDisabled = true;
}

// make the left panel selection buttons disabled for all other product types
if (paneSide === 'right' && leftPaneType !== paneType && leftPaneID !== defaultSelected) {
isDisabled = true;
}

// return to the caller
return isDisabled;
};

/**
* this use effect waits for the layer properties (left and right) to get populated
* and applies the color map style to the layers
Expand Down Expand Up @@ -186,7 +213,6 @@ export const CompareLayersTray = () => {
layers: leftLayerProps.layers,
sld_body: sldStyle.output
}).addTo(map));

});
});

Expand Down Expand Up @@ -271,14 +297,17 @@ export const CompareLayersTray = () => {

{ getLayerIcon(layer.properties['product_type']) }

<Typography level="body-xs" sx={{ flex: 1 }}> { layer.properties['product_name'] }</Typography>
<Button size="xs" color={ (layer.id === leftPaneID) ? 'success' : 'primary' }
sx={{ ml: 2, mr: 1 }}
onClick={ () => setPaneInfo('left', layer.properties['product_name'], layer.id) }
disabled={ isSelectButtonDisabled('left', layer.properties['product_name']) }>Left pane</Button>

<Typography level="body-xs" sx={{ flex: 1 }}> { layer.properties['product_name'] }</Typography>

<Button size="xs" color={ (layer.id === leftPaneID) ? 'success' : 'primary' }
sx={{ ml: 2, mr: 2 }}
onClick={ () => setPaneInfo('left', layer.properties['product_name'], layer.id) }>Left pane</Button>
<Button size="xs" color={ (layer.id === rightPaneID) ? 'success' : 'primary' }
sx={{ m: 0 }}
onClick={ () => setPaneInfo('right', layer.properties['product_name'], layer.id) }>Right pane</Button>
sx={{ ml: 1 }}
onClick={ () => setPaneInfo('right', layer.properties['product_name'], layer.id) }
disabled={ isSelectButtonDisabled('right', layer.properties['product_name']) }>Right pane</Button>
</Stack>
</Stack>
</Card>
Expand All @@ -293,14 +322,7 @@ export const CompareLayersTray = () => {
return (
<Fragment>
<AccordionGroup
sx={{
'.MuiAccordionDetails-content': {
p: 1,
},
'.MuiAccordionSummary-button': {
alignItems: 'center',
}
}}>
sx={{ '.MuiAccordionDetails-content': { p: 1, }, '.MuiAccordionSummary-button': { alignItems: 'center' } }}>
{
// display the model runs to choose from
groupList
Expand Down Expand Up @@ -328,6 +350,8 @@ export const CompareLayersTray = () => {
))
}
</AccordionGroup>

<Button size="md" sx={{ mr: .5 }} onClick={ resetCompareView }>Reset</Button>
</Fragment>
);
};

0 comments on commit f53b6a6

Please sign in to comment.