Skip to content

Commit d1bf2eb

Browse files
ejolietejoliet
committed
DM-6137: adjust layout to fix width and height for each 3 panels
1 parent 85d4c4b commit d1bf2eb

File tree

7 files changed

+70
-89
lines changed

7 files changed

+70
-89
lines changed

‎src/firefly/js/tables/ui/TableRenderer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ export const createLinkCell = ({hrefColIdx, value}) => {
205205
}else {
206206
return (
207207
<Cell {...CellProps}>
208-
<a href={href}>{val}</a>
208+
<a target='_blank' href={href}>{val}</a>
209209
</Cell>
210210
);
211211
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export class CatalogSearchMethodType extends Component {
6464
const {groupKey} = this.props;
6565

6666
return (
67-
<div style={{padding: 10, display:'flex', flexDirection:'column', flexWrap:'no-wrap', alignItems:'center'}}>
67+
<div style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
6868
{renderTargetPanel(groupKey, searchType)}
6969
<div
7070
style={{display:'flex', flexDirection:'column', flexWrap:'no-wrap', alignItems:'center' }}>
@@ -230,7 +230,7 @@ function renderTargetPanel(groupKey, searchType) {
230230

231231
return (
232232
visible && <div className="intarget">
233-
<TargetPanel groupKey={groupKey}/>
233+
<TargetPanel labelWidth={90} groupKey={groupKey}/>
234234
<ListBoxInputField
235235
fieldKey='targettry'
236236
options={[{label: 'Try NED then Simbad', value: 'NED'},

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

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export class CatalogConstraintsPanel extends React.Component {
5050

5151
render() {
5252
const {tableModel} = this.state;
53-
const {catname, dd_short} = this.props;
53+
const {catname, dd_short, fieldKey} = this.props;
5454

5555
if (isEmpty(tableModel)) {
5656
return <div></div>;
@@ -61,13 +61,13 @@ export class CatalogConstraintsPanel extends React.Component {
6161
});
6262

6363
return (
64-
<div style={{padding:'0 0 20px 0', margin:'0 80px 0 80px'}}>
64+
<div style={{padding:'0 0 5px'}}>
6565
<div
6666
style={{display:'flex', flexDirection:'column',
67-
margin:'0 50px 0 50px', padding:'0 10px 10px 10px',
67+
margin:'0px 10px 5px 5px', padding:'0 0 0 10px',
6868
border:'1px solid #a3aeb9'}}>
6969
<div
70-
style={{display:'flex', flexDirection:'row', padding:'10px'}}>
70+
style={{display:'flex', flexDirection:'row', padding:'5px 5px 0'}}>
7171

7272
<ListBoxInputField fieldKey={'ddform'} inline={true} labelWidth={0}
7373
initialState={{
@@ -86,7 +86,7 @@ export class CatalogConstraintsPanel extends React.Component {
8686
</button>
8787
</div>
8888
<div>
89-
<TablePanelConnected {...{tableModel}} />
89+
<TablePanelConnected {...{tableModel,fieldKey}} />
9090
{renderSqlArea()}
9191
</div>
9292
</div>
@@ -136,30 +136,30 @@ export class CatalogConstraintsPanel extends React.Component {
136136

137137
/**
138138
* Set true checkboxes column wherever a row should be selected given by column named 'sel'
139-
* @param tableModel
139+
* @param anyTableModel
140140
*/
141-
function setRowsChecked(tableModel) {
142-
const selectInfoCls = SelectInfo.newInstance({rowCount: tableModel.totalRows});
143-
const idxColSel = getColumnIdx(tableModel, 'sel');
144-
tableModel.tableData.data.forEach((arow, index) => {
141+
function setRowsChecked(anyTableModel) {
142+
const selectInfoCls = SelectInfo.newInstance({rowCount: anyTableModel.totalRows});
143+
const idxColSel = getColumnIdx(anyTableModel, 'sel');
144+
anyTableModel.tableData.data.forEach((arow, index) => {
145145
if (arow[idxColSel] === 'y') {
146146
selectInfoCls.setRowSelect(index, true);
147147
}
148148
});
149149
const selectInfo = selectInfoCls.data;
150-
merge(tableModel, {selectInfo});
151-
//TblCntlr.dispatchTableSelect(tableModel.tbl_id, selectInfo);
150+
merge(anyTableModel, {selectInfo});
151+
//TblCntlr.dispatchTableSelect(anyTableModel.tbl_id, selectInfo);
152152
}
153153

154154
/**
155-
* Add to tbale columns an extra colDef
155+
* Add to table columns an extra colDef
156156
* original columns from table DD are: name,constraints,description,units,indx,dbtype,tableflg,sel
157157
* @param tableModelFetched
158158
* @param urldef
159159
*/
160160
function addColumnDef(tableModelFetched, urldef) {
161161
const nCols = tableModelFetched.tableData.columns.length;
162-
const u = (urldef === 'null') ? '#' : urldef.match(/href='([^']+)'/)[1] + '#';
162+
const u = (urldef && urldef === 'null') ? '#' : urldef.match(/href='([^']+)'/)[1] + '#';
163163
tableModelFetched.tableData.columns.splice(nCols, 0, {visibility: 'hide', name: 'coldef', type: 'char'});
164164
tableModelFetched.tableData.data.map((e) => {
165165
e.splice(nCols, 0, u + e[0]);
@@ -217,8 +217,9 @@ CatalogConstraintsPanel.defaultProps = {
217217
* @param tableModel
218218
* @param onChange
219219
* @param ontablechanged
220+
* @param fieldKey
220221
*/
221-
function ConstraintPanel({tableModel, onChange, ontablechanged}) {
222+
function ConstraintPanel({tableModel, fieldKey, onChange, ontablechanged}) {
222223

223224
//define the table style only in the table div
224225
const tableStyle = {
@@ -245,8 +246,8 @@ function ConstraintPanel({tableModel, onChange, ontablechanged}) {
245246
return (
246247

247248
<div
248-
style={{margin: '10px 0 0 0 ', display:'inline-block',
249-
width: '710px', height: '200px', padding: '5px 5px 5px 5px'}}>
249+
style={{display:'inline-block',
250+
width: '97%', height: '170px', padding: '5px 5px'}}>
250251
{
251252
/*<div style={popupPanelResizableStyle}>
252253
<div style={tableStyle}>*/
@@ -397,16 +398,16 @@ const inputFiledValidator = (filterString) => {
397398
function renderSqlArea() {
398399
//m31, cone search 10', w3snr>7 and (w2mpro-w3mpro)>1.5 on wise source catalog = 361
399400
return (
400-
<div style={{margin: '20px 0 0 0 '}}>
401+
<div style={{margin: '2px 0'}}>
401402
<InputAreaFieldConnected fieldKey='txtareasql'
402403
wrapperStyle={{padding: 5}}
403404
style={{
404405
overflow: 'auto',
405406
display: 'flex',
406407
alignItems: 'center',
407408
height: '20px',
408-
maxHeight: '150px',
409-
width: '710px',
409+
maxHeight: '100px',
410+
width: '97%',
410411
maxWidth: '1000px'
411412
}}
412413
initialState={{
@@ -415,14 +416,12 @@ function renderSqlArea() {
415416
}}
416417
label='Additional constraints (SQL):'
417418
/>
418-
<div style={{align: 'center'}}>
419419
<em>Ex: w3snr&gt;7 and (w2mpro-w3mpro)&gt;1.5 and ra&gt;102.3 and ra&lt;112.3 and dec&lt;-5.5 and
420420
dec&gt;
421421
-15.5</em><br />
422422
(source_id_mf = '1861p075_ac51-002577')
423423
<br />
424424
<code style={{align: 'center', color: 'red'}}>The format for date type is yyyy-mm-dd</code>
425-
</div>
426425
</div>
427426
);
428427
}

‎src/firefly/js/visualize/ui/CatalogSelectViewPanel.css

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,22 @@
1515
border: 1px solid #a3aeb9;
1616
padding: 10px;
1717
margin: 10px 5px 10px 5px;
18+
height: 260px;
19+
/*width:100%;*/
1820
}
1921

20-
.ddtable{
22+
.spatialsearch {
23+
padding: 10px;
24+
width: 490px;
25+
height: 260px;
26+
margin: 10px 10px 0 5px;
27+
border: 1px solid #a3aeb9;
28+
}
29+
30+
.ddtable {
2131
max-width: 100%;
2232
}
2333

24-
.expand-dd-table:hover + .ddtable { /* Uses the adjacent sibling selector */
25-
visibility: visible; /* Or display: block */
34+
.expand-dd-table:hover + .ddtable { /* Uses the adjacent sibling selector */
35+
visibility: visible; /* Or display: block */
2636
}

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

Lines changed: 25 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -402,7 +402,7 @@ class CatalogSelectView extends Component {
402402
);
403403
}
404404
}
405-
405+
const currentField = {};
406406
/**
407407
* Reducer from field group component, should return updated project and sub-project updated
408408
* @returns {Function} reducer to change fields when user interact with the dialog
@@ -427,16 +427,15 @@ var userChangeDispatch = function () {
427427
const valP = inFields.project.value;
428428
let valC = inFields.catalog.value;
429429
const optList = getSubProjectOptions(catmaster, valP);
430+
let currentIdx = get(inFields, 'cattable.indexClicked', 0);
431+
430432
if (fieldKey === 'project') {
431-
valC = optList[0].value;//If project has changed, initiialise to the first subproject found
433+
currentIdx = 0;
434+
valC = optList[currentIdx].value;//If project has changed, initialise to the first subproject found
432435
inFields = updateMerge(inFields, 'catalog', {
433436
value: valC
434437
});
435438
}
436-
//inFields = updateMerge(inFields, 'tableview', {
437-
// selProj: valP,
438-
// selCat: valC
439-
//});
440439

441440
// Reinit the table and catalog value:
442441
const catTable = getCatalogOptions(catmaster, valP, valC).option;
@@ -454,38 +453,12 @@ var userChangeDispatch = function () {
454453
break;
455454

456455
}
457-
let idx = get(inFields, 'cattable.indexClicked', 0);//Get current value
458-
if (fieldKey === 'project'
459-
|| fieldKey === 'catalog') {
460-
idx = 0; // reset to first item of the catalog list
461-
cleanFilterRestrictions(inFields);
462-
inFields = updateMerge(inFields, 'ddform', {
463-
value: 'true'
464-
});
465-
}
466-
467-
const currentIdx = get(inFields, 'cattable.indexClicked', 0);
468-
469-
// User clicked on the table to select a catalog and needs to propagte the index in order
470-
// to get the item highlighted
471-
if (fieldKey === 'cattable') {
472-
idx = catTable.findIndex((e) => {
473-
return e.value === action.payload.value;
474-
});
475-
//reset table/textarea restrictions
476-
if (idx != currentIdx) {
477-
inFields = cleanFilterRestrictions(inFields);
478-
inFields = updateMerge(inFields, 'ddform', {
479-
value: 'true'
480-
});
481-
}
482456

483-
}
484-
const radius = parseFloat(catTable[idx].cat[7]);
485-
const coldef = catTable[idx].cat[9] === 'null' ? catTable[idx].cat[8] : catTable[idx].cat[9];
457+
const radius = parseFloat(catTable[currentIdx].cat[7]);
458+
const coldef = catTable[currentIdx].cat[9] === 'null' ? catTable[currentIdx].cat[8] : catTable[currentIdx].cat[9];
486459
inFields = updateMerge(inFields, 'cattable', {
487-
indexClicked: idx,
488-
value: catTable[idx].value,
460+
indexClicked: currentIdx,
461+
value: catTable[currentIdx].value,
489462
coldef
490463
});
491464
inFields = updateMerge(inFields, 'conesize', {
@@ -499,14 +472,10 @@ var userChangeDispatch = function () {
499472
tbl_id: `${catname}-${shortdd}-dd-table-constraint`
500473
});
501474

502-
const formsel = get(inFields, 'ddform.value', 'true');
503-
inFields = updateMerge(inFields, 'ddform', {
504-
value: formsel
505-
});
506-
507-
//if(fieldKey === 'ddform'){ //clear when changing to a different constraints form
508-
// inFields = cleanFilterRestrictions(inFields);
509-
//}
475+
//const formsel = get(inFields, 'ddform.value', 'true');
476+
//inFields = updateMerge(inFields, 'ddform', {
477+
// value: formsel
478+
//});
510479

511480
break;
512481
case FieldGroupCntlr.CHILD_GROUP_CHANGE:
@@ -620,7 +589,7 @@ class CatalogDDList extends Component {
620589
<div className='catalogpanel'>
621590
<div className='ddselectors'>
622591
<ListBoxInputField fieldKey='project'
623-
wrapperStyle={{margin:'5px 0 5px 0', padding:5}}
592+
wrapperStyle={{padding:5}}
624593
initialState={{
625594
tooltip: 'Select Project',
626595
value: selProject0
@@ -631,7 +600,7 @@ class CatalogDDList extends Component {
631600
label='Select Project:'
632601
/>
633602
<ListBoxInputField fieldKey='catalog'
634-
wrapperStyle={{margin:'5px 0 5px 0', padding:5}}
603+
wrapperStyle={{padding:5}}
635604
initialState={{
636605
tooltip: 'Select Catalog',
637606
value: selCat0
@@ -647,21 +616,21 @@ class CatalogDDList extends Component {
647616
cols={cols}
648617
/>
649618
</div>
650-
<div style={{padding:'10px', margin:'70px 5px 50px 5px', border:'1px solid #a3aeb9'}}>
619+
<div className='spatialsearch'>
651620
<CatalogSearchMethodType groupKey={gkey}/>
652621
</div>
653622
</div>
654623
{/*
655-
<div style={{display:'flex', flexDirection:'row', padding:'20px', border:'1px solid #a3aeb9'}}>
656-
*/}
624+
<div style={{display:'flex', flexDirection:'row', padding:'20px', border:'1px solid #a3aeb9'}}>
625+
*/}
657626
<div className='ddtable'>
658-
<CatalogConstraintsPanel fieldKey={'tableconstraints'}
659-
constraintskey={constraintskey}
660-
catname={catname0}
661-
dd_short={ddform}
662-
groupKey={gkey}
663-
/>
664-
</div>
627+
<CatalogConstraintsPanel fieldKey={'tableconstraints'}
628+
constraintskey={constraintskey}
629+
catname={catname0}
630+
dd_short={ddform}
631+
groupKey={gkey}
632+
/>
633+
</div>
665634
{/*</div>*/}
666635
</div>
667636
);

‎src/firefly/js/visualize/ui/CatalogTableListField.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*right list of table with catalog names to be selected*/
22
.catalogtable {
3-
height: 250px;
3+
height: 200px;
44
width: 375px;
55
overflow: auto;
66
border: 1px solid #a3aeb9;

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export class CatalogTableView extends Component {
5050
return (
5151
<CatalogTableItem
5252
key={index}
53+
indexItem={index}
5354
onClick={onClick}
5455
isClicked={clicked}
5556
cols={cols}
@@ -96,10 +97,11 @@ function getProps(params, fireValueChange) {
9697
}
9798

9899
function handleOnClick(ev, params, fireValueChange) {
99-
100+
const value = ev.currentTarget.value || ev.currentTarget.attributes['value'].value;
101+
const indexClicked = parseInt(ev.currentTarget.attributes['id'].value);
100102
// the value of this input field is a string
101103
fireValueChange({
102-
value: ev.currentTarget.value || ev.currentTarget.attributes['value'].value
104+
value, indexClicked
103105
});
104106
}
105107

@@ -145,15 +147,15 @@ class CatalogTableItem extends Component {
145147
}
146148

147149
render() {
148-
const {itemData, onClick, isClicked, cols} = this.props;
150+
const {itemData, onClick, isClicked, cols, indexItem} = this.props;
149151

150152
const html = '<span class="item-cell-title">' + itemData.cat[2] + '</span></br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + itemMarkupTransform(itemData, cols);
151153
const v = {__html: html};
152154
const color = isClicked ? '#7df26a' : 'white';
153155
const catname = itemData.value;
154156
return (
155157
<tr>
156-
<td title={`Table name: ${catname}`} className="cell" value={itemData.value}
158+
<td title={`Table name: ${catname}`} className="cell" id={indexItem} value={itemData.value}
157159
onClick={(ev) => onClick ? onClick(ev) : null}
158160
style={{backgroundColor: `${color}`}}
159161
dangerouslySetInnerHTML={v}>
@@ -167,6 +169,7 @@ CatalogTableItem.propTypes = {
167169
itemData: PropTypes.object.isRequired,
168170
isClicked: PropTypes.bool.isRequired,
169171
cols: PropTypes.array,
172+
indexItem: PropTypes.number,
170173
onClick: PropTypes.func
171174
};
172175

0 commit comments

Comments
 (0)