-
Notifications
You must be signed in to change notification settings - Fork 976
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
as part of the epd mentorship, this pr adds a details toggle component so that we can use the following component in the markdown file to add faq-like toggles (alternative to`<details></details>`) and provide users a 'hover' functionality that displays the content within the toggle if you hover over the question/header. this also saves them from clicking the toggle. it does allow enable users to override the hover experience and click on the faq to expand the content. ### react code to test in your local host ``` # Your Markdown Content Some introductory text here... <detailsToggle alt_header="Your Question or Header Here"> This is the content that will be shown or hidden when the detailsToggle component is toggled. You can write your content here, just like in regular Markdown. </detailsToggle> Continuing with more Markdown content... ```
- Loading branch information
Showing
5 changed files
with
174 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,57 @@ | ||
| - **Is the dbt Semantic Layer open source?** | ||
| - The dbt Semantic Layer is proprietary; however, some components of the dbt Semantic Layer are open source, such as dbt-core and MetricFlow. | ||
| <detailsToggle alt_header="Is the dbt Semantic Layer open source?"> | ||
|
|
||
| dbt Cloud Developer or dbt Core users can define metrics in their project, including a local dbt Core project, using the dbt Cloud IDE, dbt Cloud CLI, or dbt Core CLI. However, to experience the universal dbt Semantic Layer and access those metrics using the API or downstream tools, users must be on a dbt Cloud [Team or Enterprise](https://www.getdbt.com/pricing/) plan. | ||
| The dbt Semantic Layer is proprietary; however, some components of the dbt Semantic Layer are open source, such as dbt-core and MetricFlow. | ||
|
|
||
| Refer to [Billing](https://docs.getdbt.com/docs/cloud/billing) for more information. | ||
| dbt Cloud Developer or dbt Core users can define metrics in their project, including a local dbt Core project, using the dbt Cloud IDE, dbt Cloud CLI, or dbt Core CLI. However, to experience the universal dbt Semantic Layer and access those metrics using the API or downstream tools, users must be on a dbt Cloud [Team or Enterprise](https://www.getdbt.com/pricing/) plan. | ||
|
|
||
| - **How can open-source users use the dbt Semantic Layer?** | ||
| - The dbt Semantic Layer requires the use of the dbt Cloud-provided service for coordinating query requests. Open source users who don’t use dbt Cloud can currently work around the lack of a service layer. They can do this by running `mf query --explain` in the command line. This command generates SQL code, which they can then use in their current systems for running and managing queries. | ||
| Refer to <a href="https://docs.getdbt.com/docs/cloud/billing">Billing</a> for more information. | ||
|
|
||
| </detailsToggle> | ||
|
|
||
| <detailsToggle alt_header="How can open-source users use the dbt Semantic Layer?"> | ||
|
|
||
| The dbt Semantic Layer requires the use of the dbt Cloud-provided service for coordinating query requests. Open source users who don’t use dbt Cloud can currently work around the lack of a service layer. They can do this by running `mf query --explain` in the command line. This command generates SQL code, which they can then use in their current systems for running and managing queries. | ||
|
|
||
| As we refine MetricFlow’s API layers, some users may find it easier to set up their own custom service layers for managing query requests. This is not currently recommended, as the API boundaries around MetricFlow are not sufficiently well-defined for broad-based community use | ||
| As we refine MetricFlow’s API layers, some users may find it easier to set up their own custom service layers for managing query requests. This is not currently recommended, as the API boundaries around MetricFlow are not sufficiently well-defined for broad-based community use | ||
|
|
||
| </detailsToggle> | ||
|
|
||
| - **Why is my query limited to 100 rows in the dbt Cloud CLI?** | ||
| - The default `limit` for query issues from the dbt Cloud CLI is 100 rows. We set this default to prevent returning unnecessarily large data sets as the dbt Cloud CLI is typically used to query the dbt Semantic Layer during the development process, not for production reporting or to access large data sets. For most workflows, you only need to return a subset of the data. | ||
| <detailsToggle alt_header="Why is my query limited to 100 rows in the dbt Cloud CLI?"> | ||
|
|
||
| The default `limit` for query issues from the dbt Cloud CLI is 100 rows. We set this default to prevent returning unnecessarily large data sets as the dbt Cloud CLI is typically used to query the dbt Semantic Layer during the development process, not for production reporting or to access large data sets. For most workflows, you only need to return a subset of the data. | ||
|
|
||
| However, you can change this limit if needed by setting the `--limit` option in your query. For example, to return 1000 rows, you can run `dbt sl list metrics --limit 1000`. | ||
| However, you can change this limit if needed by setting the `--limit` option in your query. For example, to return 1000 rows, you can run `dbt sl list metrics --limit 1000`. | ||
|
|
||
| </detailsToggle> | ||
|
|
||
| - **Can I reference MetricFlow queries inside dbt models?** | ||
| - dbt relies on Jinja macros to compile SQL, while MetricFlow is Python-based and does direct SQL rendering targeting at a specific dialect. MetricFlow does not support pass-through rendering of Jinja macros, so we can’t easily reference MetricFlow queries inside of dbt models. | ||
| <detailsToggle alt_header="Can I reference MetricFlow queries inside dbt models?"> | ||
|
|
||
| dbt relies on Jinja macros to compile SQL, while MetricFlow is Python-based and does direct SQL rendering targeting at a specific dialect. MetricFlow does not support pass-through rendering of Jinja macros, so we can’t easily reference MetricFlow queries inside of dbt models. | ||
|
|
||
| Beyond the technical challenges that could be overcome, we see Metrics as the leaf node of your DAG, and a place for users to consume metrics. If you need to do additional transformation on top of a metric, this is usually a sign that there is more modeling that needs to be done. | ||
| Beyond the technical challenges that could be overcome, we see Metrics as the leaf node of your DAG, and a place for users to consume metrics. If you need to do additional transformation on top of a metric, this is usually a sign that there is more modeling that needs to be done. | ||
|
|
||
| </detailsToggle> | ||
|
|
||
| <detailsToggle alt_header="Can I create tables in my data platform using MetricFlow?"> | ||
|
|
||
| You can use the upcoming feature, Exports, which will allow you to create a [pre-defined](/docs/build/saved-queries) MetricFlow query as a table in your data platform. This feature will be available to dbt Cloud customers only. This is because MetricFlow is primarily for query rendering while dispatching the relevant query and performing any DDL is the domain of the service layer on top of MetricFlow. | ||
|
|
||
| </detailsToggle> | ||
|
|
||
| <detailsToggle alt_header="How do I migrate from the legacy Semantic Layer to the new one?"> | ||
|
|
||
| If you're using the legacy Semantic Layer, we highly recommend you [upgrade your dbt version](/docs/dbt-versions/upgrade-core-in-cloud) to dbt v1.6 or higher to use the new dbt Semantic Layer. Refer to the dedicated [migration guide](/guides/sl-migration) for more info. | ||
|
|
||
| </detailsToggle> | ||
|
|
||
| <detailsToggle alt_header="How are you storing my data?*"> | ||
|
|
||
| User data passes through the Semantic Layer on its way back from the warehouse. dbt Labs ensures security by authenticating through the customer's data warehouse. Currently, we don't cache data for the long term, but it might temporarily stay in the system for up to 10 minutes, usually less. In the future, we'll introduce a caching feature that allows us to cache data on our infrastructure for up to 24 hours. | ||
|
|
||
| - **Can I create tables in my data platform using MetricFlow?** | ||
| - You can use the upcoming feature, Exports, which will allow you to create a [pre-defined](/docs/build/saved-queries) MetricFlow query as a table in your data platform. This feature will be available to dbt Cloud customers only. This is because MetricFlow is primarily for query rendering while dispatching the relevant query and performing any DDL is the domain of the service layer on top of MetricFlow. | ||
| </detailsToggle> | ||
|
|
||
| - **How do I migrate from the legacy Semantic Layer to the new one?** | ||
| - If you're using the legacy Semantic Layer, we highly recommend you [upgrade your dbt version](/docs/dbt-versions/upgrade-core-in-cloud) to dbt v1.6 or higher to use the new dbt Semantic Layer. Refer to the dedicated [migration guide](/guides/sl-migration) for more info. | ||
| <detailsToggle alt_header="Is there a dbt Semantic Layer discussion hub?"> | ||
|
|
||
| - **How are you storing my data?** | ||
| - User data passes through the Semantic Layer on its way back from the warehouse. dbt Labs ensures security by authenticating through the customer's data warehouse. Currently, we don't cache data for the long term, but it might temporarily stay in the system for up to 10 minutes, usually less. In the future, we'll introduce a caching feature that allows us to cache data on our infrastructure for up to 24 hours. | ||
| Yes absolutely! Join the [dbt Slack community](https://getdbt.slack.com) and [#dbt-cloud-semantic-layer slack channel](https://getdbt.slack.com/archives/C046L0VTVR6) for all things related to the dbt Semantic Layer. | ||
|
|
||
| - **Is there a dbt Semantic Layer discussion hub?** | ||
| - Yes absolutely! Join the [dbt Slack community](https://getdbt.slack.com) and [#dbt-cloud-semantic-layer slack channel](https://getdbt.slack.com/archives/C046L0VTVR6) for all things related to the dbt Semantic Layer. | ||
| </detailsToggle> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import styles from './styles.module.css'; | ||
|
|
||
| function detailsToggle({ children, alt_header = null }) { | ||
| const [isOn, setOn] = useState(false); | ||
| const [hoverActive, setHoverActive] = useState(true); | ||
| const [hoverTimeout, setHoverTimeout] = useState(null); | ||
|
|
||
| const handleToggleClick = () => { | ||
| setOn(false); | ||
| setHoverActive(isOn); // Toggle hover activation based on current state | ||
| }; | ||
|
|
||
| const handleMouseEnter = () => { | ||
| if (!hoverActive) return; // Ignore hover if disabled | ||
| const timeout = setTimeout(() => { | ||
| setOn(true); | ||
| }, 500); // 500ms delay | ||
| setHoverTimeout(timeout); | ||
| }; | ||
|
|
||
| const handleMouseLeave = () => { | ||
| if (hoverActive && !isOn) { | ||
| clearTimeout(hoverTimeout); | ||
| setOn(false); | ||
| // isOn (false); can't be used here but setOn triggers a re-render | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| return () => clearTimeout(hoverTimeout); | ||
| }, [hoverTimeout]); | ||
|
|
||
| return ( | ||
| <div className='detailsToggle'> | ||
| <span | ||
| className={styles.link} | ||
| onClick={handleToggleClick} | ||
| onMouseEnter={handleMouseEnter} | ||
| onMouseLeave={handleMouseLeave} | ||
| > | ||
| <span className={`${styles.toggle} ${isOn ? null : styles.toggleUpsideDown}`}></span> | ||
| <span>{alt_header}</span> | ||
| {/* Visual disclaimer */} | ||
| <small className={styles.disclaimer}>Hover to view</small> | ||
| </span> | ||
| <div | ||
| style={{ display: isOn ? 'block' : 'none' }} | ||
| className={styles.body} | ||
| > | ||
| {children} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default detailsToggle; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| :local(.link) { | ||
| color: var(--ifm-link-color); | ||
| transition: background-color 0.3s; /* Smooth transition for background color */ | ||
| } | ||
|
|
||
| :local(.link:hover), :local(.link:focus) { | ||
| text-decoration: underline; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| :local(.disclaimer) { | ||
| font-size: 0.8em; | ||
| color: #666; | ||
| margin-left: 10px; /* Adjust as needed */ | ||
| } | ||
|
|
||
| :local(.toggle) { | ||
| background-image: var(--ifm-menu-link-sublist-icon); | ||
| background-size: 1.25rem 1.25rem; | ||
| background-position: center; | ||
| content: ' '; | ||
| display: inline-block; | ||
| height: 1.25rem; | ||
| width: 1.25rem; | ||
| vertical-align: middle; | ||
| transition: transform 0.3s; /* Smooth transition for toggle icon */ | ||
| } | ||
|
|
||
| :local(.toggleUpsideDown) { | ||
| transform: rotateX(180deg) | ||
| } | ||
|
|
||
| /* hack for unswizzled FAQ arrows */ | ||
| :local(html[data-theme='dark'] .toggle) { | ||
| filter: invert(1); | ||
| } | ||
|
|
||
| :local(.body) { | ||
| margin-left: 2em; | ||
| margin-bottom: 10px; | ||
| padding: 20px; | ||
| background-color: #e3f8f8; | ||
| } | ||
|
|
||
| :local(html[data-theme='dark'] .body) { | ||
| background: #333b47; | ||
| } | ||
|
|
||
| :local(.body > p:last-child) { | ||
| margin-bottom: 0px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters