diff --git a/static/js/apps/explore_landing/app.tsx b/static/js/apps/explore_landing/app.tsx
index 817d868666..c4af574927 100644
--- a/static/js/apps/explore_landing/app.tsx
+++ b/static/js/apps/explore_landing/app.tsx
@@ -1,5 +1,5 @@
/**
- * Copyright 2023 Google LLC
+ * Copyright 2024 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -17,101 +17,55 @@
/**
* Main component for DC Explore.
*/
-import React from "react";
-import { Container } from "reactstrap";
+import React, { ReactElement } from "react";
-import { NlSearchBar } from "../../components/nl_search_bar";
-import {
- GA_EVENT_NL_SEARCH,
- GA_PARAM_QUERY,
- GA_PARAM_SOURCE,
- GA_VALUE_SEARCH_SOURCE_EXPLORE_LANDING,
- triggerGAEvent,
-} from "../../shared/ga_events";
-import { Topic, TopicConfig } from "../../shared/topic_config";
-import { TopicQueries } from "../../shared/topic_queries";
-import { Item, ItemList } from "../explore/item_list";
-import allTopics from "./topics.json";
+import { TopicConfig, TopicData } from "../../shared/topic_config";
+import { ExploreIntro } from "./components/explore_intro";
+import { Queries } from "./components/queries";
+import { StatVarQueries } from "./components/stat_var_queries";
+import topicData from "./topics.json";
+
+const topics: TopicData = topicData;
/**
* Application container
*/
-export function App(): JSX.Element {
- const topic = window.location.href.split("/").pop().split("#")[0];
- const currentTopic = allTopics.topics[topic] as TopicConfig;
- const additionalTopics = allTopics.allTopics
- .map((name) => ({
- name,
- title: allTopics.topics[name]?.title,
- }))
- .filter((item) => !item.title || item.name !== topic) as Topic[];
- const subTopicItems: Item[] =
- currentTopic.subTopics?.map((query) => ({
- text: query.title,
- url: `/explore#${query.url || "/"}`,
- })) || [];
+export function App(): ReactElement {
+ const topicSlug = window.location.href.split("/").pop().split("#")[0];
+ const topic = topics.topics[topicSlug] as TopicConfig;
+
+ //const dc = topicSlug === "sdg" ? "sdg" : "";
- let dc = "";
- if (topic === "sdg") {
- dc = "sdg";
- }
if (!topic) {
return (
-
-
-
+
+
+
+
+ );
+};
diff --git a/static/js/apps/explore_landing/components/queries.tsx b/static/js/apps/explore_landing/components/queries.tsx
new file mode 100644
index 0000000000..b5c7d356f5
--- /dev/null
+++ b/static/js/apps/explore_landing/components/queries.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Component for explore landing topic page - query examples displayed as
+ * interlocking bricks.
+ */
+
+import React, { ReactElement } from "react";
+
+import { BrickWall } from "../../../components/content/brick_wall";
+import { Query } from "../../../shared/topic_config";
+import { QueryLink } from "./query_link";
+
+interface TopicQueriesProps {
+ title?: string;
+ appName: string;
+ queries: Query[];
+}
+
+export function Queries({
+ title,
+ queries,
+ appName,
+}: TopicQueriesProps): ReactElement {
+ const generalTopicQueries = queries.map((query) => (
+
+
+ );
+};
diff --git a/static/js/components/content/link_chips.tsx b/static/js/components/content/link_chips.tsx
index fa7a857553..ba658ef91e 100644
--- a/static/js/components/content/link_chips.tsx
+++ b/static/js/components/content/link_chips.tsx
@@ -38,31 +38,36 @@ export interface LinkChip {
}
interface LinkChipsProps {
+ //the variant of the link chip to display: elevated is a raised grey chip and flat is a flat blue chip
+ variant?: "elevated" | "flat";
//the title of the component, displayed as a header above the chips
title?: string;
+ //the section gives location of the chip component in order to give context for the GA event
+ section: string;
//the link
linkChips: LinkChip[];
}
export const LinkChips = ({
+ variant = "elevated",
title,
+ section,
linkChips,
}: LinkChipsProps): ReactElement => {
return (
-
+
- No topics found for {'"'} - {topic} - {'"'} -
-
+
);
}
- const placeholderQuery =
- currentTopic.examples?.general?.length > 0
- ? currentTopic.examples.general[0]
+ /*
+ NOTE: The comments on this page existed as comments in the original template.
+ const placeholderQuery =
+ topic.examples?.general?.length > 0
+ ? topic.examples.general[0]
: { title: "family earnings in california" };
const placeholderHref =
`/explore#${placeholderQuery.url}` ||
- `/explore#q=${encodeURIComponent(placeholderQuery.title)}&dc=${dc}`;
+ `/explore#q=${encodeURIComponent(placeholderQuery.title)}&dc=${dc}`;*/
return (
- + No topics found for {'"'} + {topic} + {'"'} +
-
- {
- triggerGAEvent(GA_EVENT_NL_SEARCH, {
- [GA_PARAM_QUERY]: q,
- [GA_PARAM_SOURCE]: GA_VALUE_SEARCH_SOURCE_EXPLORE_LANDING,
- });
- window.location.href =
- q.toLocaleLowerCase() === placeholderQuery.title.toLowerCase()
- ? placeholderHref
- : `/explore#q=${encodeURIComponent(q)}&dc=${dc}`;
- }}
- placeholder={"Enter a question to explore"}
- initialValue={""}
- shouldAutoFocus={false}
- />
-
-
+ <>
+
-
-
- 
-
-
-
- {currentTopic.title}
-
-
- {topic.title}
++ Our {topic.title.toLocaleLowerCase()} data spans over{" "} + + {formatNumber(topic.meta.variableCount)} + {" "} + statistical variables. We collect our{" "} + {topic.title.toLocaleLowerCase()} information from sources such as:{" "} + {topic.meta.sources.map((s, i) => ( + + {topic.meta.sources.length > 1 && + i === topic.meta.sources.length - 1 + ? "and " + : ""} + {s} + {i === topic.meta.sources.length - 1 ? "" : ", "} + + ))} + {"."} +
+
+
+ );
+};
diff --git a/static/js/components/content/intro_text.tsx b/static/js/components/content/intro_text.tsx
new file mode 100644
index 0000000000..74ab8327d6
--- /dev/null
+++ b/static/js/components/content/intro_text.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * A component to display an introductory text block
+ */
+
+import React, { ReactElement } from "react";
+
+interface IntroTextProps {
+ //the content (text or other content) as a React element
+ children: ReactElement;
+}
+
+export const IntroText = ({ children }: IntroTextProps): ReactElement => {
+ return (
+
+ {title &&
+ {title}
} + {columns.map((column, columnIndex) => ( +
+ {column.map((brick, i) => (
+
+ ))}
+
+ {brick}
+
+ ))}
+ {children}
+
{title &&
{title}
}-
{linkChips.map((linkChip) => (
-
- +
-
{
triggerGAEvent(GA_EVENT_HOMEPAGE_CLICK, {
- [GA_PARAM_ID]: `topic ${linkChip.id}`,
+ [GA_PARAM_ID]: `${section} ${linkChip.id}`,
[GA_PARAM_URL]: linkChip.url,
});
- window.location.href = linkChip.url;
}}
>
diff --git a/static/js/shared/topic_config.ts b/static/js/shared/topic_config.ts
index 2138ae7129..9c8214fc19 100644
--- a/static/js/shared/topic_config.ts
+++ b/static/js/shared/topic_config.ts
@@ -34,6 +34,7 @@ export interface TopicConfig {
examples: {
general: Query[];
comparison: Query[];
+ statvar?: Query[];
};
meta: {
dataPointCount: number;
@@ -41,3 +42,8 @@ export interface TopicConfig {
sources: string[];
};
}
+
+export interface TopicData {
+ allTopics: string[];
+ topics: Record-- ); -} - -interface QueryLinkProps { - query: Query; - appName: string; -} - -function QueryLink(props: QueryLinkProps): JSX.Element { - const { query } = props; - const cliParam = `client=${CLIENT_TYPES.LANDING}`; - let url = `${window.location.origin}/${props.appName}#${cliParam}`; - if (props.appName == "explore") { - if (query.url) { - url += `&${query.url}`; - } else { - url += `&oq=${encodeURIComponent(query.title)}`; - } - } else { - // NL - url += `&q=${encodeURIComponent(query.title)}&a=True`; - } - return {query.title}; -}- {props.currentTopic.examples.general.length > 0 && ( ---- )} - {props.currentTopic.examples.comparison.length > 0 && ( -Some examples to get started:-
-
- {props.currentTopic.examples.general.map((query, i) => (
-
-
-
-
- ))}
-
-- )} -Combine and compare data:--
- {props.currentTopic.examples.comparison.map((query, i) => (
-
-
-
-
- ))}
-
- Our {props.currentTopic.title.toLocaleLowerCase()} data spans over{" "} - - {formatNumber(props.currentTopic.meta.variableCount)} - {" "} - statistical variables. We collect our{" "} - {props.currentTopic.title.toLocaleLowerCase()} information from sources - such as:{" "} - {props.currentTopic.meta.sources.map((s, i) => ( - - {props.currentTopic.meta.sources.length > 1 && - i === props.currentTopic.meta.sources.length - 1 - ? "and " - : ""} - {s} - {i === props.currentTopic.meta.sources.length - 1 ? "" : ", "} - - ))} - {"."} -- -
-