Merge pull request #103 from BU-Spark/bugFixes

ui fixes

frontend/src/components/ArticleCard/ArticleCard.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { DataGrid } from "@mui/x-data-grid";
+import { DataGrid, renderActionsCell } from "@mui/x-data-grid";
 import dayjs from "dayjs";
 
 import Card from "@mui/material/Card";
@@ -30,11 +30,21 @@ const columns = [
         {params.row.title.title}
       </Link>
     ),
+    sortable: false,
   },
   { field: "category", headerName: "Topic", width: 250 },
   { field: "neighborhood", headerName: "Neighborhood", width: 200 },
   { field: "censusTract", headerName: "Census Tract", width: 200 },
-  { field: "publishingDate", headerName: "Publishing Date", width: 120 },
+  { field: "publishingDate", headerName: "Publishing Date", width: 120, type: "date",
+    valueGetter: (params: any) => {
+      const dateParts = params.value
+        .split("/")
+        .map((str: string) => parseInt(str, 10));
+      return new Date(dateParts[2], dateParts[0] - 1, dateParts[1]);
+    },
+    renderCell: (params: any) => dayjs(params.value).format("MMM D, YYYY"),
+
+  },
   // { field: "author", headerName: "Author", width: 130 },
 ];
 
@@ -64,9 +74,9 @@ const ArticleCard: React.FC<ArticleCardProps> = ({ selectBarData, optionalArticl
   selectedArticles.forEach((article, index) => {
     articleRow.push({
       id: uniqid(),
-      title: { link: article.link, title: article.hl1 },
+      title: { title: article.hl1, link: article.link},
       author: `${article.author}`,
-      publishingDate: `${dayjs(article.pub_date).format("MMM D, YYYY")}`,
+      publishingDate: `${dayjs(article.pub_date).format("MM/DD/YYYY")}`,
       neighborhood: `${article.neighborhoods}`,
       censusTract: `${article.tracts}`,
       category: `${article.openai_labels}`,

frontend/src/components/LocationsInfo/LocationsInfo.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Locations } from "../../__generated__/graphql";
+import { Card, CardContent } from '@mui/material';
+
+
+interface LocationInfoProps {
+    location: Locations | null;
+    tract: string;
+}
+
+const LocationInfo: React.FC<LocationInfoProps> = ({ location, tract }) => {
+    if (!location) {
+        return <div>No location selected</div>;
+    }
+
+    return (
+
+        <Card sx={{ width: "100%", height: "62vh" }}> 
+            <CardContent sx={{ width: "100%", height: "62vh"}} >
+                <div>
+                    <div><h2>Location Information</h2></div>
+                    <div><strong>Location Name:</strong> {location.value}</div>
+                    <div><strong>Neighborhood:</strong></div> 
+                    <div><strong>Tract:</strong> {tract}</div>
+                </div>
+            </CardContent>
+        </Card> 
+    );
+};
+
+export default LocationInfo;

frontend/src/components/MapStories/MapStories.tsx

@@ -271,7 +271,7 @@ return (
                         <div>
                             <h2>Cluster Information</h2>
                             <div>
-                                <strong>Location:</strong> <Link to= {`/Locations?location=${encodeURIComponent(modalData?.location)}`}>{modalData?.location}</Link>
+                                <strong>Location:</strong> <Link to= {`/Location?location=${encodeURIComponent(modalData?.location)}`}>{modalData?.location}</Link>
                             </div>
                             <div>
                                 <strong>Neighborhood:</strong> {modalData?.neighborhood}

frontend/src/pages/LocationPage/LocationPage.tsx

@@ -0,0 +1,180 @@
+import React, { useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { LocationContext } from "../../contexts/location_context";
+import MapCard from '../../components/MapCard/MapCard';
+import { useState } from 'react';
+import { Locations } from "../../__generated__/graphql";
+import { LinearProgress, Stack } from '@mui/material';
+import { ArticleContext } from "../../contexts/article_context";
+import { useOrganization, useUser } from "@clerk/clerk-react";
+import { minDate, maxDate } from "../../App";
+import { Article } from '../../__generated__/graphql';
+import ArticleCard from "../../components/ArticleCard/ArticleCard";
+import TopicCount from '../../components/TopicCount/TopicCount';
+import NeighborhoodDemographicsBoard from "../../components/NeighborhoodDemoBoard/NeighborhoodDemoBoard";
+import { TractContext } from "../../contexts/tract_context"; // Import TractContext
+import LocationInfo from '../../components/LocationsInfo/LocationsInfo';
+
+
+const getMostCommonTract = (articles: Article[]) => {
+    const tractCount: { [key: string]: number } = {};
+
+    articles.forEach(article => {
+        article.tracts.forEach(tract => {
+            tractCount[tract] = (tractCount[tract] || 0) + 1;
+        });
+    });
+
+    return Object.keys(tractCount).reduce((a, b) => 
+        tractCount[a] > tractCount[b] ? a : b
+    );
+};
+
+
+const LocationPage: React.FC = () => {
+
+    const { locationsData, queryLocationsData } = React.useContext(LocationContext)!;
+    const { queryTractDataType } = React.useContext(TractContext)!; // Get query function from TractContext
+
+
+
+    const [selectedLocation, setSelectedLocation] = useState<Locations | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [locationArticles, setLocationArticles] = useState<Article[]>([]);
+    const [mostCommonTract, setMostCommonTract] = useState<string>("");
+
+
+    const { articleData,articleData2, queryArticleDataType2 } = React.useContext(ArticleContext)!;
+
+    const { user } = useUser();
+    const { organization } = useOrganization();
+
+
+
+
+
+    const navigate = useNavigate(); // Initialize useNavigate hook
+	const location = useLocation(); // Initialize useLocation hook
+
+    React.useEffect(() => {
+        queryLocationsData();
+        if (organization && !articleData2) {
+            queryArticleDataType2("ARTICLE_DATA", {
+				dateFrom: parseInt(minDate.format("YYYYMMDD")),
+				dateTo: parseInt(maxDate.format("YYYYMMDD")),
+				area: "all",
+				userId: organization.id,
+			});
+        } else if (user && !articleData2) {
+            queryArticleDataType2("ARTICLE_DATA", {
+				dateFrom: parseInt(minDate.format("YYYYMMDD")),
+				dateTo: parseInt(maxDate.format("YYYYMMDD")),
+				area: "all",
+				userId: user?.id,
+			});
+        }
+    }, []);
+
+    React.useEffect(() => {
+        const params = new URLSearchParams(location.search);
+        const locationParam = params.get('location');
+        console.log("param",locationParam)
+        if (locationParam && locationsData) {
+            const foundLocation = locationsData?.find(loc => loc.value === locationParam);
+            if (foundLocation) {
+                setSelectedLocation(foundLocation);
+            }
+        } else if (!selectedLocation && locationsData && locationsData.length > 0) {
+            const sortedLocations = [...locationsData].sort((a, b) => b.articles.length - a.articles.length);
+            setSelectedLocation(sortedLocations[0]);
+            params.set('location', sortedLocations[0].value);
+            navigate({ search: params.toString() });
+        }
+    }, [locationsData]);
+
+    React.useEffect(() => {
+        if (locationsData && selectedLocation && articleData2) {
+            setIsLoading(false);
+            const params = new URLSearchParams(location.search);
+            const locationParam = params.get('location');
+            if (locationParam !== selectedLocation?.value) {
+                console.log("new param set cuz of new location", selectedLocation?.value)
+                params.set('location', selectedLocation?.value as string);
+                navigate({ search: params.toString() }); 
+            }
+            const newLocationArticles = articleData2.filter(article => 
+                selectedLocation.articles.includes(article.content_id)
+            );                
+            setLocationArticles(newLocationArticles);
+            setMostCommonTract(getMostCommonTract(newLocationArticles));
+
+
+    }
+
+
+    },[selectedLocation, articleData2]);
+
+   useEffect(() => {
+    queryTractDataType("TRACT_DATA", {
+        dateFrom: parseInt(minDate.format("YYYYMMDD")),
+        dateTo: parseInt(maxDate.format("YYYYMMDD")),
+        tract: mostCommonTract,
+    });
+   }, [mostCommonTract]);
+
+
+
+
+    return (
+        <>
+			{isLoading ? (
+				<Stack
+					sx={{
+						width: "100%",
+						color: "grey.500",
+						marginTop: "10px",
+					}}
+					spacing={2}
+				>
+					<LinearProgress color='secondary' />
+				</Stack>
+			) : (
+
+                <div className="row justify-content-evenly">
+                    <div className="col-md-5 col-sm-12">
+                        <h1 className="titles">Locations page</h1>
+                        <LocationInfo location={selectedLocation} tract={mostCommonTract} />
+                     </div>
+                    <div className="col-md-7 col-sm-12">
+                         <h1 className="titles">Map</h1>
+                            <MapCard clickable={false} coordinates={selectedLocation?.coordinates as [number, number]} />
+                    </div>
+
+                    {locationArticles.length > 0 && (
+                        <div>
+                            <div className="row justify-content-evenly">
+                                <div className="col-md-5 col-sm-12">
+                                <h1 className="titles"> Topics Count</h1>
+                                    <TopicCount articles={locationArticles} />
+                                </div>
+                                <div className="col-md-7 col-sm-12">
+                                    <h1 className="titles">Demographics</h1>
+                                    <NeighborhoodDemographicsBoard />
+                                </div>
+                            </div>
+                            <h1 className="titles"> Articles</h1>
+                            <ArticleCard optionalArticles={locationArticles} />
+                        </div>
+
+                    )}
+
+                </div>
+
+        )}
+        </>
+
+    );
+}
+
+export default LocationPage;
+

frontend/src/pages/LocationPage/LocationsPage.tsx → frontend/src/pages/LocationsPage/LocationsPage.tsx

@@ -118,7 +118,7 @@ const LocationsPage: React.FC = () => {
 
 
     },[selectedLocation, articleData2]);
-
+    
 
 
 

frontend/src/routes/MainNavigator.tsx

@@ -6,7 +6,8 @@ import TopNavBar from "../components/TopNavBar/TopNavBar";
 import Dashboard from "../pages/DashboardPage/Dashboard";
 import NeighborhoodPage from "../pages/NeighborhoodsPage/NeighborhoodPage"; 
 import StoriesPage from "../pages/StoriesPage/StoriesPage";
-import LocationsPage from "../pages/LocationPage/LocationsPage";
+import LocationsPage from "../pages/LocationsPage/LocationsPage";
+import LocationPage from "../pages/LocationPage/LocationPage";
 
 import TopicsPage from "../pages/TopicsPage/TopicsPage/TopicsPage";
 import TopicsSearchPage from "../pages/TopicsPage/TopicsSearchPage/TopicsSearchPage";
@@ -141,6 +142,10 @@ export default function MainNavigator() {
 			path='/Stories'
 			element={<ProtectedRoute child={<StoriesPage />} />}
 		  />
+		  <Route
+			path='/Location'
+			element={<ProtectedRoute child={<LocationPage />} />}
+		  />
 		  <Route
 			path='/Locations'
 			element={<ProtectedRoute child={<LocationsPage />} />}