Skip to content

FIREFLY-1954: React Split Pane version upgrade #1977

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

Open
kpuriIpac wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

FIREFLY-1954: React Split Pane version upgrade #1977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0d0f3e2
buggy first pass
kpuriIpac Apr 4, 2026
f4fea1e
more changes to support v3
kpuriIpac Jun 24, 2026
d6d6552
more fine tuning and fixed
kpuriIpac Jun 27, 2026
6a54f2c
fix bug and bloated lock file
kpuriIpac Jul 3, 2026
aaaf13f
try a dockerfile node version fix
kpuriIpac Jul 3, 2026
616c440
cleanup
kpuriIpac Jul 3, 2026
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
2 changes: 1 addition & 1 deletion docker/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ RUN echo "============> Build platform: $(uname -m)"

RUN apt-get update && apt-get install -y \
curl git unzip wget ca-certificates gnupg htmldoc \
&& curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
&& curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
&& apt-get install -y nodejs \
&& npm install -g yarn \
# gradle version 8.10 Not available via apt-get
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"react-grid-layout": "~1.5",
"react-router-dom": "^6.14.0",
"react-slick": "~0.31",
"react-split-pane": "~0.1",
"react-split-pane": "^3.2.0",

@jaladh-singhal jaladh-singhal Jul 10, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We generally pin the minor version too since some packages introduce breaking change in minor version too (not sure about react-split-pane, looks stable enough) and hence use ~ instead of ^. We had a long discussion over this last time I had to update package.json 😅 and I added that to our dev documentation.

"redux": "~3.7",
"redux-logger": "~3.0",
"redux-saga": "~1.1",
Expand Down
51 changes: 33 additions & 18 deletions src/firefly/html/css/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,57 +177,72 @@ div.rootStyle img {
.standard-border { border: solid #a3aeb9 1px; } /*borderColor */

/* react-split-pane style <BEGIN> */
.Pane.vertical, .Pane.horizontal {
.split-pane-pane {
display: flex;
}

.Resizer {
/*background: #000;*/
/*opacity: .2;*/
.split-pane-divider {
z-index: 1;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
/*border-radius: 5px;*/

/* allows consumer to control resizer styling for all the style definitions below */
--resizer-color: var(--joy-palette-neutral-outlinedDisabledColor);
--resizer-border-size: 2px;
--resizer-hover-line-size: 2px;
--resizer-border-style: solid;
}

.Resizer:hover {
-webkit-transition: all 2s ease;
transition: all 2s ease;
.split-pane-divider::after {
content: '';
position: absolute;
background-color: var(--resizer-color);
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 2s ease;
transition: opacity 2s ease;
}

.Resizer.horizontal {
margin: calc(-2 * var(--resizer-border-size)) 0;
.split-pane-divider.vertical {
box-sizing: content-box;
margin: calc(-1 * var(--resizer-border-size)) 0;
border-top: var(--resizer-border-size) var(--resizer-border-style) transparent;
border-bottom: var(--resizer-border-size) var(--resizer-border-style) transparent;
cursor: row-resize;
width: 100%;
}

.Resizer.horizontal:hover {
border-top: var(--resizer-border-size) var(--resizer-border-style) var(--resizer-color);
border-bottom: var(--resizer-border-size) var(--resizer-border-style) var(--resizer-color);
.split-pane-divider.vertical::after {
left: 0;
right: 0;
top: 50%;
height: var(--resizer-hover-line-size);
transform: translateY(-50%);
}

.Resizer.vertical {
margin: 0 calc(-2 * var(--resizer-border-size));
.split-pane-divider.horizontal {
box-sizing: content-box;
margin: 0 calc(-1 * var(--resizer-border-size));
border-left: var(--resizer-border-size) var(--resizer-border-style) transparent;
border-right: var(--resizer-border-size) var(--resizer-border-style) transparent;
cursor: col-resize;
height: 100%;
}

.Resizer.vertical:hover {
border-left: var(--resizer-border-size) var(--resizer-border-style) var(--resizer-color);
border-right: var(--resizer-border-size) var(--resizer-border-style) var(--resizer-color);
.split-pane-divider.horizontal::after {
top: 0;
bottom: 0;
left: 50%;
width: var(--resizer-hover-line-size);
transform: translateX(-50%);
}

.split-pane-divider:hover::after {
opacity: 1;
}
/* react-split-pane style <END> */

Expand Down
2 changes: 1 addition & 1 deletion src/firefly/js/charts/ui/PinnedChartContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const PinnedChartContainer = (props) => {
return (
<Stack id='chart-pinned-sideBySide' overflow='hidden' flexGrow={1}>
<Stack flexGrow={1} position='relative'>
<SplitPanel split='vertical' defaultSize={400} style={{display: 'inline-flex'}} pKey='chart-sideBySide'>
<SplitPanel direction='horizontal' defaultSize={400} style={{display: 'inline-flex'}} pKey='chart-sideBySide'>

@robyww robyww Jul 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This strikes me as unexpected. did the layout change?

@kpuriIpac kpuriIpac Jul 9, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See below, layout remains the same. Just the meaning of vertical/horizontal is swapped.

<Stack>
<Typography level='title-md'>
{activeLabel}
Expand Down
9 changes: 4 additions & 5 deletions src/firefly/js/tables/ui/FilterEditor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,12 @@ import React, {useEffect, useRef} from 'react';
import PropTypes from 'prop-types';
import {Box, Button, Link, Sheet, Stack, Typography} from '@mui/joy';
import {cloneDeep, get} from 'lodash';
import SplitPane from 'react-split-pane';
import Tree from 'rc-tree';
import 'rc-tree/assets/index.css';

import {FilterInfo, getFiltersAsSql} from '../FilterInfo.js';
import {getTableUiById, getSqlFilter, DOC_FUNCTIONS_URL} from '../TableUtil.js';
import {SplitContent} from '../../ui/panel/DockLayoutPanel.jsx';
import {SplitPanel, SplitContent} from '../../ui/panel/DockLayoutPanel.jsx';
import {InputAreaFieldConnected} from '../../ui/InputAreaField.jsx';
import {RadioGroupInputField} from '../../ui/RadioGroupInputField.jsx';
import {insertAtCursor} from '../../ui/tap/AdvancedADQL.jsx';
Expand Down Expand Up @@ -105,10 +104,10 @@ export function SqlTableFilter({tbl_ui_id, tbl_id, onChange, style={}, samples,
placeholder = placeholder || 'e.g., "ra" > 180 AND "ra" < 185';

return (
<SplitPane split='vertical' defaultSize={200} style={{display: 'inline-flex', ...style}}>
<SplitPanel direction='horizontal' defaultSize={200} style={{display: 'inline-flex', ...style}} pKey='filter-editor'>

@robyww robyww Jul 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

again, when did vertical become horizontal

@kpuriIpac kpuriIpac Jul 9, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes so this is a big (but easy) change from v0.x to v3.x, they swapped vertical and horizontal to match CSS flex direction. Hence all of these changes.

<SplitContent style={{display: 'flex', flexDirection: 'column'}}>
<Typography level='title-md'>Columns (sorted)</Typography>
<Box style={{overflow: 'auto', flexGrow: 1}}>
<Box style={{overflow: 'auto', flexGrow: 1}}>
<Tree defaultExpandAll showLine onSelect={onNodeClick} icon={iconGen} treeData={treeData}/>
</Box>
</SplitContent>
Expand Down Expand Up @@ -152,7 +151,7 @@ export function SqlTableFilter({tbl_ui_id, tbl_id, onChange, style={}, samples,
</Stack>
</Stack>
</SplitContent>
</SplitPane>
</SplitPanel>
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/firefly/js/templates/fireflyviewer/ResultsPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {LO_VIEW} from '../../core/LayoutCntlr.js';
const wrapperStyle = { flex: 'auto', display: 'flex', flexFlow: 'column', overflow: 'hidden'};
const eastWest = {east: {index: 0, defaultSize: '50%'}, west: {index: 1} };
const northSouth = {north: {index: 0, defaultSize: '50%'}, south: {index: 1} };
const triView = {east: {index: 0, defaultSize: '50%'}, west: {index: 1}, south: {index: 2, defaultSize: 'calc(100% - 300px)'}};
const triView = {east: {index: 0, defaultSize: '50%'}, west: {index: 1}, south: {index: 2, primary: 'second', defaultSize: 300}};
const singleView = {center: {index: 0, defaultSize: '100%', resize: false}};


Expand Down
17 changes: 8 additions & 9 deletions src/firefly/js/templates/hydra/SampleHydra.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,11 @@

import React from 'react';
import {get} from 'lodash';
import SplitPane from 'react-split-pane';
import {SplitPanel, SplitContent} from '../../ui/panel/DockLayoutPanel.jsx';

import {TablesContainer} from '../../tables/ui/TablesContainer.jsx';
import {ChartsContainer} from '../../charts/ui/ChartsContainer.jsx';
import {LO_VIEW} from '../../core/LayoutCntlr.js';
import {SplitContent} from '../../ui/panel/DockLayoutPanel.jsx';
import {TABLE_SEARCH} from '../../tables/TablesCntlr.js';

import {TargetPanel} from '../../ui/TargetPanel.jsx';
Expand Down Expand Up @@ -113,24 +112,24 @@ function Triview({layout}) {
return (
<div style={{flexGrow:1, display:'flex', flexDirection:'column'}}>
<div style={{flexGrow:1, position:'relative'}}>
<SplitPane split='horizontal' maxSize={-20} minSize={20} defaultSize={'60%'}>
<SplitPane split='vertical' maxSize={-20} minSize={20} defaultSize={'50%'}>
<SplitPanel direction='vertical' maxSize={-20} minSize={20} defaultSize={'60%'} pKey='sample-hydra-triview-outer'>
<SplitPanel direction='horizontal' maxSize={-20} minSize={20} defaultSize={'50%'} pKey='sample-hydra-triview-inner'>
<SplitContent>
<TriViewImageSection key='res-tri-img'
closeable={closeable}
imageExpandedMode={expanded===LO_VIEW.images}
{...images} />
{...images} />
</SplitContent>
<SplitContent>
<TablesContainer expandedMode={expanded===LO_VIEW.tables}
tableOptions={{help_id:'main1TSV.table'}}/>
</SplitContent>
</SplitPane>
</SplitPanel>
<SplitContent>
<ChartsContainer closeable={true}
expandedMode={expanded===LO_VIEW.xyPlots}/>
</SplitContent>
</SplitPane>
</SplitPanel>
</div>
</div>
);
Expand All @@ -140,7 +139,7 @@ function Triview({layout}) {
function TableChart ({layout}) {
const expanded = get(layout, 'mode.expanded');
return (
<SplitPane split='horizontal' maxSize={-20} minSize={20} defaultSize={'60%'}>
<SplitPanel direction='vertical' maxSize={-20} minSize={20} defaultSize={'60%'} pKey='sample-hydra-table-chart'>
<SplitContent>
<TablesContainer expandedMode={expanded===LO_VIEW.tables}
tableOptions={{help_id:'main1TSV.table'}}/>
Expand All @@ -149,7 +148,7 @@ function TableChart ({layout}) {
<ChartsContainer closeable={true}
expandedMode={expanded===LO_VIEW.xyPlots}/>
</SplitContent>
</SplitPane>
</SplitPanel>
);
}

Expand Down
14 changes: 7 additions & 7 deletions src/firefly/js/templates/lightcurve/LcPeriodPlotly.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import React, {PureComponent, useContext} from 'react';
import PropTypes from 'prop-types';

import {get, set, pick, debounce} from 'lodash';
import SplitPane from 'react-split-pane';
import {flux} from '../../core/ReduxFlux.js';
import CompleteButton from '../../ui/CompleteButton.jsx';
import HelpIcon from '../../ui/HelpIcon.jsx';
Expand All @@ -16,7 +15,7 @@ import {FieldGroup, FieldGroupCtx} from '../../ui/FieldGroup.jsx';
import {useStoreConnector} from '../../ui/SimpleComponent.jsx';
import {ValidationField} from '../../ui/ValidationField.jsx';
import {showInfoPopup, INFO_POPUP} from '../../ui/PopupUtil.jsx';
import {SplitContent} from '../../ui/panel/DockLayoutPanel.jsx';
import {SplitPanel, SplitContent} from '../../ui/panel/DockLayoutPanel.jsx';
import Validate from '../../util/Validate.js';
import {dispatchActiveTableChanged} from '../../tables/TablesCntlr.js';
import FieldGroupUtils from '../../fieldGroup/FieldGroupUtils';
Expand Down Expand Up @@ -222,10 +221,12 @@ const PeriodStandardView = (props) => {
<FieldGroup groupKey={pfinderkey} sx={{ display: 'flex', flexDirection: 'column', position: 'relative', flexGrow: 1, minHeight: 500 }}
reducerFunc={LcPFReducer(initState)} keepState={true}>
<div style={{flexGrow: 1, position: 'relative'}}>
<SplitPane split='horizontal' primary='second' maxSize={-100} minSize={100} defaultSize={400}>
<SplitPanel direction='vertical' primary='second' maxSize={-100} minSize={100} defaultSize={400}
pKey='lc-period-plotly-outer'>
<SplitContent>

<SplitPane split='vertical' maxSize={-20} minSize={20} defaultSize={565}>
<SplitPanel direction='horizontal' maxSize={-20} minSize={20} defaultSize={565}
pKey='lc-period-plotly-inner'>
<SplitContent>
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow:'auto'}}>
<LcPFOptionsBox/>
Expand All @@ -234,11 +235,11 @@ const PeriodStandardView = (props) => {
<SplitContent>
<PhaseFoldingChart/>
</SplitContent>
</SplitPane>
</SplitPanel>

</SplitContent>
<LcPeriodogram displayMode={displayMode}/>
</SplitPane>
</SplitPanel>
</div>
</FieldGroup>
);
Expand Down Expand Up @@ -1005,4 +1006,3 @@ export function resetPeriodDefaults(defPeriod) {
dispatchMultiValueChange(pfinderkey, multiVals);
}
}

7 changes: 3 additions & 4 deletions src/firefly/js/templates/lightcurve/LcPeriodogram.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import {Button, Chip, Stack, Typography} from '@mui/joy';
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import { get, set, has} from 'lodash';
import SplitPane from 'react-split-pane';
import {SplitContent} from '../../ui/panel/DockLayoutPanel.jsx';
import {SplitPanel, SplitContent} from '../../ui/panel/DockLayoutPanel.jsx';
import {LC, getValidValueFrom, updateLayoutDisplay} from './LcManager.js';
import {getTypeData} from './LcUtil.jsx';
import FieldGroupUtils from '../../fieldGroup/FieldGroupUtils';
Expand Down Expand Up @@ -596,12 +595,12 @@ const PeriodogramResult = ({expanded}) => {

if (!expanded || expanded === LO_VIEW.none) {
return (
<SplitPane split='vertical' maxSize={-20} minSize={20} defaultSize={565}>
<SplitPanel direction='horizontal' maxSize={-20} minSize={20} defaultSize={565} pKey='lc-periodogram'>
<SplitContent>
<div style={{height: 'calc(100% - 28px)'}}>{tables}</div>
</SplitContent>
<SplitContent>{xyPlot}</SplitContent>
</SplitPane>
</SplitPanel>
);
} else {
return (<div style={{flexGrow: 1}}>
Expand Down
15 changes: 7 additions & 8 deletions src/firefly/js/templates/lightcurve/LcResult.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,13 @@ import {Box, Button, Card, Divider, Sheet, Stack} from '@mui/joy';
import React, {PureComponent, useContext} from 'react';
import PropTypes from 'prop-types';
import {pick, get, isEmpty, cloneDeep} from 'lodash';
import SplitPane from 'react-split-pane';
import {flux} from '../../core/ReduxFlux.js';
import {LO_VIEW, getLayouInfo, dispatchUpdateLayoutInfo} from '../../core/LayoutCntlr.js';
import {TablesContainer} from '../../tables/ui/TablesContainer.jsx';
import {ChartsContainer} from '../../charts/ui/ChartsContainer.jsx';
import {AppPropertiesCtx} from '../../ui/AppPropertiesCtx.jsx';
import {LcImageViewerContainer} from './LcImageViewerContainer.jsx';
import {SplitContent} from '../../ui/panel/DockLayoutPanel.jsx';
import {SplitPanel, SplitContent} from '../../ui/panel/DockLayoutPanel.jsx';
import {LC, getViewerGroupKey, updateLayoutDisplay} from './LcManager.js';
import FieldGroupUtils from '../../fieldGroup/FieldGroupUtils.js';
import {DownloadOptionPanel, DownloadButton} from '../../ui/DownloadDialog.jsx';
Expand Down Expand Up @@ -183,8 +182,8 @@ const StandardView = ({visToolbar, title, searchDesc, imagePlot, xyPlot, tables,

if (!err) {
return (
<SplitPane split='horizontal' maxSize={-20} minSize={20} defaultSize={'60%'}>
<SplitPane split='vertical' maxSize={-20} minSize={20} defaultSize={buttonW}>
<SplitPanel direction='vertical' maxSize={-20} minSize={20} defaultSize={'60%'} pKey='lc-result-standard-outer'>
<SplitPanel direction='horizontal' maxSize={-20} minSize={20} defaultSize={buttonW} pKey='lc-result-standard-inner'>
<SplitContent>
<Stack {...{height: '100%', spacing:1}}>
{settingBox}
Expand All @@ -200,13 +199,13 @@ const StandardView = ({visToolbar, title, searchDesc, imagePlot, xyPlot, tables,
</Stack>
</Sheet>
</SplitContent>
</SplitPane>
</SplitPanel>
<SplitContent>{imagePlot}</SplitContent>
</SplitPane>
</SplitPanel>
);
} else {
return (
<SplitPane split='vertical' maxSize={-20} minSize={20} defaultSize={buttonW}>
<SplitPanel direction='horizontal' maxSize={-20} minSize={20} defaultSize={buttonW} pKey='lc-result-no-image'>
<SplitContent>
<div style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
<div className='settingBox'>{settingBox}</div>
Expand All @@ -216,7 +215,7 @@ const StandardView = ({visToolbar, title, searchDesc, imagePlot, xyPlot, tables,
</div>
</SplitContent>
<SplitContent>{xyPlot}</SplitContent>
</SplitPane>
</SplitPanel>
);
}

Expand Down
Loading