Skip to content

Commit 95f3762

Browse files
tgoldinatgoldina
committed
DM-6286 Refactored charts display (from ChartsTableViewPanel.jsx to ChartPanel.jsx
1 parent 8a9d6ca commit 95f3762

File tree

10 files changed

+883
-9
lines changed

10 files changed

+883
-9
lines changed

‎src/firefly/js/api/ApiHighlevelBuild.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -458,7 +458,6 @@ function doShowXYPlot(llApi, targetDiv, params={}) {
458458
renderDOM(targetDiv, ChartsTableViewPanel,
459459
{
460460
key: `${targetDiv}-xyplot`,
461-
tblId,
462461
chartId,
463462
closeable: false,
464463
expandedMode: false
@@ -528,7 +527,6 @@ function doShowHistogram(llApi, targetDiv, params={}) {
528527
renderDOM(targetDiv, ChartsTableViewPanel,
529528
{
530529
key: `${targetDiv}-histogram`,
531-
tblId,
532530
chartId,
533531
closeable: false,
534532
expandedMode: false

‎src/firefly/js/charts/ChartType.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/*
2+
* License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
3+
*/
4+
5+
6+
import {logError} from '../util/WebUtil.js';
7+
8+
/**
9+
* @global
10+
* @public
11+
* @typedef {Object} ChartType - an object which specifies how to render a chart type
12+
* @prop {string} id - unique chart type id
13+
* @prop {Function} renderChart - function to render chart part: renderChart(chartId)
14+
* @prop {Function} renderOptions - function to render chart options: renderOptions(chartId)
15+
* @prop {Function} renderToolbar - function to render toolbar renderToolbar(chartId, expandedMode, expandable)
16+
*/
17+
18+
const chartTypes = [];
19+
20+
21+
/**
22+
* Get chart data type
23+
* @param id
24+
* @returns {ChartType}
25+
*/
26+
function getChartType(id) {
27+
return chartTypes.find((el) => {
28+
return el.id === id;
29+
});
30+
}
31+
32+
/**
33+
* Add chart data type
34+
* @param {ChartType} chartType
35+
*/
36+
function addChartType(chartType) {
37+
const id = {chartType};
38+
if (!id) {
39+
logError('[ChartTypes] unable to add: missing id');
40+
return;
41+
}
42+
if (chartTypes.find((el) => {
43+
return el.id === id;
44+
})) {
45+
logError(`[ChartTypes] unable to add: id ${id} is already used`);
46+
return;
47+
}
48+
// more validation?
49+
chartTypes.push(chartType);
50+
}
51+
52+
/**
53+
* Create a factory to manage chart data types
54+
* @param {Array<ChartType>} predefinedTypes
55+
* @return {{getChartType:Function, addChartType:Function}}
56+
*/
57+
export function chartTypeFactory(predefinedTypes)
58+
{
59+
predefinedTypes.forEach((cdt) => addChartType(cdt));
60+
return {
61+
getChartType,
62+
addChartType
63+
};
64+
}

‎src/firefly/js/charts/chartTypes/HistogramTblView.jsx

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
/*
2+
* License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
3+
*/
4+
5+
import {get} from 'lodash';
6+
import React from 'react';
7+
import * as TblUtil from '../../tables/TableUtil.js';
8+
9+
import {LO_MODE, LO_VIEW, dispatchSetLayoutMode} from '../../core/LayoutCntlr.js';
10+
import {HelpIcon} from '../../ui/HelpIcon.jsx';
11+
import {ToolbarButton} from '../../ui/ToolbarButton.jsx';
12+
13+
import * as ChartsCntlr from '../ChartsCntlr.js';
14+
15+
import {HistogramOptions} from '../ui/HistogramOptions.jsx';
16+
import {Histogram} from '../ui/Histogram.jsx';
17+
import {getChartProperties, FilterEditorWrapper} from './TblView.jsx';
18+
19+
import DELETE from 'html/images/blue_delete_10x10.png';
20+
import OUTLINE_EXPAND from 'html/images/icons-2014/24x24_ExpandArrowsWhiteOutline.png';
21+
import SETTINGS from 'html/images/icons-2014/24x24_GearsNEW.png';
22+
import CLEAR_FILTERS from 'html/images/icons-2014/24x24_FilterOff_Circle.png';
23+
import FILTER from 'html/images/icons-2014/24x24_Filter.png';
24+
import LOADING from 'html/images/gxt/loading.gif';
25+
26+
export const HISTOGRAM_TBLVIEW = {
27+
id : 'histogram',
28+
renderChart,
29+
renderOptions,
30+
renderToolbar,
31+
getChartProperties,
32+
updateOnStoreChange
33+
};
34+
35+
function updateOnStoreChange(chartProperties) {
36+
TblUtil.isFullyLoaded(get(chartProperties, 'tblId'));
37+
}
38+
39+
function renderChart(props) {
40+
const {chartId, tblId, chartData, widthPx, heightPx} = props;
41+
if (!TblUtil.isFullyLoaded(tblId) || !chartData || !heightPx || !widthPx) {
42+
return <div/>;
43+
}
44+
const { isDataReady, data:histogramData, options:histogramParams} = ChartsCntlr.getChartDataElement(chartId);
45+
46+
if (isDataReady) {
47+
var logs, reversed;
48+
if (histogramParams) {
49+
var logvals = '';
50+
if (histogramParams.x.includes('log')) { logvals += 'x';}
51+
if (histogramParams.y.includes('log')) { logvals += 'y';}
52+
if (logvals.length>0) { logs = logvals;}
53+
54+
var rvals = '';
55+
if (histogramParams.x.includes('flip')) { rvals += 'x';}
56+
if (histogramParams.y.includes('flip')) { rvals += 'y';}
57+
if (rvals.length>0) { reversed = rvals;}
58+
59+
}
60+
61+
return (
62+
<Histogram data={histogramData}
63+
desc={histogramParams.columnOrExpr}
64+
binColor='#8c8c8c'
65+
height={heightPx}
66+
width={widthPx}
67+
logs={logs}
68+
reversed={reversed}
69+
/>
70+
);
71+
} else {
72+
if (histogramParams) {
73+
return <div style={{position: 'relative', width: '100%', height: '100%'}}><div className='loading-mask'/></div>;
74+
} else {
75+
return 'Select Histogram Parameters';
76+
}
77+
}
78+
}
79+
80+
function renderOptions(chartId, optionsKey) {
81+
if (optionsKey === 'options') {
82+
const {tblStatsData} = getChartProperties(chartId);
83+
if (get(tblStatsData,'isColStatsReady')) {
84+
const chartDataElement = ChartsCntlr.getChartDataElement(chartId);
85+
const chartDataElementId = chartDataElement.id;
86+
const formName = `chartOpt-${chartId}`;
87+
return (
88+
<HistogramOptions key={formName}
89+
groupKey={formName}
90+
colValStats={tblStatsData.colStats}
91+
histogramParams={get(chartDataElement, 'options')}
92+
defaultParams={get(chartDataElement, 'defaultOptions')}
93+
onOptionsSelected={(options) => {
94+
ChartsCntlr.dispatchChartOptionsReplace({chartId, chartDataElementId, newOptions: options});
95+
}}
96+
/>
97+
);
98+
} else {
99+
return (
100+
<img style={{verticalAlign:'top', height: 16, padding: 10, float: 'left'}}
101+
title='Loading Options...'
102+
src={LOADING}
103+
/>);
104+
}
105+
} else if (optionsKey === 'filters') {
106+
const {tableModel} = getChartProperties(chartId);
107+
return (
108+
<FilterEditorWrapper tableModel={tableModel}/>
109+
);
110+
}
111+
}
112+
113+
function renderToolbar(chartId, expandable, expandedMode, toggleOptions) {
114+
const {tableModel, deletable, help_id} = getChartProperties(chartId);
115+
return (
116+
<div className='PanelToolbar ChartPanel__toolbar'>
117+
<div className='PanelToolbar_group'/>
118+
<div className='PanelToolbar_group'>
119+
{TblUtil.getFilterCount(tableModel)>0 &&
120+
<img className='PanelToolbar__button'
121+
title='Remove all filters'
122+
src={CLEAR_FILTERS}
123+
onClick={() => TblUtil.clearFilters(tableModel)}
124+
/>}
125+
<ToolbarButton icon={FILTER}
126+
tip='Show/edit filters'
127+
visible={true}
128+
badgeCount={TblUtil.getFilterCount(tableModel)}
129+
onClick={() => toggleOptions('filters')}/>
130+
<img className='PanelToolbar__button'
131+
title='Chart options and tools'
132+
src={SETTINGS}
133+
onClick={() => toggleOptions('options')}
134+
/>
135+
{ expandable && !expandedMode &&
136+
<img className='PanelToolbar__button'
137+
title='Expand this panel to take up a larger area'
138+
src={OUTLINE_EXPAND}
139+
onClick={() =>
140+
{
141+
ChartsCntlr.dispatchChartExpanded(chartId);
142+
dispatchSetLayoutMode(LO_MODE.expanded, LO_VIEW.xyPlots);
143+
}}
144+
/>}
145+
146+
{ help_id && <div style={{display: 'inline-block', position: 'relative', top: -9}}> <HelpIcon helpId={help_id} /> </div>}
147+
148+
{ expandable && !expandedMode && deletable &&
149+
<img style={{display: 'inline-block', position: 'relative', top: -9, alignSelf: 'baseline', padding: 2, cursor: 'pointer'}}
150+
title='Delete this chart'
151+
src={DELETE}
152+
onClick={() => {ChartsCntlr.dispatchChartRemove(chartId);}}
153+
/>}
154+
</div>
155+
</div>
156+
);
157+
}

0 commit comments

Comments
 (0)