Home Page
-
+
+{% endblock %}
diff --git a/server/webdriver/cdc_tests/nl_test.py b/server/webdriver/cdc_tests/nl_test.py
index 0b7bb1a526..b910a0f7f6 100644
--- a/server/webdriver/cdc_tests/nl_test.py
+++ b/server/webdriver/cdc_tests/nl_test.py
@@ -35,4 +35,4 @@ def test_ensure_inline_search_bar_is_displayed(self):
self.assertTrue(
find_elem(self.driver,
by=By.CSS_SELECTOR,
- value='.explore-container .search-bar').is_displayed())
+ value='.explore-container .search-section').is_displayed())
diff --git a/server/webdriver/tests/homepage_test.py b/server/webdriver/tests/homepage_test.py
index af70bd0d6c..a14f6956eb 100644
--- a/server/webdriver/tests/homepage_test.py
+++ b/server/webdriver/tests/homepage_test.py
@@ -115,8 +115,10 @@ def test_homepage_autocomplete_places(self):
search_box_input.send_keys("California")
WebDriverWait(self.driver, self.TIMEOUT_SEC).until(
EC.presence_of_element_located(
- (By.CLASS_NAME, 'search-input-result-section')))
- results = find_elems(self.driver, value='search-input-result-section')
+ (By.CSS_SELECTOR, "[data-testid='search-input-result-section']")))
+ results = find_elems(self.driver,
+ by=By.CSS_SELECTOR,
+ value="[data-testid='search-input-result-section']")
self.assertGreater(len(results), 0)
search_box_input.clear()
@@ -124,10 +126,11 @@ def test_homepage_autocomplete_places(self):
search_box_input.send_keys("Population of Calif")
WebDriverWait(self.driver, self.TIMEOUT_SEC).until(
EC.presence_of_element_located(
- (By.CLASS_NAME, 'search-input-result-section')))
- first_result = find_elem(self.driver,
- by=By.CLASS_NAME,
- value='search-input-result-section')
+ (By.CSS_SELECTOR, "[data-testid='search-input-result-section']")))
+ first_result = find_elem(
+ self.driver,
+ by=By.CSS_SELECTOR,
+ value="[data-testid='search-input-result-section']")
self.assertIn("California", first_result.text)
search_box_input.clear()
@@ -147,9 +150,16 @@ def test_homepage_autocomplete_statvars(self):
# Test autocomplete for stat vars
search_box_input.send_keys("gdp")
- initial_results = find_elems(self.driver,
- value='search-input-result-section')
- self.assertEqual(len(initial_results), 6)
+ # Wait for the results to appear before counting
+ WebDriverWait(self.driver, self.TIMEOUT_SEC).until(
+ EC.presence_of_element_located(
+ (By.CSS_SELECTOR, "[data-testid='search-input-result-section']")))
+ initial_results = find_elems(
+ self.driver,
+ by=By.CSS_SELECTOR,
+ value="[data-testid='search-input-result-section']")
+ # We are now only counting actual search results (and not the load more)
+ self.assertEqual(len(initial_results), 4)
search_box_input.clear()
# Sleeping this way is not ideal.
# However, without it, it does not always clear the search box,
@@ -159,9 +169,16 @@ def test_homepage_autocomplete_statvars(self):
# Test load more stat var results
search_box_input.send_keys("Household Income")
- initial_results = find_elems(self.driver,
- value='search-input-result-section')
- self.assertEqual(len(initial_results), 6)
+ # Wait for the results to appear before counting
+ WebDriverWait(self.driver, self.TIMEOUT_SEC).until(
+ EC.presence_of_element_located(
+ (By.CSS_SELECTOR, "[data-testid='search-input-result-section']")))
+ initial_results = find_elems(
+ self.driver,
+ by=By.CSS_SELECTOR,
+ value="[data-testid='search-input-result-section']")
+ # We are now only counting actual search results (and not the load more)
+ self.assertEqual(len(initial_results), 4)
# Click on the "Load More" button to fetch more results
load_more_button = find_elem(self.driver,
@@ -173,6 +190,12 @@ def test_homepage_autocomplete_statvars(self):
# Wait for new results to load, which means more result sections appear
WebDriverWait(self.driver, self.TIMEOUT_SEC).until(lambda d: len(
- find_elems(d, value='search-input-result-section')) > initial_count)
- final_results = find_elems(self.driver, value='search-input-result-section')
- self.assertGreater(len(final_results), initial_count)
+ find_elems(d,
+ by=By.CSS_SELECTOR,
+ value="[data-testid='search-input-result-section']")) >
+ initial_count)
+ final_results = find_elems(
+ self.driver,
+ by=By.CSS_SELECTOR,
+ value="[data-testid='search-input-result-section']")
+ self.assertGreater(len(final_results), initial_count)
\ No newline at end of file
diff --git a/static/custom_dc/custom/logo.png b/static/custom_dc/custom/logo.png
deleted file mode 100644
index a6d00ee881..0000000000
Binary files a/static/custom_dc/custom/logo.png and /dev/null differ
diff --git a/static/custom_dc/custom/logo.svg b/static/custom_dc/custom/logo.svg
new file mode 100644
index 0000000000..9c5c20b829
--- /dev/null
+++ b/static/custom_dc/custom/logo.svg
@@ -0,0 +1,23 @@
+
\ No newline at end of file
diff --git a/static/js/apps/explore/search_section.tsx b/static/js/apps/explore/search_section.tsx
index 9e1edbc3ad..a1ac58daa7 100644
--- a/static/js/apps/explore/search_section.tsx
+++ b/static/js/apps/explore/search_section.tsx
@@ -55,23 +55,25 @@ export function SearchSection(props: {
);
return (
-
+ {
+ triggerGAEvent(GA_EVENT_NL_SEARCH, {
+ [GA_PARAM_QUERY]: q,
+ [GA_PARAM_SOURCE]: GA_VALUE_PAGE_EXPLORE,
+ });
+ updateHash({
+ [URL_HASH_PARAMS.QUERY]: q,
+ [URL_HASH_PARAMS.PLACE]: "",
+ [URL_HASH_PARAMS.TOPIC]: "",
+ [URL_HASH_PARAMS.CLIENT]: CLIENT_TYPES.QUERY,
+ });
+ }}
+ initialValue={props.query}
+ shouldAutoFocus={false}
+ feedbackLink={DEVELOPER_MODE ? feedbackLink : undefined}
+ />
+
);
}
diff --git a/static/js/apps/homepage/app.tsx b/static/js/apps/homepage/app.tsx
index fbb7617dd8..0659b1a6a5 100644
--- a/static/js/apps/homepage/app.tsx
+++ b/static/js/apps/homepage/app.tsx
@@ -22,6 +22,7 @@ import { ThemeProvider } from "@emotion/react";
import React, { ReactElement } from "react";
import Partners from "../../components/content/partners";
+import { Tools } from "../../components/content/tools";
import { Section } from "../../components/elements/layout/section";
import { Separator } from "../../components/elements/layout/separator";
import { Link } from "../../components/elements/link_chip";
@@ -36,7 +37,6 @@ import theme from "../../theme/theme";
import { BuildYourOwn } from "./components/build_your_own";
import { HomeHero } from "./components/home_hero";
import { SampleQuestions } from "./components/sample_questions";
-import { Tools } from "./components/tools";
import { UnitedNations } from "./components/united_nations";
interface AppProps {
@@ -77,7 +77,16 @@ export function App({
Data Commons tools
++ Data Commons offers data exploration tools and cloud-based APIs to + access and integrate cleaned datasets. +
+- Data Commons tools -
-- Data Commons offers data exploration tools and cloud-based APIs to - access and integrate cleaned datasets. -
-
-
-
- );
-};
diff --git a/static/js/apps/homepage/custom_dc_app.tsx b/static/js/apps/homepage/custom_dc_app.tsx
new file mode 100644
index 0000000000..cd0717e33f
--- /dev/null
+++ b/static/js/apps/homepage/custom_dc_app.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright 2025 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.
+ */
+
+/**
+ * Main component for the homepage.
+ */
+
+/** @jsxImportSource @emotion/react */
+
+import { CSSObject, ThemeProvider } from "@emotion/react";
+import React, { ReactElement } from "react";
+
+import { Search } from "../../components/content/search";
+import { Tools } from "../../components/content/tools";
+import { Section } from "../../components/elements/layout/section";
+import { Routes } from "../../shared/types/base";
+import theme from "../../theme/theme";
+
+interface AppProps {
+ routes: Routes;
+}
+
+/**
+ * Default Custom DC application container
+ */
+export function App({ routes }: AppProps): ReactElement {
+ return (
+ Search Your Data Commons
+Your Data Commons tools
+({ + color: theme.colors.text.tertiary.base, + })} + > + Your Data Commons comes with tools to browse the available datasets +
+.
+ className?: string;
+ // Optional Markdown/JSX shown as an introduction above the search bar.
+ children?: ReactNode;
+}
+
+export function Search({ className, children }: SearchProps): ReactElement {
+ const hasIntro = Children.count(children) > 0;
+
+ return (
+ ;
+ // className for styling / Emotion's styled.
+ className?: string;
+ // whether to include descriptions for each item; defaults to false.
+ showDescriptions?: boolean;
+ // content displayed above the tools is passed in as the children.
+ children?: ReactNode;
+}
+
+// An icon map for all the possible different tools
+const ICONS = {
+ statVarExplorer:
+): ReactElement => (
+
+);
diff --git a/static/js/components/elements/link_icon_box.tsx b/static/js/components/elements/link_icon_box.tsx
index 9c53bf1559..027a440b46 100644
--- a/static/js/components/elements/link_icon_box.tsx
+++ b/static/js/components/elements/link_icon_box.tsx
@@ -49,12 +49,15 @@ interface LinkIconBoxProps {
link: Link;
//the section gives location of the chip component in order to give context for the GA event
section?: string;
+ //an optional description for the link box
+ description?: string;
}
export const LinkIconBox = ({
icon,
link,
section = "",
+ description,
}: LinkIconBoxProps): ReactElement => {
const theme = useTheme();
@@ -103,7 +106,8 @@ export const LinkIconBox = ({
}}
>
{icon}
- {link.title}
+ {link.title && {link.title}}
+ {description && {description}}
);
diff --git a/static/js/components/nl_search_bar/auto_complete_input.tsx b/static/js/components/nl_search_bar/auto_complete_input.tsx
index 7bba38f158..d2b08253f4 100644
--- a/static/js/components/nl_search_bar/auto_complete_input.tsx
+++ b/static/js/components/nl_search_bar/auto_complete_input.tsx
@@ -1,5 +1,5 @@
/**
- * Copyright 2024 Google LLC
+ * Copyright 2025 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,7 +17,10 @@
/**
* Standard version of the auto-complete capable NL Search bar.
*/
+/** @jsxImportSource @emotion/react */
+import { type SerializedStyles, css } from "@emotion/react";
+import styled from "@emotion/styled";
import axios from "axios";
import _ from "lodash";
import React, {
@@ -54,10 +57,12 @@ import {
replaceQueryWithSelection,
stripPatternFromQuery,
} from "../../shared/util";
+import theme from "../../theme/theme";
import {
useInsideClickAlerter,
useOutsideClickAlerter,
} from "../../utils/click_alerter";
+import { Button } from "../elements/button/button";
import { ArrowForward } from "../elements/icons/arrow_forward";
import { Search } from "../elements/icons/search";
import { AutoCompleteSuggestions } from "./auto_complete_suggestions";
@@ -107,6 +112,90 @@ function convertJSONToAutoCompleteResults(
}));
}
+type SearchWrapperProps = {
+ $active: boolean;
+};
+
+const SearchWrapper = styled("div", {
+ shouldForwardProp: (prop) => prop !== "$active",
+}) header {
+ width: 100%;
+ max-width: ${theme.width.sm}px;
+ margin-bottom: ${theme.spacing.xl}px;
+
+ @media (max-width: ${theme.breakpoints.md}px) {
+ max-width: 100%;
+ }
+
+ & > h3 {
+ ${theme.typography.family.heading};
+ ${theme.typography.heading.md};
+ margin-bottom: ${theme.spacing.xl}px;
+ }
+
+ & > p {
+ ${theme.typography.family.text};
+ ${theme.typography.text.lg};
+ }
+ }
+ `}
+ >
+ {hasIntro && {children} }
+ {
+ const localizedUrl = localizeLink(`/explore`);
+ window.location.href = `${localizedUrl}#q=${encodeURIComponent(q)}`;
+ }}
+ initialValue={""}
+ shouldAutoFocus={false}
+ variant="standard"
+ />
+
+ );
+}
diff --git a/static/js/components/content/tools.tsx b/static/js/components/content/tools.tsx
new file mode 100644
index 0000000000..ceb2398ec8
--- /dev/null
+++ b/static/js/components/content/tools.tsx
@@ -0,0 +1,213 @@
+/**
+ * Copyright 2025 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 that renders a list of available tools.
+ */
+
+/** @jsxImportSource @emotion/react */
+
+import { css, useTheme } from "@emotion/react";
+import React, { ReactElement, ReactNode, useMemo } from "react";
+
+import { resolveHref } from "../../apps/base/utilities/utilities";
+import { Download } from "../elements/icons/download";
+import { IntegrationInstructions } from "../elements/icons/integration_instructions";
+import { Public } from "../elements/icons/public";
+import { ScatterPlot } from "../elements/icons/scatter_plot";
+import { Timeline } from "../elements/icons/timeline";
+import { LinkIconBox } from "../elements/link_icon_box";
+
+export type Tool =
+ | "statVarExplorer"
+ | "map"
+ | "scatter"
+ | "timeline"
+ | "download"
+ | "api";
+
+interface ToolsProps {
+ // a list of tools to include; if left undefined, all tools are included.
+ tools?: Tool[];
+ // the routes dictionary - this is used to convert routes to resolved urls.
+ routes: Record header {
+ width: 100%;
+ max-width: ${theme.width.sm}px;
+ margin-bottom: ${theme.spacing.xl}px;
+ @media (max-width: ${theme.breakpoints.md}px) {
+ max-width: 100%;
+ }
+ & > h3 {
+ ${theme.typography.family.heading};
+ ${theme.typography.heading.md};
+ margin-bottom: ${theme.spacing.xl}px;
+ }
+ & > p {
+ ${theme.typography.family.text};
+ ${theme.typography.text.lg};
+ color: ${theme.colors.text.primary.base};
+ }
+ }
+
+ & > .tools {
+ display: flex;
+ align-items: stretch;
+ flex-wrap: wrap;
+ gap: ${theme.spacing.lg}px;
+ margin: 0;
+ padding: 0;
+ }
+
+ & > .tools .link-title {
+ color: ${theme.colors.link.primary.base};
+ }
+ & > .tools .link-description {
+ ${theme.typography.family.text};
+ ${theme.typography.text.sm};
+ color: ${theme.colors.text.primary.base};
+ }
+ `}
+ >
+ {hasChildren && {children} }
+
+ );
+};
diff --git a/static/js/components/elements/button/button.tsx b/static/js/components/elements/button/button.tsx
index ee3e11b6a3..886613e16a 100644
--- a/static/js/components/elements/button/button.tsx
+++ b/static/js/components/elements/button/button.tsx
@@ -117,7 +117,7 @@ interface CommonButtonProps {
// 'flat': a filled, borderless button (fill but no outline).
// 'light': a lighter, subtle button (light color and no border)
// Default: 'standard'
- variant?: "standard" | "inverted" | "text" | "flat" | "light";
+ variant?: "standard" | "inverted" | "text" | "flat" | "light" | "naked";
// The size of the button.
// Default: 'md'
size?: "sm" | "md" | "lg";
@@ -236,6 +236,11 @@ export const Button = forwardRef<
light: css`
${theme.button.variant.light}
`,
+ naked: css`
+ border: 0;
+ background: transparent;
+ padding: 0;
+ `,
};
const isAnchor = "href" in rest && rest.href !== undefined;
diff --git a/static/js/components/elements/icons/location.tsx b/static/js/components/elements/icons/location.tsx
new file mode 100644
index 0000000000..b7006fe836
--- /dev/null
+++ b/static/js/components/elements/icons/location.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright 2025 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.
+ */
+
+/*
+ * Autogenerated by generate_icon.py
+ */
+
+/*
+ * Material Icon: Location City
+ * Source: https://github.com/google/material-design-icons
+ */
+
+import React, { ReactElement } from "react";
+
+export const Location = (
+ props: React.SVGProps
+ {toolList.map((tool) => {
+ return (
+
+
-
+
+
+
+
+
{props.enableAutoComplete && !_.isEmpty(results) && (
+
);
}
diff --git a/static/js/components/nl_search_bar/auto_complete_suggestions.tsx b/static/js/components/nl_search_bar/auto_complete_suggestions.tsx
index 3d5f34f5f3..b75e841e77 100644
--- a/static/js/components/nl_search_bar/auto_complete_suggestions.tsx
+++ b/static/js/components/nl_search_bar/auto_complete_suggestions.tsx
@@ -1,5 +1,5 @@
/**
- * Copyright 2024 Google LLC
+ * Copyright 2025 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,7 +17,9 @@
/**
* Standard version of the suggested results for the auto-complete capable NL Search bar.
*/
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
import React, { ReactElement, useEffect, useState } from "react";
import {
@@ -27,12 +29,101 @@ import {
triggerGAEvent,
} from "../../shared/ga_events";
import { stripPatternFromQuery } from "../../shared/util";
+import theme from "../../theme/theme";
+import { KeyboardArrowDown } from "../elements/icons/keyboard_arrow_down";
+import { Location } from "../elements/icons/location";
import { Search } from "../elements/icons/search";
import { AutoCompleteResult } from "./auto_complete_input";
const INITIAL_VISIBLE_RESULTS = 5;
const RESULTS_TO_LOAD = 20;
+// Styled Components
+
+const AutoCompleteSuggestionsWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ justify-content: center;
+ overflow: hidden;
+ .SuggestionsResults {
+ width: 100%;
+ height: 100%;
+ overflow-y: auto;
+ }
+`;
+
+type SuggestionRowProps = {
+ $hovered: boolean;
+};
+
+const SuggestionRow = styled("div", {
+ shouldForwardProp: (prop) => prop !== "$hovered",
+})
-
- {isHeaderBar && (
-
-
-
+
+
+ handleKeydownEvent(event)}
+ autoComplete="one-time-code"
+ autoFocus={props.shouldAutoFocus}
+ css={searchInputCss(inputActive)}
+ />
+
- {props.allResults
- .slice(0, visibleCount)
- .map((result: AutoCompleteResult, idx: number) => {
- const fullText = result.fullText;
- const parts = fullText.split(result.name);
- return (
-
-
+
+ {props.allResults
+ .slice(0, visibleCount)
+ .map((result: AutoCompleteResult, idx: number) => {
+ const fullText = result.fullText;
+ const parts = fullText.split(result.name);
+ return (
+ props.onClick(result, idx)}
+ $hovered={idx === props.hoveredIdx}
>
-
+
);
}
diff --git a/static/js/components/nl_search_bar/nl_search_bar_header_inline.tsx b/static/js/components/nl_search_bar/nl_search_bar_header_inline.tsx
index ab8ee79854..92b5de3085 100644
--- a/static/js/components/nl_search_bar/nl_search_bar_header_inline.tsx
+++ b/static/js/components/nl_search_bar/nl_search_bar_header_inline.tsx
@@ -18,6 +18,8 @@
* Inline-header version of the NL Search Component - used in Version 2 of the header
*/
+/** @jsxImportSource @emotion/react */
+
import React, { ReactElement, useEffect, useState } from "react";
import {
diff --git a/static/js/components/nl_search_bar/nl_search_bar_standard.tsx b/static/js/components/nl_search_bar/nl_search_bar_standard.tsx
index 105e3c7d83..b8c2611490 100644
--- a/static/js/components/nl_search_bar/nl_search_bar_standard.tsx
+++ b/static/js/components/nl_search_bar/nl_search_bar_standard.tsx
@@ -33,19 +33,16 @@ export function NlSearchBarStandard({
shouldAutoFocus,
}: NlSearchBarImplementationProps): ReactElement {
return (
- props.onClick(result, idx)}
- >
-
- {getIcon(result, props.baseInput)}
-
-
+ )}
+
-
- {parts[0]}
- {result.name}
- {parts.length > 1 && parts[1]}
-
-
+
+ {getIcon(result, props.baseInput)}
+
+ {parts[0]}
+ {result.name}
+ {parts.length > 1 && parts[1]}
+
+
+ );
+ })}
+ {showLoadMore && (
+ {
+ triggerGAEvent(GA_EVENT_AUTOCOMPLETE_LOAD_MORE, {
+ [GA_PARAM_QUERY]: props.baseInput,
+ });
+ setVisibleCount(visibleCount + RESULTS_TO_LOAD);
+ }}
+ >
+
+
- ) : ( - <> - )} -
- );
- })}
- {showLoadMore && (
-
+
- {idx !== props.allResults.slice(0, visibleCount).length - 1 ? (
- - ) : ( - <> - )} -
{
- triggerGAEvent(GA_EVENT_AUTOCOMPLETE_LOAD_MORE, {
- [GA_PARAM_QUERY]: props.baseInput,
- });
- setVisibleCount(visibleCount + RESULTS_TO_LOAD);
- }}
- >
-
- )}
-
-
- expand_more
-
-
-
- Load More
-
+ Load More Results
+
-
-
+