This commit is contained in:
Darren Clarke 2023-08-25 07:11:33 +00:00
parent 8f165d15d2
commit c620e4bf25
264 changed files with 9983 additions and 2280 deletions

View file

@ -1,163 +0,0 @@
"use client";
import { FC } from "react";
import { useTranslate } from "react-polyglot";
import Image from "next/legacy/image";
import Link from "next/link";
import { Grid, Container, Box, Button } from "@mui/material";
import { useAppContext } from "app/_components/AppProvider";
import { PageHeader } from "app/_components/PageHeader";
import { AboutFeature } from "./AboutFeature";
import { AboutBox } from "./AboutBox";
import AbstractDiagram from "images/abstract-diagram.png";
import AboutHeader from "images/about-header.png";
import Globe from "images/globe.png";
import Controls from "images/controls.png";
import CommunityBackground from "images/community-background.png";
import Bicycle from "images/bicycle.png";
export const About: FC = () => {
const t = useTranslate();
const {
colors: { white, leafcutterElectricBlue, cdrLinkOrange },
typography: { h1, h4, p },
} = useAppContext();
return (
<>
<PageHeader
backgroundColor={leafcutterElectricBlue}
sx={{
backgroundImage: `url(${AboutHeader.src})`,
backgroundSize: "200px",
backgroundPosition: "bottom right",
backgroundRepeat: "no-repeat",
}}
>
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Grid item xs={9}>
<Box component="h1" sx={h1}>
{t("aboutLeafcutterTitle")}
</Box>
<Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
{t("aboutLeafcutterDescription")}
</Box>
</Grid>
</Grid>
</PageHeader>
<Container maxWidth="lg">
<AboutFeature
title={t("whatIsLeafcutterTitle")}
description={t("whatIsLeafcutterDescription")}
direction="row"
image={AbstractDiagram}
showBackground={false}
textColumns={8}
/>
<AboutFeature
title={t("whatIsItForTitle")}
description={t("whatIsItForDescription")}
direction="row-reverse"
image={Controls}
showBackground
textColumns={8}
/>
<AboutFeature
title={t("whoCanUseItTitle")}
description={t("whoCanUseItDescription")}
direction="row"
image={Globe}
showBackground
textColumns={6}
/>
</Container>
<AboutBox backgroundColor={cdrLinkOrange}>
<Box component="h4" sx={{ ...h4, mt: 0 }}>
{t("whereDataComesFromTitle")}
</Box>
{t("whereDataComesFromDescription")
.split("\n")
.map((line: string, i: number) => (
<Box component="p" key={i} sx={p}>
{line}
</Box>
))}
</AboutBox>
<AboutBox backgroundColor={leafcutterElectricBlue}>
<Box component="h4" sx={{ ...h4, mt: 0 }}>
{t("projectSupportTitle")}
</Box>
{t("projectSupportDescription")
.split("\n")
.map((line: string, i: number) => (
<Box component="p" key={i} sx={p}>
{line}
</Box>
))}
</AboutBox>
<Box
sx={{
backgroundImage: `url(${CommunityBackground.src})`,
backgroundSize: "90%",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
position: "relative",
height: "700px",
}}
>
<Box sx={{ position: "absolute", left: 0, bottom: -20, width: 300 }}>
<Image src={Bicycle} alt="" />
</Box>
<Container
maxWidth="md"
sx={{ textAlign: "center", paddingTop: "280px" }}
>
<Box
component="h4"
sx={{ ...h4, maxWidth: 500, margin: "0 auto", mt: 3 }}
>
{t("interestedInLeafcutterTitle")}
</Box>
{t("interestedInLeafcutterDescription")
.split("\n")
.map((line: string, i: number) => (
<Box
component="p"
key={i}
sx={{ ...p, maxWidth: 500, margin: "0 auto" }}
>
{line}
</Box>
))}
<Link href="mailto:info@digiresilience.org" passHref>
<Button
sx={{
fontSize: 14,
borderRadius: 500,
color: white,
backgroundColor: cdrLinkOrange,
fontWeight: "bold",
textTransform: "uppercase",
pl: 6,
pr: 5,
mt: 4,
":hover": {
backgroundColor: leafcutterElectricBlue,
color: white,
opacity: 0.8,
},
}}
>
{t("contactUs")}
</Button>
</Link>
</Container>
</Box>
</>
);
};

View file

@ -1,35 +0,0 @@
"use client";
import { FC, PropsWithChildren } from "react";
import { Box } from "@mui/material";
import { useAppContext } from "../../../_components/AppProvider";
type AboutBoxProps = PropsWithChildren<{
backgroundColor: string;
}>;
export const AboutBox: FC<AboutBoxProps> = ({
backgroundColor,
children,
}: any) => {
const {
colors: { white },
} = useAppContext();
return (
<Box
sx={{
width: "100%",
backgroundColor,
color: white,
p: 4,
borderRadius: "10px",
mt: "66px",
mb: "22px",
textAlign: "center",
}}
>
{children}
</Box>
);
};

View file

@ -1,68 +0,0 @@
"use client";
import { FC } from "react";
import Image from "next/legacy/image";
import { Grid, Box, GridSize } from "@mui/material";
import AboutDots from "images/about-dots.png";
import { useAppContext } from "app/_components/AppProvider";
interface AboutFeatureProps {
title: string;
description: string;
direction: "row" | "row-reverse";
image: any;
showBackground: boolean;
textColumns: number;
}
export const AboutFeature: FC<AboutFeatureProps> = ({
title,
description,
direction,
image,
showBackground,
textColumns,
}) => {
const {
typography: { h2, p },
} = useAppContext();
return (
<Box
sx={{
p: "20px",
mt: "40px",
backgroundImage: showBackground ? `url(${AboutDots.src})` : "",
backgroundSize: "200px 200px",
backgroundPosition: direction === "row" ? "20% 50%" : "80% 50%",
backgroundRepeat: "no-repeat",
}}
>
<Grid
direction={direction}
container
spacing={5}
alignContent="flex-start"
>
<Grid item xs={textColumns as GridSize}>
<Box component="h2" sx={h2}>
{title}
</Box>
<Box component="p" sx={p}>
{description}
</Box>
</Grid>
<Grid
item
xs={(12 - textColumns) as GridSize}
container
direction={direction}
>
<Box sx={{ width: "150px", mt: "-20px" }}>
<Image src={image} alt="" objectFit="contain" />
</Box>
</Grid>
</Grid>
</Box>
);
};

View file

@ -1,4 +1,4 @@
import { About } from './_components/About';
import { About } from "leafcutter-common";
export default function Page() {
return <About />;

View file

@ -1,64 +0,0 @@
"use client";
import { FC, useEffect } from "react";
import { useTranslate } from "react-polyglot";
import { useRouter, usePathname } from "next/navigation";
import { Box, Grid } from "@mui/material";
import { useCookies } from "react-cookie";
import { useAppContext } from "app/_components/AppProvider";
import { PageHeader } from "app/_components/PageHeader";
import { VisualizationBuilder } from "app/_components/VisualizationBuilder";
type CreateProps = {
templates: any;
};
export const Create: FC<CreateProps> = ({ templates }) => {
const t = useTranslate();
const {
colors: { cdrLinkOrange },
typography: { h1, h4 },
} = useAppContext();
const router = useRouter();
const pathname = usePathname() ?? "";
const cookieName = "searchIntroComplete";
const [cookies, setCookie] = useCookies([cookieName]);
const searchIntroComplete = parseInt(cookies[cookieName], 10) || 0;
useEffect(() => {
if (searchIntroComplete === 0) {
setCookie(cookieName, `${1}`, { path: "/" });
router.push(`${pathname}?group=search&tooltip=1&checklist=1`);
}
}, [searchIntroComplete, router, setCookie]);
return (
<>
<PageHeader backgroundColor={cdrLinkOrange}>
<Grid container direction="row" spacing={2} alignItems="center">
{/* <Grid item xs={2} sx={{ textAlign: "center" }}>
<Image src={SearchCreateHeader} width={100} height={100} alt="" />
</Grid> */}
<Grid container direction="column" item xs={10}>
<Grid item>
<Box component="h1" sx={{ ...h1 }}>
{t("searchAndCreateTitle")}
</Box>
</Grid>
<Grid item>
<Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
{t("searchAndCreateSubtitle")}
</Box>
</Grid>
{/* <Grid>
<Box component="p" sx={{ ...p }}>
{t("searchAndCreateDescription")}
</Box>
</Grid> */}
</Grid>
</Grid>
</PageHeader>
<VisualizationBuilder templates={templates} />
</>
);
};

View file

@ -1,8 +1,10 @@
import { getTemplates } from "app/_lib/opensearch";
import { Create } from "./_components/Create";
import { Create } from "leafcutter-common";
export default async function Page() {
const templates = await getTemplates(100);
return <Create templates={templates} />;
}
export const dynamic = "force-dynamic";

View file

@ -1,102 +0,0 @@
"use client";
import { FC } from "react";
import { useTranslate } from "react-polyglot";
import { Box, Grid } from "@mui/material";
import { PageHeader } from "app/_components/PageHeader";
import { Question } from "app/_components/Question";
import { useAppContext } from "app/_components/AppProvider";
import FaqHeader from "images/faq-header.svg";
export const FAQ: FC = () => {
const t = useTranslate();
const {
colors: { lavender },
typography: { h1, h4, p },
} = useAppContext();
const questions = [
{
question: t("whatIsLeafcutterQuestion"),
answer: t("whatIsLeafcutterAnswer"),
},
{
question: t("whoBuiltLeafcutterQuestion"),
answer: t("whoBuiltLeafcutterAnswer"),
},
{
question: t("whoCanUseLeafcutterQuestion"),
answer: t("whoCanUseLeafcutterAnswer"),
},
{
question: t("whatCanYouDoWithLeafcutterQuestion"),
answer: t("whatCanYouDoWithLeafcutterAnswer"),
},
{
question: t("whereIsTheDataComingFromQuestion"),
answer: t("whereIsTheDataComingFromAnswer"),
},
{
question: t("whereIsTheDataStoredQuestion"),
answer: t("whereIsTheDataStoredAnswer"),
},
{
question: t("howDoWeKeepTheDataSafeQuestion"),
answer: t("howDoWeKeepTheDataSafeAnswer"),
},
{
question: t("howLongDoYouKeepTheDataQuestion"),
answer: t("howLongDoYouKeepTheDataAnswer"),
},
{
question: t("whatOrganizationsAreParticipatingQuestion"),
answer: t("whatOrganizationsAreParticipatingAnswer"),
},
{
question: t("howDidYouGetMyProfileInformationQuestion"),
answer: t("howDidYouGetMyProfileInformationAnswer"),
},
{
question: t("howCanILearnMoreAboutLeafcutterQuestion"),
answer: t("howCanILearnMoreAboutLeafcutterAnswer"),
},
];
return (
<>
<PageHeader
backgroundColor={lavender}
sx={{
backgroundImage: `url(${FaqHeader.src})`,
backgroundSize: "150px",
backgroundPosition: "bottom right",
backgroundRepeat: "no-repeat",
}}
>
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Grid item>
<Box component="h1" sx={{ ...h1 }}>
{t("frequentlyAskedQuestionsTitle")}
</Box>
<Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
{t("frequentlyAskedQuestionsSubtitle")}
</Box>
<Box component="p" sx={{ ...p }}>
{t("frequentlyAskedQuestionsDescription")}
</Box>
</Grid>
</Grid>
</PageHeader>
{questions.map((q: any, index: number) => (
<Question key={index} question={q.question} answer={q.answer} />
))}
</>
);
};

View file

@ -1,4 +1,4 @@
import { FAQ } from "./_components/FAQ";
import { FAQ } from "leafcutter-common";
export default function Page() {
return <FAQ />;

View file

@ -7,16 +7,12 @@ import "@fontsource/roboto/700.css";
import "@fontsource/playfair-display/900.css";
// import getConfig from "next/config";
// import { LicenseInfo } from "@mui/x-data-grid-pro";
import { InternalLayout } from "app/_components/InternalLayout";
import { headers } from 'next/headers'
import { InternalLayout } from "../_components/InternalLayout";
type LayoutProps = {
children: ReactNode;
};
export default function Layout({ children }: LayoutProps) {
const allHeaders = headers();
const embedded = Boolean(allHeaders.get('x-leafcutter-embedded'));
return <InternalLayout embedded={embedded}>{children}</InternalLayout>;
return <InternalLayout embedded={false}>{children}</InternalLayout>;
}

View file

@ -0,0 +1,14 @@
import { getServerSession } from "next-auth";
import { authOptions } from "app/_lib/auth";
import { getUserVisualizations } from "app/_lib/opensearch";
import { Home } from "leafcutter-common";
export default async function Page() {
const session = await getServerSession(authOptions);
const {
user: { email },
}: any = session;
const visualizations = await getUserVisualizations(email ?? "none", 20);
return <Home visualizations={visualizations} />;
}

View file

@ -1,23 +0,0 @@
"use client";
import { FC } from "react";
/* eslint-disable no-underscore-dangle */
import { RawDataViewer } from "app/_components/RawDataViewer";
import { VisualizationDetail } from "app/_components/VisualizationDetail";
interface PreviewProps {
visualization: any;
visualizationType: string;
data: any[];
}
export const Preview: FC<PreviewProps> = ({
visualization,
visualizationType,
data,
}) =>
visualizationType === "rawData" ? (
<RawDataViewer rows={data} height={750} />
) : (
<VisualizationDetail {...visualization} />
);

View file

@ -1,10 +1,10 @@
/* eslint-disable no-underscore-dangle */
// import { Client } from "@opensearch-project/opensearch";
import { Preview } from "./_components/Preview";
import { Preview } from "leafcutter-common";
// import { createVisualization } from "lib/opensearch";
export default function Page() {
return <Preview visualization={undefined} visualizationType={""} data={[]}/>;
return <Preview visualization={undefined} visualizationType={""} data={[]} />;
}
/*

View file

@ -5,7 +5,7 @@ import { useLayoutEffect } from "react";
import { useRouter } from "next/navigation";
import { Grid, CircularProgress } from "@mui/material";
import Iframe from "react-iframe";
import { useAppContext } from "app/_components/AppProvider";
import { useAppContext } from "../../../_components/AppProvider";
export const Setup: FC = () => {
const {
@ -20,6 +20,7 @@ export const Setup: FC = () => {
<Grid
sx={{ width: "100%", height: 700 }}
direction="row"
container
justifyContent="space-around"
alignItems="center"
alignContent="center"

View file

@ -1,6 +1,5 @@
import { Setup } from './_components/Setup';
import { Setup } from "./_components/Setup";
export default function Page() {
return <Setup />;
}

View file

@ -1,72 +0,0 @@
"use client";
import { FC } from "react";
import { Grid, Box } from "@mui/material";
import { useTranslate } from "react-polyglot";
import { PageHeader } from "app/_components/PageHeader";
import { VisualizationCard } from "app/_components/VisualizationCard";
import { useAppContext } from "app/_components/AppProvider";
type TrendsProps = {
visualizations: any;
};
export const Trends: FC<TrendsProps> = ({ visualizations }) => {
const t = useTranslate();
const {
colors: { cdrLinkOrange },
typography: { h1, h4, p },
} = useAppContext();
return (
<>
<PageHeader backgroundColor={cdrLinkOrange}>
<Grid
container
direction="row"
spacing={2}
justifyContent="space-between"
alignItems="center"
>
{/* <Grid item xs={3} sx={{ textAlign: "center" }}>
<Image src={SearchCreateHeader} width={200} height={200} alt="" />
</Grid> */}
<Grid item container direction="column" xs={12}>
<Grid item>
<Box component="h1" sx={{ ...h1 }}>
{t("trendsTitle")}
</Box>
</Grid>
<Grid item>
<Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
{t("trendsSubtitle")}
</Box>
</Grid>
<Grid>
<Box component="p" sx={{ ...p }}>
{t("trendsDescription")}
</Box>
</Grid>
</Grid>
</Grid>
</PageHeader>
<Grid
container
direction="row"
wrap="wrap"
spacing={3}
justifyContent="space-between"
>
{visualizations.map((visualization: any, index: number) => (
<VisualizationCard
key={index}
id={visualization.id}
title={visualization.title}
description={visualization.description}
url={visualization.url}
/>
))}
</Grid>
</>
);
};

View file

@ -1,8 +1,10 @@
import { getTrends } from "app/_lib/opensearch";
import { Trends } from "./_components/Trends";
import { Trends } from "../../../../../packages/leafcutter-common/components/Trends";
export default async function Page() {
const visualizations = await getTrends(25);
return <Trends visualizations={visualizations} />;
}
export const dynamic = "force-dynamic";

View file

@ -1,6 +1,6 @@
/* eslint-disable no-underscore-dangle */
import { Client } from "@opensearch-project/opensearch";
import { VisualizationDetail } from "app/_components/VisualizationDetail";
import { VisualizationDetail } from "leafcutter-common";
const getVisualization = async (visualizationID: string) => {
const node = `https://${process.env.OPENSEARCH_USERNAME}:${process.env.OPENSEARCH_PASSWORD}@${process.env.OPENSEARCH_URL}`;
@ -18,7 +18,7 @@ const getVisualization = async (visualizationID: string) => {
const response = rawResponse.body;
const hits = response.hits.hits.filter(
(hit: any) => hit._id.split(":")[1] === visualizationID[0]
(hit: any) => hit._id.split(":")[1] === visualizationID[0],
);
const hit = hits[0];
const visualization = {