Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#157 layer tray console warnings #164

Merged
merged 5 commits into from
Aug 13, 2024
Merged

#157 layer tray console warnings #164

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e718030
changing the accordion summary to not throw console warnings
PhillipsOwen Aug 9, 2024
530798d
Merge branch 'main' of https://github.com/RENCI/APSViz-UI-V3 into #15…
PhillipsOwen Aug 9, 2024
b5035ed
Merge branch 'main' of https://github.com/RENCI/APSViz-UI-V3 into #15…
PhillipsOwen Aug 9, 2024
522b1fe
Merge branch 'main' of https://github.com/RENCI/APSViz-UI-V3 into #15…
PhillipsOwen Aug 12, 2024
0b42242
correcting the "button within a button" console warning.
PhillipsOwen Aug 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 96 additions & 20 deletions src/components/trays/layers/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
import React from 'react';
import {
Accordion,
AccordionDetails,
AccordionGroup,
AccordionSummary,
Box,
Divider,
IconButton,
import React, { useState } from 'react';
import { Accordion, AccordionDetails, AccordionGroup, Box, Divider, IconButton, Stack
} from '@mui/joy';
import { ActionButton } from '@components/buttons';
import { KeyboardArrowDown as ExpandIcon } from '@mui/icons-material';
import { useLayers } from '@context';
import { LayerCard } from './layer-card';
import { DeleteModelRunButton } from "@components/trays/layers/delete-layer-button";
Expand Down Expand Up @@ -185,13 +180,16 @@ export const LayersList = () => {
// get the unique groups in the selected model runs
const groupList = getGroupList(layers);

// set some state for the accordion expansion view
const [expandedAccordion, setExpandedAccordion] = useState( []);

/**
* handle the drag event
*
* @param result
*/
const onDragEnd = (result) => {
// handle case that there is no destination (could have been dragged out of the drop area)
// handle the case that there is no destination (could have been dragged out of the drop area)
if (!result.destination) {
return;
}
Expand Down Expand Up @@ -248,6 +246,64 @@ export const LayersList = () => {
setDefaultModelLayers(newLayerList);
};

/**
* gets the current state of the accordion
*
* @param id
* @returns {boolean}
*/
const getAccordionState = (id) => {
// init the return
let ret_val = false;

// find the index of this item in state
const index = expandedAccordion.findIndex(l => l.id === id);

// add a new one to the list if it doesn't exist
if (index !== -1) {
// get the state
ret_val = expandedAccordion[index].enabled;
}

// return the state
return ret_val;
};

/**
* toggles the accordion view in state
*
* @param id
*/
const toggleAccordionView = (id) => {
// get a copy of the state list
let newExpandedAccordion = [ ...expandedAccordion ];

// find the index of this item in state
const index = expandedAccordion.findIndex(l => l.id === id);

// add a new one to the list if it doesn't exist
if (index === -1) {
// add a new item to the state list
newExpandedAccordion = [...expandedAccordion, { id: id, enabled: true }];

// update the state list
setExpandedAccordion(newExpandedAccordion);
} else {
// get the target instance in the state array
const alteredExpandedAccordion = newExpandedAccordion[index];

// toggle the view state of the accordion
alteredExpandedAccordion.enabled = !alteredExpandedAccordion.enabled;

// rebuild the list of accordions with the altered view state
setExpandedAccordion([
...newExpandedAccordion.slice(0, index),
{ alteredExpandedAccordion },
...newExpandedAccordion.slice(index + 1)
]);
}
};

/**
* render the layers on the tray
*/
Expand All @@ -266,8 +322,7 @@ export const LayersList = () => {
'.MuiAccordionSummary-button': {
alignItems: 'center',
},
}}
>
}}>
{
// loop through the layer groups and put them away
groupList
Expand All @@ -279,26 +334,47 @@ export const LayersList = () => {
<Draggable key={ layer['group'] } draggableId={ layer['group'] } index={ idx }>
{(provided) => (
<Box ref={ provided['innerRef'] } { ...provided['draggableProps'] }>
<Accordion>
<AccordionSummary>
<Accordion
expanded={ getAccordionState(layer['group']) }
onChange={ () => toggleAccordionView(layer['group']) }>

<Stack
direction="row"
justifyContent="space-between"
alignItems="stretch"
gap={ 2 }
sx={{ flex: 1 }}>
<IconButton
variant="soft"
color="neutral"
{ ...provided['dragHandleProps'] }
>
{ ...provided['dragHandleProps'] }>

<HandleIcon fontSize="xl" />
</IconButton>
<Typography level="body-xs">

<Typography level="body-xs" sx={{ mt: 1 }}>
{ getHeaderSummary(layer['properties']) }
</Typography>

<DeleteModelRunButton groupId={ layer['group'] }/>
</AccordionSummary>

<ActionButton onClick={ () => toggleAccordionView( layer['group']) }>
<ExpandIcon
fontSize="sm"
sx={{
transform: getAccordionState(layer['group']) ? 'rotate(180deg)' : 'rotate(0)',
transition: 'transform 100ms',
}} />
</ActionButton>
</Stack>

<AccordionDetails>
{ renderLayerCards(layers, layer['group'] )}
{ renderLayerCards(layers, layer['group']) }
</AccordionDetails>
</Accordion>
<Divider/>
</Box> )}
</Box> )
}
</Draggable> ))
} { provided.placeholder }
</AccordionGroup> )}
Expand Down