From 216f8580b3347f8dda6446296692bc2babe37b34 Mon Sep 17 00:00:00 2001 From: mirnawong1 Date: Wed, 10 Jan 2024 18:57:39 +0000 Subject: [PATCH 1/6] add listeners --- website/src/components/detailsToggle/index.js | 56 ++++++++++++------- 1 file changed, 36 insertions(+), 20 deletions(-) diff --git a/website/src/components/detailsToggle/index.js b/website/src/components/detailsToggle/index.js index 076d053846c..5e55bb8a1c5 100644 --- a/website/src/components/detailsToggle/index.js +++ b/website/src/components/detailsToggle/index.js @@ -3,33 +3,49 @@ import styles from './styles.module.css'; function detailsToggle({ children, alt_header = null }) { const [isOn, setOn] = useState(false); - const [hoverActive, setHoverActive] = useState(true); + const [isScrolling, setIsScrolling] = useState(false); // New state to track scrolling const [hoverTimeout, setHoverTimeout] = useState(null); const handleToggleClick = () => { - setHoverActive(true); // Disable hover when clicked setOn(current => !current); // Toggle the current state -}; - -const handleMouseEnter = () => { - if (isOn) return; // Ignore hover if already open - setHoverActive(true); // Enable hover - const timeout = setTimeout(() => { - if (hoverActive) setOn(true); - }, 500); - setHoverTimeout(timeout); -}; - -const handleMouseLeave = () => { - if (!isOn) { + }; + + const handleMouseEnter = () => { + if (isOn || isScrolling) return; // Ignore hover if already open or if scrolling + const timeout = setTimeout(() => { + if (!isScrolling) setOn(true); + }, 550); + setHoverTimeout(timeout); + }; + + const handleMouseLeave = () => { + if (!isOn) { clearTimeout(hoverTimeout); setOn(false); - } -}; + } + }; + + const handleScroll = () => { + setIsScrolling(true); + clearTimeout(hoverTimeout); + setOn(false); + + // Reset scrolling state after a short delay + setTimeout(() => { + setIsScrolling(false); + }, 350); + }; + + useEffect(() => { + window.addEventListener('scroll', handleScroll); + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); -useEffect(() => { - return () => clearTimeout(hoverTimeout); -}, [hoverTimeout]); + useEffect(() => { + return () => clearTimeout(hoverTimeout); + }, [hoverTimeout]); return (
From 52c1dc177b9d9690f1690a23d59b5d7c8eaa57dd Mon Sep 17 00:00:00 2001 From: mirnawong1 Date: Thu, 11 Jan 2024 17:17:08 +0000 Subject: [PATCH 2/6] set 800 miliseconds --- website/src/components/detailsToggle/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/website/src/components/detailsToggle/index.js b/website/src/components/detailsToggle/index.js index 5e55bb8a1c5..a791229151a 100644 --- a/website/src/components/detailsToggle/index.js +++ b/website/src/components/detailsToggle/index.js @@ -14,10 +14,10 @@ function detailsToggle({ children, alt_header = null }) { if (isOn || isScrolling) return; // Ignore hover if already open or if scrolling const timeout = setTimeout(() => { if (!isScrolling) setOn(true); - }, 550); + }, 700); // Change the delay to 9 milliseconds setHoverTimeout(timeout); }; - + const handleMouseLeave = () => { if (!isOn) { clearTimeout(hoverTimeout); @@ -33,7 +33,7 @@ function detailsToggle({ children, alt_header = null }) { // Reset scrolling state after a short delay setTimeout(() => { setIsScrolling(false); - }, 350); + }, 800); }; useEffect(() => { From f552055239f29cc31ca5205099616d2852e19a25 Mon Sep 17 00:00:00 2001 From: mirnawong1 Date: Thu, 11 Jan 2024 17:18:31 +0000 Subject: [PATCH 3/6] remove comment --- website/src/components/detailsToggle/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/src/components/detailsToggle/index.js b/website/src/components/detailsToggle/index.js index a791229151a..d1ee63c8a38 100644 --- a/website/src/components/detailsToggle/index.js +++ b/website/src/components/detailsToggle/index.js @@ -14,7 +14,7 @@ function detailsToggle({ children, alt_header = null }) { if (isOn || isScrolling) return; // Ignore hover if already open or if scrolling const timeout = setTimeout(() => { if (!isScrolling) setOn(true); - }, 700); // Change the delay to 9 milliseconds + }, 700); // setHoverTimeout(timeout); }; @@ -30,7 +30,7 @@ function detailsToggle({ children, alt_header = null }) { clearTimeout(hoverTimeout); setOn(false); - // Reset scrolling state after a short delay + // Reset scrolling state after a delay setTimeout(() => { setIsScrolling(false); }, 800); From 99b1f8e3e9967dde242fbfa95a8457bc7589fb06 Mon Sep 17 00:00:00 2001 From: mirnawong1 Date: Mon, 15 Jan 2024 16:32:37 +0000 Subject: [PATCH 4/6] add css --- .../discovery-use-cases-and-examples.md | 15 ++++++++++----- website/src/css/custom.css | 6 ++++++ 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/website/docs/docs/dbt-cloud-apis/discovery-use-cases-and-examples.md b/website/docs/docs/dbt-cloud-apis/discovery-use-cases-and-examples.md index 8efb1ec0d37..fdfd1111424 100644 --- a/website/docs/docs/dbt-cloud-apis/discovery-use-cases-and-examples.md +++ b/website/docs/docs/dbt-cloud-apis/discovery-use-cases-and-examples.md @@ -7,13 +7,18 @@ With the Discovery API, you can query the metadata in dbt Cloud to learn more ab You can use the API in a variety of ways to get answers to your business questions. Below describes some of the uses of the API and is meant to give you an idea of the questions this API can help you answer. +
+ | Use Case | Outcome | Example Questions | | --- | --- | --- | -| [Performance](#performance) | Identify inefficiencies in pipeline execution to reduce infrastructure costs and improve timeliness. |
  • What’s the latest status of each model?
  • Do I need to run this model?
  • How long did my DAG take to run?
| -| [Quality](#quality) | Monitor data source freshness and test results to resolve issues and drive trust in data. |
  • How fresh are my data sources?
  • Which tests and models failed?
  • What’s my project’s test coverage?
| -| [Discovery](#discovery) | Find and understand relevant datasets and semantic nodes with rich context and metadata. |
  • What do these tables and columns mean?
  • What’s the full data lineage?
  • Which metrics can I query?
| -| [Governance](#governance) | Audit data development and facilitate collaboration within and between teams. |
  • Who is responsible for this model?
  • How do I contact the model’s owner?
  • Who can use this model?
| -| [Development](#development) | Understand dataset changes and usage and gauge impacts to inform project definition. |
  • How is this metric used in BI tools?
  • Which nodes depend on this data source?
  • How has a model changed? What impact?
| +| [Performance](#performance) | Identify inefficiencies in pipeline execution to reduce infrastructure
costs and improve timeliness. |
  • What's the latest status of each model?
  • Do I need to run this model?
  • How long did my DAG take to run?
| +| [Quality](#quality) | Monitor data source freshness and test results to resolve issues
and drive trust in data. |
  • How fresh are my data sources?
  • Which tests and models failed?
  • What's my project's test coverage?
| +| [Discovery](#discovery) | Find and understand relevant datasets and semantic nodes with
rich context and metadata. |
  • What do these tables and columns mean?
  • What's the full data lineage?
  • Which metrics can I query?
| +| [Governance](#governance) | Audit data development and facilitate collaboration within and between teams. |
  • Who is responsible for this model?
  • How do I contact the model's owner?
  • Who can use this model?
| +| [Development](#development) | Understand dataset changes and usage and gauge impacts
to inform project definition. |
  • How is this metric used in BI tools?
  • Which nodes depend on this data source?
  • How has a model changed? What impact?
| + +
+
## Performance diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 094c3501e06..9aab4a57e7a 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -2086,6 +2086,12 @@ h2.anchor.clicked a.hash-link:before { color: #fff; /* Change color on hover if desired */ } +.scroll-table { + max-width: 100%; /* Set the maximum width for the table */ + overflow-x: auto; /* Add a scrollbar if content overflows */ + white-space: nowrap; /* Prevent table cell content from wrapping */ +} + @media (max-width: 996px) { .quickstart-container { flex-direction: column; From 9ccf2b96d43ab128a6ccc2af67586f530d558b0f Mon Sep 17 00:00:00 2001 From: mirnawong1 <89008547+mirnawong1@users.noreply.github.com> Date: Fri, 19 Jan 2024 15:32:30 +0000 Subject: [PATCH 5/6] Update discovery-use-cases-and-examples.md --- .../discovery-use-cases-and-examples.md | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/website/docs/docs/dbt-cloud-apis/discovery-use-cases-and-examples.md b/website/docs/docs/dbt-cloud-apis/discovery-use-cases-and-examples.md index fdfd1111424..8efb1ec0d37 100644 --- a/website/docs/docs/dbt-cloud-apis/discovery-use-cases-and-examples.md +++ b/website/docs/docs/dbt-cloud-apis/discovery-use-cases-and-examples.md @@ -7,18 +7,13 @@ With the Discovery API, you can query the metadata in dbt Cloud to learn more ab You can use the API in a variety of ways to get answers to your business questions. Below describes some of the uses of the API and is meant to give you an idea of the questions this API can help you answer. -
- | Use Case | Outcome | Example Questions | | --- | --- | --- | -| [Performance](#performance) | Identify inefficiencies in pipeline execution to reduce infrastructure
costs and improve timeliness. |
  • What's the latest status of each model?
  • Do I need to run this model?
  • How long did my DAG take to run?
| -| [Quality](#quality) | Monitor data source freshness and test results to resolve issues
and drive trust in data. |
  • How fresh are my data sources?
  • Which tests and models failed?
  • What's my project's test coverage?
| -| [Discovery](#discovery) | Find and understand relevant datasets and semantic nodes with
rich context and metadata. |
  • What do these tables and columns mean?
  • What's the full data lineage?
  • Which metrics can I query?
| -| [Governance](#governance) | Audit data development and facilitate collaboration within and between teams. |
  • Who is responsible for this model?
  • How do I contact the model's owner?
  • Who can use this model?
| -| [Development](#development) | Understand dataset changes and usage and gauge impacts
to inform project definition. |
  • How is this metric used in BI tools?
  • Which nodes depend on this data source?
  • How has a model changed? What impact?
| - -
-
+| [Performance](#performance) | Identify inefficiencies in pipeline execution to reduce infrastructure costs and improve timeliness. |
  • What’s the latest status of each model?
  • Do I need to run this model?
  • How long did my DAG take to run?
| +| [Quality](#quality) | Monitor data source freshness and test results to resolve issues and drive trust in data. |
  • How fresh are my data sources?
  • Which tests and models failed?
  • What’s my project’s test coverage?
| +| [Discovery](#discovery) | Find and understand relevant datasets and semantic nodes with rich context and metadata. |
  • What do these tables and columns mean?
  • What’s the full data lineage?
  • Which metrics can I query?
| +| [Governance](#governance) | Audit data development and facilitate collaboration within and between teams. |
  • Who is responsible for this model?
  • How do I contact the model’s owner?
  • Who can use this model?
| +| [Development](#development) | Understand dataset changes and usage and gauge impacts to inform project definition. |
  • How is this metric used in BI tools?
  • Which nodes depend on this data source?
  • How has a model changed? What impact?
| ## Performance From 74bafe9b5bfbc32cf9373f79869e628a56325cf4 Mon Sep 17 00:00:00 2001 From: mirnawong1 <89008547+mirnawong1@users.noreply.github.com> Date: Fri, 19 Jan 2024 15:33:00 +0000 Subject: [PATCH 6/6] Update custom.css removing --- website/src/css/custom.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 9aab4a57e7a..094c3501e06 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -2086,12 +2086,6 @@ h2.anchor.clicked a.hash-link:before { color: #fff; /* Change color on hover if desired */ } -.scroll-table { - max-width: 100%; /* Set the maximum width for the table */ - overflow-x: auto; /* Add a scrollbar if content overflows */ - white-space: nowrap; /* Prevent table cell content from wrapping */ -} - @media (max-width: 996px) { .quickstart-container { flex-direction: column;