Skip to content

Commit 3a3f395

Browse files
jh-RLIjh-RLI
authored
Merge pull request #2030 from OpenEnergyPlatform/pre-release-fixes
Pre release fixes
2 parents a0db403 + 7fc7be2 commit 3a3f395

File tree

8 files changed

+175
-138
lines changed

8 files changed

+175
-138
lines changed

‎factsheet/frontend/src/App.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@ function App() {
5252
}
5353
if (!loading) {
5454
if (resource === 'scenario-bundles' && route === 'compare') {
55-
return <ComparisonBoardMain params={route} />
55+
const uidString = window.location.pathname.split('/')[3] || '';
56+
const uids = uidString.split('&'); // ✅ split into array
57+
return <ComparisonBoardMain params={uids} />
5658
}
5759
// now matches both '/scenario-bundles/id/new' and '/scenario-bundles/id/<uuid>'
5860
if (resource === 'scenario-bundles' && route === 'id' && idOrNew) {

‎factsheet/frontend/src/components/comparisonBoardItems.jsx‎

Lines changed: 88 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
33
import Typography from '@mui/material/Typography';
44
import Chip from '@mui/material/Chip';
@@ -7,7 +7,7 @@ import palette from '../styles/oep-theme/palette.js';
77
import variables from '../styles/oep-theme/variables.js';
88
import StudyKeywords from './scenarioBundleUtilityComponents/StudyDescriptors';
99
import handleOpenURL from './scenarioBundleUtilityComponents/handleOnClickTableIRI.jsx';
10-
import HtmlTooltip from '../styles/oep-theme/components/tooltipStyles'
10+
import HtmlTooltip from '../styles/oep-theme/components/tooltipStyles';
1111

1212
const reorder = (list, startIndex, endIndex) => {
1313
const result = Array.from(list);
@@ -21,7 +21,7 @@ const aspectStyle = {
2121
padding: variables.spacing[3],
2222
color: palette.text.primary,
2323
fontSize: variables.fontSize.sm,
24-
lineHeight: variables.lineHeight.sm
24+
lineHeight: variables.lineHeight.sm,
2525
};
2626

2727
const getItemStyle = (isDragging, draggableStyle, index) => ({
@@ -38,78 +38,105 @@ const getItemStyle = (isDragging, draggableStyle, index) => ({
3838
...draggableStyle,
3939
});
4040

41-
const getListStyle = isDraggingOver => ({
41+
const getListStyle = (isDraggingOver) => ({
4242
background: isDraggingOver ? 'white' : 'white',
4343
display: 'flex',
4444
overflow: 'auto',
4545
width: '100%',
4646
minHeight: '20rem',
4747
});
4848

49-
export default function ComparisonBoardItems (props) {
49+
export default function ComparisonBoardItems(props) {
5050
const { elements, c_aspects } = props;
51-
const [state, setState] = useState({ items : elements });
5251

53-
function onDragEnd(result) {
54-
if (!result.destination) {
55-
return;
56-
}
57-
if (result.destination.index === result.source.index) {
58-
return;
59-
}
60-
const newItems = reorder(
61-
state.items,
62-
result.source.index,
63-
result.destination.index
64-
);
65-
setState({
66-
items: newItems,
67-
});
68-
}
52+
const [state, setState] = useState({ items: elements });
53+
const [mounted, setMounted] = useState(false);
6954

70-
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
55+
useEffect(() => {
56+
setState({ items: elements });
57+
}, [elements]);
58+
59+
useEffect(() => {
60+
const timer = setTimeout(() => setMounted(true), 30); // allow DOM to stabilize
61+
return () => clearTimeout(timer);
62+
}, []);
63+
64+
const onDragEnd = (result) => {
65+
if (!result.destination || result.destination.index === result.source.index) return;
66+
67+
const newItems = reorder(state.items, result.source.index, result.destination.index);
68+
setState({ items: newItems });
69+
};
70+
71+
if (!mounted || !state.items?.length) return null;
7172

7273
return (
7374
<div style={{ overflow: 'auto', marginBottom: variables.spacing[6] }}>
7475
<DragDropContext onDragEnd={onDragEnd}>
75-
<Droppable
76-
droppableId="droppable"
77-
direction="horizontal"
78-
>
79-
{(provided, snapshot) => (
76+
<Droppable droppableId="droppable-scenarios" direction="horizontal">
77+
{(provided, snapshot) => (
8078
<div
8179
ref={provided.innerRef}
82-
style={getListStyle(snapshot.isDraggingOver)}
8380
{...provided.droppableProps}
81+
style={getListStyle(snapshot.isDraggingOver)}
8482
>
85-
{state.items.map((item, index) => (
86-
<Draggable key={item.data.uid} draggableId={item.data.uid} index={index}>
87-
{(provided, snapshot) => (
88-
<div
89-
ref={provided.innerRef}
90-
{...provided.draggableProps}
91-
{...provided.dragHandleProps}
92-
style={getItemStyle(
93-
snapshot.isDragging,
94-
provided.draggableProps.style,
95-
index
96-
)
97-
}
98-
>
99-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent:'center', height: '4rem', marginBottom: variables.spacing[3], backgroundColor: index === 0 ? palette.background.highlight : palette.background.lighter, color: index === 0 ? palette.primary.contrastText : palette.text.primary }} >
100-
101-
<Typography variant="h6">
102-
{ index === 0 ? <b>{item.acronym}</b> : item.acronym }
103-
</Typography>
104-
<Typography variant="caption">
105-
{ index === 0 ? 'Base scenario' : '' }
106-
</Typography>
107-
</div>
83+
{state.items.map((item, index) => {
84+
const uid = String(item?.data?.uid);
85+
if (!uid) return null;
10886

109-
<div style={{ height: '60vh',overflow: 'auto', }}>
87+
return (
88+
<Draggable key={uid} draggableId={uid} index={index}>
89+
{(provided, snapshot) => (
90+
<div
91+
ref={provided.innerRef}
92+
{...provided.draggableProps}
93+
{...provided.dragHandleProps}
94+
style={getItemStyle(
95+
snapshot.isDragging,
96+
provided.draggableProps.style,
97+
index
98+
)}
99+
>
100+
{/* --- DRAGGABLE CONTENT HERE --- */}
101+
<div
102+
style={{
103+
display: 'flex',
104+
flexDirection: 'column',
105+
alignItems: 'center',
106+
justifyContent: 'center',
107+
height: '4rem',
108+
marginBottom: variables.spacing[3],
109+
backgroundColor:
110+
index === 0
111+
? palette.background.highlight
112+
: palette.background.lighter,
113+
color:
114+
index === 0
115+
? palette.primary.contrastText
116+
: palette.text.primary,
117+
}}
118+
>
119+
<Typography variant="h6">
120+
{index === 0 ? <b>{item.acronym}</b> : item.acronym}
121+
</Typography>
122+
<Typography variant="caption">
123+
{index === 0 ? 'Base scenario' : ''}
124+
</Typography>
125+
</div>
110126

127+
<div style={{ height: '60vh', overflow: 'auto' }}>
128+
{c_aspects.includes('Study name') && (
129+
<div style={aspectStyle}>
130+
<Typography variant="subtitle2" gutterBottom>
131+
<b>Study name:</b>
132+
</Typography>
133+
<Typography variant="body2">
134+
{item.data.study_label}
135+
</Typography>
136+
</div>
137+
)}
111138

112-
{c_aspects.includes("Study name") && <div style= {aspectStyle} >
139+
{c_aspects.includes("Study name") && <div style= {aspectStyle} >
113140
<Typography variant="subtitle2" gutterBottom component="div">
114141
<b>Study name:</b>
115142
</Typography>
@@ -277,13 +304,13 @@ export default function ComparisonBoardItems (props) {
277304
</HtmlTooltip>
278305
))}
279306
</div>}
280-
281-
</div>
282-
283-
</div>
284-
)}
285-
</Draggable>
286-
))}
307+
</div>
308+
</div>
309+
)}
310+
</Draggable>
311+
);
312+
})}
313+
{provided.placeholder}
287314
</div>
288315
)}
289316
</Droppable>

‎factsheet/frontend/src/components/comparisonBoardMain.tsx‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,10 @@ const ComparisonBoardMain = (props) => {
5555

5656
const { params } = props;
5757
const [scenarios, setScenarios] = useState([]);
58-
const scenarios_uid = params.split('#');
58+
const scenarios_uid = params;
59+
// console.log(scenarios_uid);
5960
const scenarios_uid_json = JSON.stringify(scenarios_uid);
61+
// console.log(scenarios_uid_json);
6062
const [selectedCriteria, setselectedCriteria] = useState(['Study descriptors', 'Scenario types', 'Study name']);
6163
const [alignment, setAlignment] = React.useState('Qualitative');
6264
const [sparqOutput, setSparqlOutput] = useState([]);
@@ -198,12 +200,13 @@ const ComparisonBoardMain = (props) => {
198200
});
199201
}, []);
200202

201-
const handleChangeView = (
202-
newAlignment,
203-
) => {
204-
newAlignment !== null && setAlignment(newAlignment);
203+
const handleChangeView = (event, newAlignment) => {
204+
if (newAlignment !== null) {
205+
setAlignment(newAlignment);
206+
}
205207
};
206208

209+
207210
// 'http://oevkg:8080/sparql'
208211

209212
const Criteria = [
@@ -259,7 +262,7 @@ const ComparisonBoardMain = (props) => {
259262
const categorieIDs = [];
260263
for (let key in category_disctionary) {
261264
if (selectedCategories.includes(category_disctionary[key])) {
262-
categorieIDs.push('http://openenergy-platform.org/ontology/oeo/' + key);
265+
categorieIDs.push('https://openenergyplatform.org/ontology/oeo/' + key);
263266
}
264267
}
265268

@@ -837,7 +840,7 @@ const sendQuery = async (index) => {
837840
const categorieIDs = [];
838841
for (let key in category_disctionary) {
839842
if (selectedCategories.includes(category_disctionary[key])) {
840-
categorieIDs.push('http://openenergy-platform.org/ontology/oeo/' + key);
843+
categorieIDs.push('https://openenergyplatform.org/ontology/oeo/' + key);
841844
}
842845
}
843846

@@ -1171,29 +1174,34 @@ const sendQuery = async (index) => {
11711174
</Toolbar>
11721175
{/* <ComparisonControl /> */}
11731176

1174-
{alignment == "Qualitative" &&
1177+
{alignment === "Qualitative" && scenarios.length > 0 && (
11751178
<Grid item xs={12}>
11761179
<OptionBox>
11771180
<h2>Criteria</h2>
11781181
<FormGroup>
1179-
<div >
1180-
{
1181-
Criteria.map((item) => <FormControlLabel control={<Checkbox size="medium" color="primary" />} checked={selectedCriteria.includes(item)} onChange={handleCriteria} label={item} name={item} />)
1182-
}
1182+
<div>
1183+
{Criteria.map((item) => (
1184+
<FormControlLabel
1185+
key={item}
1186+
control={<Checkbox size="medium" color="primary" />}
1187+
checked={selectedCriteria.includes(item)}
1188+
onChange={handleCriteria}
1189+
label={item}
1190+
name={item}
1191+
/>
1192+
))}
11831193
</div>
11841194
</FormGroup>
1185-
{/* <MultipleSelectChip
1186-
sx={{ mt: 2, width: "100%" }}
1187-
options={['Scenario 1', 'Scenario 2', 'Scenario 3']}
1188-
label="Scenarios to be compared"
1189-
disabled={true}
1190-
/> */}
11911195
</OptionBox>
1192-
<ComparisonBoardItems elements={scenarios} c_aspects={selectedCriteria} />
1196+
<ComparisonBoardItems
1197+
key={`qualitative-${scenarios.map(s => s.data.uid).join(',')}`}
1198+
elements={scenarios}
1199+
c_aspects={selectedCriteria}
1200+
/>
11931201
</Grid>
1194-
}
1195-
{alignment == "Quantitative" &&
1202+
)}
11961203

1204+
{alignment === "Quantitative" &&
11971205
<Grid container spacing={2}>
11981206
<Grid item lg={6} sx={{ borderLeft: variables.border.light, px: 2 }}>
11991207

‎factsheet/frontend/src/components/customTable.jsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ function EnhancedTableToolbar(props) {
274274
onClick={handleReset}>Reset</Button>
275275
<Tooltip title="Compare">
276276

277-
{numSelected > 1 ? <Link to={`scenario-bundles/compare/${[...selected].join('#')}`} onClick={() => this.forceUpdate} style={{ color: 'white' }}>
277+
{numSelected > 1 ? <Link to={`scenario-bundles/compare/${[...selected].join('&')}`} onClick={() => this.forceUpdate} style={{ color: 'white' }}>
278278
<Button size="small"
279279
style={{ 'marginLeft': '5px', 'color': 'white', 'textTransform': 'none' }}
280280
variant="contained"
@@ -645,14 +645,14 @@ export default function CustomTable(props) {
645645
const emptyRows =
646646
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
647647

648-
const visibleRows = React.useMemo(
649-
() =>
650-
stableSort(rows, getComparator(order, orderBy)).slice(
651-
page * rowsPerPage,
652-
page * rowsPerPage + rowsPerPage,
653-
),
654-
[order, orderBy, page, rowsPerPage],
655-
);
648+
const visibleRows = React.useMemo(() => {
649+
const finalRows = filteredFactsheets.length === 0 ? factsheets : filteredFactsheets;
650+
return stableSort(finalRows, getComparator(order, orderBy)).slice(
651+
page * rowsPerPage,
652+
page * rowsPerPage + rowsPerPage,
653+
);
654+
}, [filteredFactsheets, factsheets, order, orderBy, page, rowsPerPage]);
655+
656656

657657

658658
const scenarioAspects = [
@@ -665,13 +665,13 @@ export default function CustomTable(props) {
665665
];
666666

667667
const renderRows = (rs) => {
668-
const rowsToRender = filteredFactsheets.length == 0 ? factsheets : filteredFactsheets;
668+
// const rowsToRender = filteredFactsheets.length == 0 ? factsheets : filteredFactsheets;
669669
return <TableBody >
670-
{rowsToRender.map((row, index) => {
670+
{rs.map((row, index) => {
671671
const isItemSelected = isSelected(row.study_name);
672672
const labelId = `enhanced-table-checkbox-${index}`;
673673
return (
674-
<React.Fragment key={row.study_name}>
674+
<React.Fragment key={row.uid}>
675675
<StyledTableRow
676676
hover
677677
role="checkbox"

‎factsheet/frontend/src/index.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ const container = document.getElementById('root');
2121
const root = createRoot(container);
2222

2323
root.render(
24-
<React.StrictMode>
24+
// StrictMode currently breaks DND in qualitative comparison
25+
// <React.StrictMode>
2526
<CacheProvider value={cache}>
2627
<ThemeProvider theme={theme}>
2728
<CssBaseline />
@@ -36,5 +37,5 @@ root.render(
3637
</LocalizationProvider>
3738
</ThemeProvider>
3839
</CacheProvider>
39-
</React.StrictMode>
40+
// </React.StrictMode>
4041
);

0 commit comments

Comments
 (0)