diff --git a/src/components/AllSkyMap.tsx b/src/components/AllSkyMap.tsx index 208012a..90d4e26 100644 --- a/src/components/AllSkyMap.tsx +++ b/src/components/AllSkyMap.tsx @@ -32,6 +32,7 @@ interface AllSkyMapProps { title?: string; subtitle?: string; height?: number; + width?: number; } /** @@ -50,6 +51,7 @@ export default function AllSkyMap({ title = 'Sources by position', subtitle = "Click a source's marker to view its light curve", height = 500, + width = 375, }: AllSkyMapProps) { const containerRef = useRef(null); const navigate = useNavigate(); @@ -113,6 +115,7 @@ export default function AllSkyMap({ const layout: Partial = { height, + width, margin: { t: title ? 48 : 24, b: 8, l: 8, r: 8 }, paper_bgcolor: 'transparent', plot_bgcolor: 'transparent', @@ -172,11 +175,7 @@ export default function AllSkyMap({ void el.on('plotly_afterplot', () => setIsDataReady(true)); - const resizeObserver = new ResizeObserver(() => Plotly.Plots.resize(el)); - resizeObserver.observe(el); - return () => { - resizeObserver.disconnect(); Plotly.purge(el); }; }, [ @@ -195,12 +194,10 @@ export default function AllSkyMap({ ]); return ( -
-
-

{title}

-

- {subtitle} -

+
+
+

{title}

+

{subtitle}

({ - width: plotLayout.width, - height: plotLayout.height, + autosize: true, yaxis: { title: { text: 'Flux Density (Jy)', @@ -473,19 +472,9 @@ export function Lightcurve({ return (
{(title || subtitle) && ( -
- {title && ( -

- {title} -

- )} - {subtitle && ( -

- {subtitle} -

- )} +
+ {title &&

{title}

} + {subtitle &&

{subtitle}

}
)} {hideFlaggedObsToggle !== true && ( diff --git a/src/components/LightcurveDataTable.tsx b/src/components/LightcurveDataTable.tsx index 5713f2e..931b3d3 100644 --- a/src/components/LightcurveDataTable.tsx +++ b/src/components/LightcurveDataTable.tsx @@ -56,12 +56,13 @@ export function LightcurveDataTable({ { header: 'ID', accessorFn: (row) => row.id, - size: 325, + size: 310, }, { header: 'Time', accessorKey: 'time', accessorFn: (row) => row.time, + size: 160, sortingFn: (rowA, rowB) => rowA.original.timeParsed - rowB.original.timeParsed, }, @@ -103,7 +104,7 @@ export function LightcurveDataTable({ }, sortingFn: (rowA, rowB) => rowA.original.flux_err - rowB.original.flux_err, - size: 100, + size: 120, }, { header: 'Flags', diff --git a/src/components/Main.tsx b/src/components/Main.tsx index b04987b..fc4359d 100644 --- a/src/components/Main.tsx +++ b/src/components/Main.tsx @@ -63,10 +63,11 @@ export function Main() { name: s.name, sourceId: s.source_id, }))} + width={DEFAULT_HOMEPAGE_PLOT_LAYOUT.width} />
) : ( -
+
)} {initialLoadData?.lightcurveData ? (
diff --git a/src/components/Table.tsx b/src/components/Table.tsx index 64fc3d3..8331514 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -77,7 +77,9 @@ export function Table({ style={ sortable ? { - position: 'relative', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', cursor: header.column.getCanSort() ? 'pointer' : 'cursor', @@ -90,18 +92,13 @@ export function Table({ : undefined } > - {flexRender( - header.column.columnDef.header, - header.getContext() - )} - + + {flexRender( + header.column.columnDef.header, + header.getContext() + )} + + {{ asc: '▲', desc: '▼', diff --git a/src/components/styles/lightcurve.css b/src/components/styles/lightcurve.css index d51677f..1be27be 100644 --- a/src/components/styles/lightcurve.css +++ b/src/components/styles/lightcurve.css @@ -75,12 +75,15 @@ border-radius: 10px; border: 1px solid #c4c8cb; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); - width: fit-content; - min-width: 1280px; padding: 3px; background-color: white; margin-bottom: 1.25em; height: 500px; + width: 1280px; +} + +.source-lightcurve-container { + height: fit-content; } .lightcurve-container { diff --git a/src/components/styles/search-form.css b/src/components/styles/search-form.css index da0c48d..92fa24b 100644 --- a/src/components/styles/search-form.css +++ b/src/components/styles/search-form.css @@ -21,16 +21,18 @@ form { .search-form { display: flex; - font-size: 0.75em; + font-size: 0.7em; gap: 0.5em; align-items: center; background-color: rgb(248, 249, 250); + line-height: 1; } .search-form > label { display: flex; flex-direction: column; font-weight: bold; + gap: 2px; } .search-form > label > span > span { diff --git a/src/components/styles/source-page.css b/src/components/styles/source-page.css index 2b331f3..ef7b25b 100644 --- a/src/components/styles/source-page.css +++ b/src/components/styles/source-page.css @@ -50,17 +50,25 @@ padding: 3px; } -.source-grid-container { - box-sizing: border-box; - display: grid; - grid-template-columns: auto 400px; - gap: 2em; - max-width: 1288px; - border-radius: 10px; +.source-grid-container, +.data-access-container { border: 1px solid #c4c8cb; + border-radius: 10px; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); padding: 1em; background-color: #fff; + width: 1280px; +} + +.source-grid-container { + display: grid; + grid-template-columns: auto 400px; + gap: 2em; +} + +.data-access-container { + margin-top: 1.25em; + overflow-x: auto; } .source-section-h3 { @@ -82,18 +90,6 @@ height: 20px; } -.data-access-container { - box-sizing: border-box; - border: 1px solid #c4c8cb; - border-radius: 10px; - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); - padding: 1em; - background-color: #fff; - margin-top: 1.25em; - max-width: 1288px; - min-width: fit-content; -} - .download-data-container > h3 { margin-bottom: 0.5em; } diff --git a/src/components/styles/table.css b/src/components/styles/table.css index 18504e4..9ca2fa0 100644 --- a/src/components/styles/table.css +++ b/src/components/styles/table.css @@ -64,3 +64,7 @@ tbody > tr:nth-of-type(even) { .pagination-details > span { font-weight: bold; } + +.sort-icon { + font-size: 0.9em; +} diff --git a/src/index.css b/src/index.css index a344001..650e362 100644 --- a/src/index.css +++ b/src/index.css @@ -9,8 +9,13 @@ -moz-osx-font-smoothing: grayscale; } +* { + box-sizing: border-box; +} + html, body { + min-width: 1280px; min-height: 100%; margin: 0; padding: 0; @@ -37,14 +42,25 @@ main { border-radius: 10px; border: 1px solid #c4c8cb; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); - width: fit-content; - min-width: 960px; + width: 960px; padding: 3px; background-color: white; margin-bottom: 1.25em; +} + +.home-lightcurve-placeholder { height: 375px; } +.sources-plot-placeholder { + height: 500px; +} + +.sources-plot-container, +.home-light-curve { + height: fit-content; +} + .home-light-curve { position: relative; } @@ -90,14 +106,6 @@ main { align-self: flex-start; } -.sources-plot-container { - height: fit-content; -} - -.sources-plot-placeholder { - height: 450px; -} - .nav-container, footer { display: flex; @@ -118,3 +126,27 @@ footer { margin-top: 0; font-size: 1.1em; } + +.title-container { + position: absolute; + z-index: 1; +} + +.title-text, +.subtitle-text { + margin: 0; + margin-left: 10px; +} + +.title-text { + font-weight: bold; +} + +.subtitle-text { + font-size: 13px; + color: #888; +} + +.all-sky-wrapper { + position: relative; +}