Skip to content

GH-94 : [UI][STYLES] Update states, redirects and chart visuals #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ChanukaUOJ merged 13 commits into from
Jan 29, 2026
Merged

GH-94 : [UI][STYLES] Update states, redirects and chart visuals #96

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b2c2567
feat: Implement loading state management for data fetching on DataPag…
sehansi-9 Jan 27, 2026
88b339e
feat: Add an option to tilt X-axis labels for improved readability in…
sehansi-9 Jan 27, 2026
b6fb27d
feat: enhance chart visualization with refined X and Y axes label pos…
sehansi-9 Jan 28, 2026
39e29cc
feat: add version badge to application logo
sehansi-9 Jan 28, 2026
3d2b7c7
fix: implement org to data section link from department tab
sehansi-9 Jan 28, 2026
ba44711
refactor: Extract text splitting logic into a reusable helper and sim…
sehansi-9 Jan 28, 2026
3a138b4
fix time range reset bug in data tab
sehansi-9 Jan 28, 2026
5754406
refactor URL parameter construction for data links and breadcrumbs us…
sehansi-9 Jan 28, 2026
05c94fc
feat: Implement error handling and display for data fetching across d…
sehansi-9 Jan 29, 2026
b6cbdb2
fix vulnerabilities via npm audit
sehansi-9 Jan 29, 2026
b1a9703
refactor: Update error message styling, enhance publisher display log…
sehansi-9 Jan 29, 2026
21711d0
improve error message and remove unused eye icon.
sehansi-9 Jan 29, 2026
f2ed040
change scrollbar colors
sehansi-9 Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 5 additions & 12 deletions src/components/version.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,11 @@
import { useEffect, useState } from "react";

export default function Version() {
const [version, setVersion] = useState("");
const version = window?.configs?.version || "";

useEffect(() => {
const version = window?.configs?.version
? window.configs.version
: "rc-1-1";
setVersion(version);
}, []);
if (!version) return null;

return (
<div className="text-center inline-flex items-center space-x-2 bg-blue-900/20 border border-blue-800/30 rounded-full px-4 py-1 text-blue-400 text-sm font-mono mb-4">
<span className="text-xs">{version}</span>
</div>
<sup className="text-[0.4em] ml-1 px-1 py-0.5 rounded bg-accent/10 border border-accent/30 text-accent font-semibold align-super">
{version}
</sup>
);
}
322 changes: 247 additions & 75 deletions src/pages/DataPage/components/chart-visualization.jsx
View file
Open in desktop

Large diffs are not rendered by default.

119 changes: 60 additions & 59 deletions src/pages/DataPage/components/dataset-view.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,27 +174,27 @@ export function DatasetView({ data, setExternalDateRange }) {
if (yearsLoading) {
return (
<div className="flex justify-center mt-10">
<ClipLoader size={30} color={isDark ? "white" : "black"} />
<ClipLoader size={20} color={isDark ? "white" : "black"} />
</div>
);
}

const firstSelectedYear = selectedYears[0];

return (
<div className="p-4 md:p-6 space-y-6 w-full">
<div className="p-4 md:p-6 space-y-3 w-full">
{/* dataset info */}
{filteredYears.length > 0 && (
<div className="space-y-1 mt-2">
<h2 className="text-xl md:text-2xl font-bold text-primary/85">
<h2 className="text-xl md:text-2xl font-semibold text-primary/85">
{data?.name ?? "Dataset"}
</h2>
</div>
)}

{/* year selector */}
{multiYearMode ? (
<div className="w-full space-y-2">
<div className="w-full">
{!isPlottable && fetchedDatasets.length > 0 && (
<p className="text-xs text-yellow-600 dark:text-yellow-400/80 text-right">
This dataset cannot be visualized. Showing table view only for one year.
Expand Down Expand Up @@ -271,64 +271,10 @@ export function DatasetView({ data, setExternalDateRange }) {

</>
)}
{displayOrganizations && (
<div className="mt-4 p-3 bg-muted/50 rounded-md border border-border">
<p className="text-sm text-primary/75">
<span className="font-medium">Published by: </span>
{displayOrganizations.type === 'single' ? (
// Single organization display
displayOrganizations.data.type === "department" ? (
<Link
to={`/department-profile/${displayOrganizations.data.id}`}
state={{
mode: "back",
from: location.pathname + location.search,
}}
className="text-accent hover:underline"
>
{displayOrganizations.data.name}
</Link>
) : (
<span>{displayOrganizations.data.name}</span>
)
) : (
// Multiple organizations display
<span className="block mt-1 space-y-1">
{displayOrganizations.data.map((org, idx) => (
<span key={org.year} className="block">
<span className="font-medium">{org.year}</span> - {" "}
{org.type === "department" ? (
<Link
to={`/department-profile/${org.id}`}
state={{
mode: "back",
from: location.pathname + location.search,
}}
className="text-accent hover:underline"
>
{org.name}
</Link>
) : (
<span>{org.name}</span>
)}
</span>
))}
</span>
)}
</p>
<Link
to={window?.configs?.dataSources ? window.configs.dataSources : "/"}
target="_blank"
className="text-sm text-accent hover:underline mt-3"
>
See sources
</Link>
</div>
)}
</>
) : (
filteredYears.length === 0 &&
allAvailableYears.length > 0 && (
allAvailableYears.length > 0 && !loadingYear && (
<div className="block justify-center items-center">
<p className="text-primary/75 italic text-center">
No available data yet! But you have data for
Expand All @@ -352,6 +298,61 @@ export function DatasetView({ data, setExternalDateRange }) {
</div>
)
)}

{displayOrganizations && (
<div className="mt-4 p-3 bg-muted/50 rounded-md border border-border">
<p className="text-sm text-primary/75">
<span className="font-medium">Published by: </span>
{displayOrganizations.type === 'single' ? (
// Single organization display
displayOrganizations.data.type === "department" ? (
<Link
to={`/department-profile/${displayOrganizations.data.id}`}
state={{
mode: "back",
from: location.pathname + location.search,
}}
className="text-accent hover:underline"
>
{displayOrganizations.data.name}
</Link>
) : (
<span>{displayOrganizations.data.name}</span>
)
) : (
// Multiple organizations display
<span className="block mt-1 space-y-1">
{displayOrganizations.data.map((org, idx) => (
<span key={org.year} className="block">
<span className="font-medium">{org.year}</span> - {" "}
{org.type === "department" ? (
<Link
to={`/department-profile/${org.id}`}
state={{
mode: "back",
from: location.pathname + location.search,
}}
className="text-accent hover:underline"
>
{org.name}
</Link>
) : (
<span>{org.name}</span>
)}
</span>
))}
</span>
)}
</p>
<Link
to={window?.configs?.dataSources ? window.configs.dataSources : "/"}
target="_blank"
className="text-sm text-accent hover:underline mt-3"
>
See sources
</Link>
</div>
)}
</div>
</div>
</div>
Expand Down
Loading