Skip to content

Commit 86268a0

Browse files
Cindy WangCindy Wang
Cindy Wang
authored and
Cindy Wang
committed
DM-7225 Show the right selection and highlight after the summary table is sorted and fix the masking during the uploading course.
1 parent 3a51a54 commit 86268a0

File tree

2 files changed

+117
-44
lines changed

2 files changed

+117
-44
lines changed

‎src/firefly/js/ui/FileUpload.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ function FileUploadView({fileType, isLoading, label, valid, wrapperStyle, messa
4343
return (
4444
<button type='button' className='button std hl'
4545
onClick={() => onUrlAnalysis(value)}
46-
style={{display: 'inline-block'}}>{'Load'}</button>
46+
style={{display: 'inline-block'}}>{'Upload'}</button>
4747
);
4848
} else {
4949
return (

‎src/firefly/js/visualize/ui/FileUploadViewPanel.jsx

Lines changed: 116 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,10 @@ import {FieldGroupTabs, Tab} from '../../ui/panel/TabPanel.jsx';
2424
import './ImageSelectPanel.css';
2525

2626
export const panelKey = 'FileUploadAnalysis';
27-
const summaryTableGroup = 'UPLOAD_SUMMARY_GROUP';
28-
const headerTableGroup = 'HEADER_SUMMARY_GROUP';
2927
const fileId = 'fileUpload';
3028
const urlId = 'urlUpload';
3129

30+
const SUMMARY_INDEX_COL = 0;
3231
const SUMMARY_TYPE_COL = 2;
3332
const HEADER_KEY_COL = 1;
3433
const HEADER_VAL_COL = 2;
@@ -39,6 +38,11 @@ const isFitsFile = (analysisModel) => {
3938
return analysisModel && get(analysisModel, 'fileFormat', '').toLowerCase().includes('fits');
4039
};
4140

41+
/**
42+
* check if table model contain data
43+
* @param model
44+
* @returns {*|boolean}
45+
*/
4246
const isNoDataInModel = (model) => {
4347
const row = model && get(model, ['totalRows']);
4448

@@ -61,6 +65,52 @@ function makeHeaderTable(model, highlightedRow) {
6165
return hlTable;
6266
}
6367

68+
/**
69+
* compute highlightedRow to be the row in original table
70+
* @param tableModel
71+
* @param highlightedRow
72+
* @returns {*}
73+
*/
74+
function adjustHighlightedRow(tableModel, highlightedRow) {
75+
const {data} = get(tableModel, 'tableData');
76+
77+
if (!isNil(highlightedRow)) {
78+
return parseInt(data[highlightedRow][SUMMARY_INDEX_COL]);
79+
}
80+
81+
return -1;
82+
}
83+
84+
/**
85+
* compute the selected row to be the row in the original table
86+
* @param tableModel
87+
* @param selectInfo
88+
* @returns {*}
89+
*/
90+
function adjustSelectInfo(tableModel, selectInfo) {
91+
const selectInfoCls = SelectInfo.newInstance(selectInfo);
92+
const newSelectCls = new SelectInfo.newInstance({rowCount: tableModel.totalRows}, selectInfoCls.offset);
93+
94+
let bNew = false;
95+
96+
Array.from(selectInfoCls.getSelected()).forEach((idx) => {
97+
const newIdx = adjustHighlightedRow(tableModel, idx);
98+
99+
newSelectCls.setRowSelect(newIdx, true);
100+
if (idx !== newIdx) {
101+
bNew = true;
102+
}
103+
});
104+
105+
return bNew ? newSelectCls.data : selectInfo;
106+
}
107+
108+
/**
109+
* analyze the selected units - image, table, no data contained, exceeding the limit
110+
* @param model
111+
* @param limit
112+
* @returns {{image: Array, table: Array, noDataUnit: Array, extra: Array}}
113+
*/
64114
const getSelectionResult = (model, limit) => {
65115
const {selectInfo} = model || {};
66116
let results = {image: [], table: [], noDataUnit: [], extra:[]};
@@ -105,6 +155,7 @@ export class FileUploadViewPanel extends PureComponent {
105155
if (!analysisFields) analysisFields = FieldGroupUtils.getGroupFields(panelKey);
106156

107157
const uploadSrc = get(analysisFields, ['uploadTabs', 'value']);
158+
const displayValue = get(analysisFields, [uploadSrc, 'displayValue']);
108159
const currentAnaResult = get(analysisFields, [uploadSrc, 'analysisResult'], '');
109160
const analysisResultObj = currentAnaResult ? JSON.parse(currentAnaResult) : {};
110161
const {analysisSummary=''} = analysisResultObj;
@@ -126,6 +177,7 @@ export class FileUploadViewPanel extends PureComponent {
126177
updatePreferColumnWidth(analysisModel);
127178

128179
const tblInfo = getTblInfoById(crtAnalysisId);
180+
129181
let selectInfo = get(tblInfo, 'selectInfo', null);
130182

131183
if (!selectInfo) {
@@ -138,7 +190,7 @@ export class FileUploadViewPanel extends PureComponent {
138190
}
139191

140192
return {analysisModel, analysisResult: currentAnaResult, analysisSummary, highlightedRow, hlHeaderTable,
141-
crtAnalysisId, isUploading: false};
193+
crtAnalysisId, isUploading: false, displayValue};
142194
};
143195

144196
this.state = this.getNextState();
@@ -159,27 +211,46 @@ export class FileUploadViewPanel extends PureComponent {
159211
if (this.iAmMounted) {
160212
const analysisFields = FieldGroupUtils.getGroupFields(panelKey);
161213
const uploadSrc = get(analysisFields, ['uploadTabs', 'value']);
162-
const {analysisResult='', valid=true} = get(analysisFields, uploadSrc) || {};
214+
const {analysisResult='', valid=true, displayValue} = get(analysisFields, uploadSrc) || {};
163215

164216
if (!valid) { // upload fails
165-
this.setState({isUploading: false, analysisModel: null, analysisResult: '', analysisSummary: '', highlightedRow: -1,
166-
hlHeaderTable: null});
217+
this.setState({
218+
isUploading: false,
219+
analysisModel: null,
220+
analysisResult: '',
221+
analysisSummary: '',
222+
highlightedRow: -1,
223+
hlHeaderTable: null
224+
});
225+
} else if ((displayValue && displayValue !== this.state.displayValue) && uploadSrc === fileId) { // in uploading the new file
226+
this.setState({
227+
isUploading: true,
228+
displayValue
229+
});
167230
} else if (analysisResult !== this.state.analysisResult) { // a new file is successfully loaded
168231
this.setState(this.getNextState(analysisFields));
169232
} else if (this.state.analysisModel) { // check if highlight or selection is changed
170233
const {crtAnalysisId} = this.state;
171234

172235
if (getTblById(crtAnalysisId)) {
173-
const {highlightedRow, selectInfo} = getTblInfoById(crtAnalysisId);
236+
let {highlightedRow, selectInfo} = getTblInfoById(crtAnalysisId);
237+
const {tableModel} = getTblInfoById(crtAnalysisId);
174238

175-
if (highlightedRow !== this.state.highlightedRow) {
176-
const hlHeaderTable = makeHeaderTable(this.state.analysisModel, highlightedRow);
239+
if (tableModel && tableModel.tableData) {
240+
highlightedRow = adjustHighlightedRow(tableModel, highlightedRow);
241+
if (highlightedRow !== this.state.highlightedRow) {
242+
const hlHeaderTable = makeHeaderTable(this.state.analysisModel, highlightedRow);
243+
244+
this.setState({highlightedRow, hlHeaderTable});
245+
}
246+
247+
selectInfo = adjustSelectInfo(tableModel, selectInfo);
248+
if (selectInfo && !isEqual(selectInfo, get(this.state.analysisModel, 'selectInfo'))) {
249+
const analysisModel = Object.assign({}, this.state.analysisModel, {selectInfo});
250+
this.setState({analysisModel});
251+
252+
}
177253

178-
this.setState({highlightedRow, hlHeaderTable});
179-
}
180-
if (selectInfo && !isEqual(selectInfo, get(this.state.analysisModel, 'selectInfo'))){
181-
const analysisModel = Object.assign({}, this.state.analysisModel, {selectInfo});
182-
this.setState({analysisModel});
183254
}
184255
}
185256
}
@@ -200,39 +271,41 @@ export class FileUploadViewPanel extends PureComponent {
200271

201272
var displayHeaderTable = () => {
202273

203-
if (hlHeaderTable) {
204-
const title = hlHeaderTable.title;
205-
const {columns, data} = get(hlHeaderTable, 'tableData') || {};
274+
if (!hlHeaderTable) {
275+
return false;
276+
}
277+
const {columns, data} = get(hlHeaderTable, 'tableData') || {};
206278

207-
if (columns && data) {
208-
const widths = calcColumnWidths(columns, data);
279+
if (columns && data) {
280+
const widths = calcColumnWidths(columns, data);
209281

210-
columns.forEach((col, idx) => {
211-
col.prefWidth = widths[idx] + 4;
212-
});
213-
}
282+
columns.forEach((col, idx) => {
283+
col.prefWidth = widths[idx] + 4;
284+
});
285+
}
214286

215-
return (
216-
<div style={{ width: (widthTotal-w1), ...summaryStyle}}>
217-
<p style={pStyle}>{title}</p>
218-
<div style={tableStyle}>
219-
<TablePanel
220-
key={headerTableGroup+nowTime()}
221-
tbl_ui_id={hlHeaderTable.tbl_id}
222-
showToolbar={false}
223-
showOptionButton={false}
224-
selectable={false}
225-
tableModel={hlHeaderTable}
226-
/>
227-
</div>
287+
return (
288+
<div style={{ width: (widthTotal-w1), ...summaryStyle}}>
289+
<p style={pStyle}>{hlHeaderTable.title}</p>
290+
<div style={tableStyle}>
291+
<TablePanel
292+
key={hlHeaderTable.tbl_id}
293+
tbl_ui_id={hlHeaderTable.tbl_id}
294+
showToolbar={false}
295+
showOptionButton={false}
296+
selectable={false}
297+
tableModel={hlHeaderTable}
298+
/>
228299
</div>
229-
);
230-
} else {
231-
return false;
232-
}
300+
</div>
301+
);
233302
};
234303

235304
var displayTable = () => {
305+
if (!analysisModel) {
306+
return false;
307+
}
308+
236309
let {selectInfo} = analysisModel || getTblInfoById(analysisModel.tbl_id) || {};
237310
if (isNil(selectInfo)) {
238311
selectInfo = selectRowFromSummaryTable(analysisModel);
@@ -255,7 +328,7 @@ export class FileUploadViewPanel extends PureComponent {
255328
<p style={pStyle}>File Summary</p>
256329
<div style={tableStyle}>
257330
<TablePanel
258-
key={summaryTableGroup}
331+
key={hlTbl.tbl_id}
259332
tbl_ui_id={hlTbl.tbl_id}
260333
showToolbar={false}
261334
showOptionButton={false}
@@ -470,7 +543,7 @@ export function validateModelSelection(uploadTabs) {
470543
}
471544

472545
const crtAnalysisId = analysisTblIds[analysisTblIds.length-1];
473-
const {selectInfo} = getTblInfoById(crtAnalysisId); // check if no valid extension or table selected
546+
const {selectInfo, tableModel} = getTblInfoById(crtAnalysisId); // check if no valid extension or table selected
474547
const selectInfoCls = SelectInfo.newInstance(selectInfo);
475548
const bFits = isFitsFile(analysisModel);
476549
const selList = selectInfoCls.getSelected();
@@ -482,7 +555,7 @@ export function validateModelSelection(uploadTabs) {
482555
});
483556
}
484557

485-
const resultModel = Object.assign({}, analysisModel, {selectInfo});
558+
const resultModel = Object.assign({}, analysisModel, {selectInfo: adjustSelectInfo(tableModel, selectInfo)});
486559
const limit = 20;
487560
const selectResults = getSelectionResult(resultModel, limit); // a search limit is set
488561

0 commit comments

Comments
 (0)