From 43229499ad79d8d645b539770b191521e2750562 Mon Sep 17 00:00:00 2001 From: josiane-silwa <108165656+josiane-silwa@users.noreply.github.com> Date: Tue, 11 Jun 2024 14:17:34 -0300 Subject: [PATCH] 1004 otimizao da pagina de detalhes (#1011) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Alteração no layout do card da página Details do PredictionEvents * Divisão das linhas RA e Dec da página de detalhes * Inclusao de uma classe no card dos itens para controlar layout * Criação de um arquivo de styles para alterar o layout da page de detalhes PredictionsEvents * Correcao no arquivo de styles da pagina de detalhes PredictionsEvents * Correção no layout da pagina de detalhes do PredictionEvents * Ajustes no layout da pagina de detalhes do PredictionEvents * insercao de if usando o parametro breakline * Inclusao do if else para fazer a quebra de linha nos items RA e Dec do layout da pagina de detalhes do PredictionEvents * Inclusao de if/else no index do componente List para quebrar as linha de RA e Dec da página de detalhes PredictionEvents * Exclusao da pagina de styles para a pagina de detalhes * Limpeza de código * style: fix lint --------- Co-authored-by: rcboufleur Co-authored-by: Glauber Costa Vila Verde --- frontend/src/components/List/index.js | 24 +++++++++-- frontend/src/pages/PredictionEvents/Detail.js | 42 +++++++------------ 2 files changed, 34 insertions(+), 32 deletions(-) diff --git a/frontend/src/components/List/index.js b/frontend/src/components/List/index.js index ba706fc4..22162905 100644 --- a/frontend/src/components/List/index.js +++ b/frontend/src/components/List/index.js @@ -3,6 +3,7 @@ import ListItem from '@mui/material/ListItem' import ListItemText from '@mui/material/ListItemText' import Icon from '@mui/material/Icon' import { List as MuiList } from '@mui/material' +import Stack from '@mui/material/Stack' import PropTypes from 'prop-types' import useStyles from './styles' @@ -33,10 +34,25 @@ function List({ data, height, width, align }) { } className={classes.itemText} /> - + {item.breakline === true ? ( + + + + + ) : ( + + + + )} ) })} diff --git a/frontend/src/pages/PredictionEvents/Detail.js b/frontend/src/pages/PredictionEvents/Detail.js index ce474173..382ca378 100644 --- a/frontend/src/pages/PredictionEvents/Detail.js +++ b/frontend/src/pages/PredictionEvents/Detail.js @@ -10,7 +10,6 @@ import List from '../../components/List' import Typography from '@mui/material/Typography' import Link from '@mui/material/Link' import Container from '@mui/material/Container' - import IconButton from '@mui/material/IconButton' import HelpOutlineIcon from '@mui/icons-material/HelpOutline' @@ -62,22 +61,19 @@ function PredictionEventDetail() { }, { title: 'Star position (ICRF)', - // tooltip: 'Right Ascension and Declination with assumed proper motion in ICRF/J2000', - value: `RA ${occultation.ra_star_candidate}, Dec ${occultation.dec_star_candidate}` + value: `RA ${occultation.ra_star_candidate}, Dec ${occultation.dec_star_candidate}`, + breakline: true }, { title: 'Closest approach', - // tooltip: 'Geocentric closest approach', value: `${occultation.closest_approach} (arcsec)` }, { title: 'Position angle', - // tooltip: "Planet's position angle with respect to the star at closest approach", value: `${occultation.position_angle} (deg)` }, { title: 'Velocity', - // tooltip: 'Velocity on the plane of the sky. Positive is prograde, negative is retrograde', value: `${occultation.velocity} (km/s)` }, { @@ -90,12 +86,10 @@ function PredictionEventDetail() { }, { title: 'Star magnitude (Gaia)', - // tooltip: 'Gaia magnitude', value: `${occultation.g_star ? occultation.g_star.toFixed(3) : null}` }, { title: 'H mag (2MASS)', - // tooltip: '2MASS H magnitude', value: `${occultation.h_star ? occultation.h_star.toFixed(3) : null}` }, { @@ -118,26 +112,24 @@ function PredictionEventDetail() { ]) setStar([ - // { - // title: 'Star source ID', - // tooltip: 'Unique source identifier', - // value: `${starObj.source_id}` - // }, { title: 'Stellar catalogue', value: 'Gaia DR3' }, { title: 'Star astrometric position in catalogue (ICRF)', - value: `RA ${starObj.ra ? starObj.ra.toFixed(8) : null}, Dec ${starObj.dec ? starObj.dec.toFixed(7) : null}` + value: `RA ${starObj.ra ? starObj.ra.toFixed(8) : null}, Dec ${starObj.dec ? starObj.dec.toFixed(7) : null}`, + breakline: true }, { title: 'Star astrometric position with proper motion (ICRF)', - value: `RA ${occultation.ra_star_with_pm}, Dec ${occultation.dec_star_with_pm}` + value: `RA ${occultation.ra_star_with_pm}, Dec ${occultation.dec_star_with_pm}`, + breakline: true }, { title: 'Star apparent position (date)', - value: `RA ${occultation.ra_star_to_date}, Dec ${occultation.dec_star_to_date}` + value: `RA ${occultation.ra_star_to_date}, Dec ${occultation.dec_star_to_date}`, + breakline: true }, { title: 'Proper motion', @@ -153,7 +145,8 @@ function PredictionEventDetail() { title: 'Uncertainty in the star position', value: `RA ${starObj.ra_error ? starObj.ra_error.toFixed(1) : null}, Dec ${ starObj.dec_error ? starObj.dec_error.toFixed(1) : null - } (mas)` + } (mas)`, + breakline: true }, { title: 'G magnitude (source: Gaia DR3)', @@ -188,13 +181,9 @@ function PredictionEventDetail() { }, { title: "Object's astrometric position (ICRF)", - value: `RA ${occultation.ra_target}, Dec ${occultation.dec_target}` + value: `RA ${occultation.ra_target}, Dec ${occultation.dec_target}`, + breakline: true }, - // { - // title: "Object's Apparent Position (date)", - // tooltip: "Relative to the Earth's center", - // value: `RA ${occultation.ra_target_apparent}, Dec ${occultation.dec_target_apparent}` - // }, { title: 'Absolute magnitude', value: `${occultation.h ? occultation.h.toFixed(3) : null}` @@ -219,7 +208,8 @@ function PredictionEventDetail() { }, { title: 'Uncertainty in position', - value: `RA ${occultation.e_ra_target}, Dec ${occultation.e_dec_target} (mas)` + value: `RA ${occultation.e_ra_target}, Dec ${occultation.e_dec_target} (mas)`, + breakline: true }, { title: 'Ephemeris', @@ -229,10 +219,6 @@ function PredictionEventDetail() { title: 'Dynamic class (Skybot)', value: `${occultation.dynclass}` }, - // { - // title: 'Dynamic class (Lowell Observatory)', - // value: `${occultation.astorb_dynbaseclass ? occultation.astorb_dynbaseclass : null}` - // }, { title: 'Semi-major axis', value: `${occultation.semimajor_axis ? occultation.semimajor_axis.toFixed(4) : null} (AU)`