{lines.map((line, idx) => (
-
);
@@ -704,50 +764,86 @@ export function ChartVisualization({ columns, rows, yearlyData }) {
nice={chartLayout === "horizontal"}
stroke="white"
interval={0}
- height={chartLayout === "horizontal" ? 30 : 86}
+ height={chartLayout === "horizontal" ? 30 : (tiltLabels ? 128 : 86)}
tickLine={false}
axisLine={{ stroke: "#374151" }}
+ tickFormatter={chartLayout === 'horizontal' ? abbreviateNumber : undefined}
tick={chartLayout === "horizontal" ? { fill: "transparent" } : ({ x, y, payload }) => {
- const maxCharsPerLine = 8;
- const text = payload.value;
- let line1 = text;
- let line2 = "";
- if (text.length > maxCharsPerLine) {
- const splitIndex = text.lastIndexOf(" ", maxCharsPerLine);
- if (splitIndex > 0) {
- line1 = text.slice(0, splitIndex);
- line2 = text.slice(splitIndex + 1);
- } else {
- line1 = text.slice(0, maxCharsPerLine);
- line2 = text.slice(maxCharsPerLine);
+ const text = String(payload.value || "");
+
+ if (tiltLabels) {
+ // Tilted labels - multi-line with rotation
+ const lines = splitTextIntoLines(text, 12);
+
+ // Calculate x-offset based on number of lines
+ const xOffset = lines.length > 1 ? -4 * (lines.length - 1) : 0;
+
+ // Dynamic font size based on number of lines
+ const fontSize = lines.length === 1 ? 8 : lines.length === 2 ? 8 : 7;
+
+ return (
+ {line}
+ {line}
))}
-
+ );
+ }
+
+ if (isYearsError) {
+ return (
+
+
);
}
@@ -182,11 +196,11 @@ export function DatasetView({ data, setExternalDateRange }) {
const firstSelectedYear = selectedYears[0];
return (
-
+
+ {yearsError?.message || "Failed to load available years for this dataset."} +
+
+
{/* dataset info */}
{filteredYears.length > 0 && (
diff --git a/src/pages/DataPage/screens/DataPage.jsx b/src/pages/DataPage/screens/DataPage.jsx
index 59648fd..d333f25 100644
--- a/src/pages/DataPage/screens/DataPage.jsx
+++ b/src/pages/DataPage/screens/DataPage.jsx
@@ -1,7 +1,7 @@
-import { Folder, FileText } from "lucide-react";
+import { AlertCircle, Folder, Loader2, TableProperties } from "lucide-react";
import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams, useLocation } from "react-router-dom";
import { Breadcrumb } from "../components/breadcrumb";
import formatText from "../../../utils/common_functions";
import { DatasetView } from "../components/dataset-view";
@@ -10,99 +10,133 @@ import { useDataCatalog } from "../../../hooks/useDataCatalog";
export default function DataPage({ setExternalDateRange }) {
const [searchParams] = useSearchParams();
const navigate = useNavigate();
+ const location = useLocation();
const [breadcrumbTrail, setBreadcrumbTrail] = useState([]);
const [selectedDataset, setSelectedDataset] = useState(null);
+ const [loadingCardId, setLoadingCardId] = useState(null);
// Decode categoryIds from URL as an array
const categoryIdsParam = searchParams.get("categoryIds") || "";
let categoryIds = [];
if (categoryIdsParam) {
try {
- categoryIds = JSON.parse(decodeURIComponent(categoryIdsParam));
+ // searchParams.get already decodes once. No need for decodeURIComponent.
+ categoryIds = JSON.parse(categoryIdsParam);
if (!Array.isArray(categoryIds)) categoryIds = [categoryIds];
} catch {
categoryIds = [categoryIdsParam];
}
}
- const { data, isLoading } = useDataCatalog(categoryIds);
+ const { data, isLoading, isError, error } = useDataCatalog(categoryIds);
- // Initialize breadcrumb from URL or from first category
+ // Keep reference to previous data while loading
+ const [displayData, setDisplayData] = useState(null);
+
+ // 1. Initialize breadcrumb from URL immediately
useEffect(() => {
const breadcrumbParam = searchParams.get("breadcrumb");
if (breadcrumbParam) {
try {
- const decoded = JSON.parse(decodeURIComponent(breadcrumbParam));
- if (Array.isArray(decoded)) setBreadcrumbTrail(decoded);
+ // searchParams.get already decodes once. No need for decodeURIComponent.
+ const decoded = JSON.parse(breadcrumbParam);
+ if (Array.isArray(decoded)) {
+ setBreadcrumbTrail(decoded);
+ return;
+ }
} catch {
console.warn("Invalid breadcrumb in URL");
}
- } else if (data?.categories?.length && categoryIds.length) {
- const newBreadcrumb = [
+ }
+ }, [searchParams]);
+
+ // 2. Fallback initialization if no breadcrumb exists but data/categoryIds are present
+ useEffect(() => {
+ const breadcrumbParam = searchParams.get("breadcrumb");
+ if (!breadcrumbParam && data?.categories?.length && categoryIds.length) {
+ const initialParams = new URLSearchParams();
+ initialParams.set("categoryIds", JSON.stringify(categoryIds));
+ const initialBreadcrumb = [
{
- label: formatText({ name: data.categories[0].name }) || "Category",
- path: `/datasets?categoryIds=${encodeURIComponent(
- JSON.stringify(categoryIds)
- )}`,
+ label: "Data Catalog",
+ path: `/data?${initialParams.toString()}`,
},
];
- const encodedTrail = encodeURIComponent(JSON.stringify(newBreadcrumb));
- setBreadcrumbTrail(newBreadcrumb);
+ setBreadcrumbTrail(initialBreadcrumb);
+ }
+ }, [data, categoryIds, searchParams]);
- const params = new URLSearchParams(location.search);
- params.set("categoryIds", encodeURIComponent(JSON.stringify(categoryIds)));
- params.set("breadcrumb", encodedTrail);
- navigate(`${location.pathname}?${params.toString()}`);
+ // Update display data only when new data is fully loaded
+ useEffect(() => {
+ if (!isLoading && data) {
+ setDisplayData(data);
+ setLoadingCardId(null);
}
- }, [data, categoryIdsParam]);
+ }, [isLoading, data]);
const handleCategoryClick = (category) => {
+ // Prevent clicking while loading
+ if (isLoading) return;
+
const categoryIdsArray = category.categoryIds; // full array
const categoryName = category.name;
+ const cardId = category.categoryIds.join("-");
if (!breadcrumbTrail.find((b) => b.label === categoryName)) {
+ setLoadingCardId(cardId);
+
+ const breadcrumbParams = new URLSearchParams();
+ breadcrumbParams.set("categoryIds", JSON.stringify(categoryIdsArray));
+
const newBreadcrumb = [
...breadcrumbTrail,
{
label: formatText({ name: categoryName }) || "Category",
- path: `/datasets?categoryIds=${encodeURIComponent(
- JSON.stringify(categoryIdsArray)
- )}`,
+ path: `/data?${breadcrumbParams.toString()}`,
},
];
- const encodedTrail = encodeURIComponent(JSON.stringify(newBreadcrumb));
+ const jsonTrail = JSON.stringify(newBreadcrumb);
setBreadcrumbTrail(newBreadcrumb);
+ setLoadingCardId(cardId);
- const params = new URLSearchParams(location.search);
- params.set("categoryIds", encodeURIComponent(JSON.stringify(categoryIdsArray)));
- params.set("breadcrumb", encodedTrail);
+ const params = new URLSearchParams(window.location.search);
+ params.set("categoryIds", JSON.stringify(categoryIdsArray));
+ params.set("breadcrumb", jsonTrail);
navigate(`${location.pathname}?${params.toString()}`);
}
};
const handleDatasetClick = (dataset) => {
+ // Prevent clicking while loading
+ if (isLoading) return;
+
const datasetName = dataset.name || formatText({ name: dataset.name });
if (!breadcrumbTrail.find((b) => b.label === datasetName)) {
+ setLoadingCardId(datasetName);
+
+ const breadcrumbParams = new URLSearchParams();
+ breadcrumbParams.set("datasetName", datasetName);
+ breadcrumbParams.set("categoryIds", JSON.stringify(categoryIds));
+
const newBreadcrumb = [
...breadcrumbTrail,
{
label: datasetName,
- path: `/datasets?datasetName=${datasetName}&categoryIds=${encodeURIComponent(
- JSON.stringify(categoryIds)
- )}`,
+ path: `/data?${breadcrumbParams.toString()}`,
},
];
- const encodedTrail = encodeURIComponent(JSON.stringify(newBreadcrumb));
+ const jsonTrail = JSON.stringify(newBreadcrumb);
setBreadcrumbTrail(newBreadcrumb);
+ setLoadingCardId(datasetName);
- const params = new URLSearchParams(location.search);
+ const params = new URLSearchParams(window.location.search);
params.set("datasetName", datasetName);
- params.set("categoryIds", encodeURIComponent(JSON.stringify(categoryIds)));
- params.set("breadcrumb", encodedTrail);
+ params.set("categoryIds", JSON.stringify(categoryIds));
+ params.set("breadcrumb", jsonTrail);
navigate(`${location.pathname}?${params.toString()}`);
}
@@ -112,17 +146,21 @@ export default function DataPage({ setExternalDateRange }) {
const handleBreadcrumbClick = (index, item) => {
const url = new URL(item.path, window.location.origin);
const newTrail = breadcrumbTrail.slice(0, index + 1);
- const encodedTrail = encodeURIComponent(JSON.stringify(newTrail));
setBreadcrumbTrail(newTrail);
- const params = new URLSearchParams(location.search);
+ // Clear states when navigating back
+ setSelectedDataset(null);
+ setLoadingCardId(null);
+
+ const params = new URLSearchParams(window.location.search);
const pidParam = url.searchParams.get("categoryIds");
const datasetName = url.searchParams.get("datasetName");
if (pidParam) {
try {
- const decodedPid = JSON.parse(decodeURIComponent(pidParam));
- params.set("categoryIds", encodeURIComponent(JSON.stringify(decodedPid)));
+ // pidParam is already decoded by URLSearchParams.get
+ const decodedPid = JSON.parse(pidParam);
+ params.set("categoryIds", JSON.stringify(decodedPid));
} catch {
params.set("categoryIds", pidParam);
}
@@ -133,7 +171,7 @@ export default function DataPage({ setExternalDateRange }) {
if (datasetName) params.set("datasetName", datasetName);
else params.delete("datasetName");
- params.set("breadcrumb", encodedTrail);
+ params.set("breadcrumb", JSON.stringify(newTrail));
navigate(`${location.pathname}?${params.toString()}`);
};
@@ -146,29 +184,48 @@ export default function DataPage({ setExternalDateRange }) {
setSelectedDatasets={() => setSelectedDataset(null)}
/>
)}
+ {isError && (
+
-
+
@@ -194,7 +208,7 @@ export function DatasetView({ data, setExternalDateRange }) {
{/* year selector */}
{multiYearMode ? (
-
+
{data?.name ?? "Dataset"}
+
{!isPlottable && fetchedDatasets.length > 0 && (
)}
+ {isContentError && (
+ This dataset cannot be visualized. Showing table view only for one year. @@ -254,6 +268,15 @@ export function DatasetView({ data, setExternalDateRange }) {
+
+ )}
+
+ {contentError?.message || "Failed to load dataset content."} +
+
{fetchedDatasets.length > 0 ? (
<>
@@ -271,67 +294,13 @@ export function DatasetView({ data, setExternalDateRange }) {
)}
- {displayOrganizations && (
-
)
)}
+
+ {(displayOrganizations || isOrgError) && (
+
-
- )}
) : (
filteredYears.length === 0 &&
- allAvailableYears.length > 0 && (
+ allAvailableYears.length > 0 && !loadingYear && (
- Published by: - {displayOrganizations.type === 'single' ? ( - // Single organization display - displayOrganizations.data.type === "department" ? ( - - {displayOrganizations.data.name} - - ) : ( - {displayOrganizations.data.name} - ) - ) : ( - // Multiple organizations display - - {displayOrganizations.data.map((org, idx) => ( - - {org.year} - {" "} - {org.type === "department" ? ( - - {org.name} - - ) : ( - {org.name} - )} - - ))} - - )} -
- - See sources - -- No available data yet! But you have data for + No available data yet! You can find data for the following years:
{allAvailableYears.map((year) => (
@@ -345,13 +314,74 @@ export function DatasetView({ data, setExternalDateRange }) {
className="flex text-accent/90 gap-2 cursor-pointer mt-2"
onClick={handleAvailableDatasetView}
>
-
+
+ )}
+
+
+ See sources
+
+
+ Published by:
+ {isOrgError && !displayOrganizations && (
+
+ No publisher found
+
+ )}
+ {displayOrganizations && displayOrganizations.type === 'single' && (
+ displayOrganizations.data.type === "department" ? (
+
+ {displayOrganizations.data.name}
+
+ ) : (
+ {displayOrganizations.data.name}
+ )
+ )}
+
+
+ {displayOrganizations && displayOrganizations.type === 'multiple' && (
+
+ {displayOrganizations.data.map((org) => (
+
+ )}
+
+ {org.year}:
+ {org.type === "department" ? (
+
+ {org.name}
+
+ ) : (
+ {org.name}
+ )}
+
+ ))}
+
+
- {isLoading ? (
- + {error?.message || "An unexpected error occurred while fetching the data."} +
+Loading...
- ) : selectedDataset ? (
+ )}
+
+ {isLoading && !displayData && (
+
+
+ )}
+
+ {selectedDataset ? (
+ Loading Data... +
+Categories
- {data.categories.map((item) => (
+ {displayData.categories.map((item) => (
handleCategoryClick(item)}
- className="cursor-pointer bg-background shadow-2xs relative w-full h-[100px] border border-border rounded-2xl p-4 flex items-center justify-between hover:bg-border/10 transition"
+ className={`bg-background shadow-2xs relative w-full h-[100px] border border-border rounded-2xl p-4 flex items-center justify-between transition ${isLoading
+ ? "opacity-60 cursor-not-allowed"
+ : "cursor-pointer hover:bg-border/10"
+ }`}
>
))}
)}
- {data?.datasets?.length > 0 && (
+ {displayData?.datasets?.length > 0 && (
-
+
+
Datasets
- {data.datasets.map((dataset) => (
+ {displayData.datasets.map((dataset) => (
handleDatasetClick(dataset)}
- className="cursor-pointer shadow-2xs w-full h-[90px] border border-border rounded-xl p-4 flex items-center bg-dataset-card bg-background transition"
+ className={`shadow-2xs w-full h-[90px] border border-border rounded-2xl p-4 flex items-center justify-between bg-dataset-card bg-background transition ${isLoading
+ ? "opacity-60 cursor-not-allowed"
+ : "cursor-pointer"
+ }`}
>
-
+
+
{dataset.name}
@@ -208,7 +271,7 @@ export default function DataPage({ setExternalDateRange }) {
)}
- {data?.categories?.length === 0 && data?.datasets?.length === 0 && (
+ {displayData?.categories?.length === 0 && displayData?.datasets?.length === 0 && (
No categories or datasets found for this level.
diff --git a/src/pages/HomePage/screens/HomePage.jsx b/src/pages/HomePage/screens/HomePage.jsx
index e8b4c2b..ce28c85 100644
--- a/src/pages/HomePage/screens/HomePage.jsx
+++ b/src/pages/HomePage/screens/HomePage.jsx
@@ -195,7 +195,7 @@ export default function HomePage() {
{isExpanded ?
{isExpanded ? (
- OpenGINXplore
+ OpenGINXplore![]({"/openginexplore.ico"})
diff --git a/src/pages/OrganizationPage/components/DepartmentTab.jsx b/src/pages/OrganizationPage/components/DepartmentTab.jsx
index 41a6d91..c5f6840 100644
--- a/src/pages/OrganizationPage/components/DepartmentTab.jsx
+++ b/src/pages/OrganizationPage/components/DepartmentTab.jsx
@@ -295,15 +295,29 @@ const DepartmentTab = ({ selectedDate, ministryId }) => {
History
- {dep.hasData && (
-
- Data
-
- ) }
+ {dep.hasData && (() => {
+ const pathParams = new URLSearchParams();
+ pathParams.set("categoryIds", JSON.stringify([dep.id]));
+
+ const outerParams = new URLSearchParams();
+ outerParams.set("categoryIds", JSON.stringify([dep.id]));
+ outerParams.set("breadcrumb", JSON.stringify([
+ {
+ label: dep.name,
+ path: `/data?${pathParams.toString()}`,
+ },
+ ]));
+
+ return (
+
+ Data
+
+ );
+ })()}
);
diff --git a/src/services/xploredataServices.jsx b/src/services/xploredataServices.jsx
index 8b64448..88f2a01 100644
--- a/src/services/xploredataServices.jsx
+++ b/src/services/xploredataServices.jsx
@@ -3,35 +3,56 @@ import axios from "../lib/axios";
const GI_SERVICE_URL = "/v1/data";
export const getDataCatalog = async ({ categoryIds = [], signal }) => {
- const { data } = await axios.post(
- `${GI_SERVICE_URL}/data-catalog`,
- { categoryIds },
- { signal }
- );
- return data;
+ try {
+ const { data } = await axios.post(
+ `${GI_SERVICE_URL}/data-catalog`,
+ { categoryIds },
+ { signal }
+ );
+ return data;
+ } catch (error) {
+ if (error.name === 'CanceledError') throw error;
+ throw new Error("An unexpected error occurred while fetching the data.");
+ }
};
+
export const getAvailableYearsForDataset = async ({ datasetIds = [], signal }) => {
- const { data } = await axios.post(
- `${GI_SERVICE_URL}/datasets/years`,
- { datasetIds },
- { signal }
- );
- return data;
+ try {
+ const { data } = await axios.post(
+ `${GI_SERVICE_URL}/datasets/years`,
+ { datasetIds },
+ { signal }
+ );
+ return data;
+ } catch (error) {
+ if (error.name === 'CanceledError') throw error;
+ throw new Error("Failed to load available years for the selected dataset.");
+ }
};
export const getDatasetById = async ({ datasetId, signal }) => {
- const { data } = await axios.get(
- `${GI_SERVICE_URL}/datasets/${datasetId}/data`,
- { signal }
- );
- return data;
+ try {
+ const { data } = await axios.get(
+ `${GI_SERVICE_URL}/datasets/${datasetId}/data`,
+ { signal }
+ );
+ return data;
+ } catch (error) {
+ if (error.name === 'CanceledError') throw error;
+ throw new Error("Failed to load dataset content. Please try again later.");
+ }
};
export const getRootOrganization = async ({ datasetId, signal }) => {
- const { data } = await axios.get(
- `${GI_SERVICE_URL}/datasets/${datasetId}/root`,
- { signal }
- );
- return data;
+ try {
+ const { data } = await axios.get(
+ `${GI_SERVICE_URL}/datasets/${datasetId}/root`,
+ { signal }
+ );
+ return data;
+ } catch (error) {
+ if (error.name === 'CanceledError') throw error;
+ throw new Error("Failed to load publisher information.");
+ }
};
-
)}
- {data?.categories?.length === 0 && data?.datasets?.length === 0 && (
+ {displayData?.categories?.length === 0 && displayData?.datasets?.length === 0 && (
+
+
@@ -208,7 +271,7 @@ export default function DataPage({ setExternalDateRange }) {
{dataset.name}
No categories or datasets found for this level.
diff --git a/src/pages/HomePage/screens/HomePage.jsx b/src/pages/HomePage/screens/HomePage.jsx index e8b4c2b..ce28c85 100644 --- a/src/pages/HomePage/screens/HomePage.jsx +++ b/src/pages/HomePage/screens/HomePage.jsx @@ -195,7 +195,7 @@ export default function HomePage() { {isExpanded ?
+
{isExpanded ? (
- OpenGINXplore
+ OpenGINXplore