update #5

Author: ijac13

docs/3-view-modified/column-level-lineage.md

@@ -1,6 +1,5 @@
 ---
 title: Column-Level Lineage
-icon: material/file-tree
 ---
 
 Column-Level Lineage provides visibility into the upstream and downstream relationships of a column.
@@ -15,13 +14,13 @@ Common use-cases for column-level lineage are
 
 1. Select a node in the lineage DAG, then click the column you want to view.
 
-    ![alt text](../assets/images/features/cll-1.png){: .shadow}
+    ![alt text](../assets/images/3-view-modified/cll-1.png){: .shadow}
 
 1. The column-level lineage for the selected column will be displayed.
 
-    ![alt text](../assets/images/features/cll-2.png){: .shadow}
+    ![alt text](../assets/images/3-view-modified/cll-2.png){: .shadow}
 
 1. To exit column-level lineage view, click the close button in the upper-left corner.
 
-    ![alt text](../assets/images/features/cll-3.png){: .shadow}
+    ![alt text](../assets/images/3-view-modified/cll-3.png){: .shadow}
 

docs/4-downstream-impacts/breaking-change-analysis.md

@@ -1,6 +1,5 @@
 ---
 title: Breaking Change Analysis
-icon: octicons/diff-modified-24
 ---
 
 **Breaking Change Analysis** examines modified models and categorizes changes into three types:

docs/4-downstream-impacts/impact-radius.md

@@ -1,6 +1,5 @@
 ---
 title: Impact Radius
-icon: material/adjust
 ---
 
 **Impact Radius** helps you analyze changes and identify downstream impacts at the column level.
@@ -10,11 +9,11 @@ While dbt provides a similar capability using the [state selector](https://docs.
 
 === "state:modified+"
 
-    ![Breaking Change Analysis (disabled)](../assets/images/features/impact-radius-legacy.png){: .shadow}
+    ![Breaking Change Analysis (disabled)](../assets/images/4-downstream-impacts/impact-radius-legacy.png){: .shadow}
 
 === "Impact Radius"
 
-    ![Breaking Change Analysis](../assets/images/features/impact-radius.png){: .shadow}
+    ![Breaking Change Analysis](../assets/images/4-downstream-impacts/impact-radius.png){: .shadow}
 
 
 
@@ -24,29 +23,29 @@ While dbt provides a similar capability using the [state selector](https://docs.
 
 1. Click the **Impact Radius** button in the upper-left corner.
 
-    ![Impact Radius button highlighted](../assets/images/features/impact-radius-1.png){: .shadow}
+    ![Impact Radius button highlighted](../assets/images/4-downstream-impacts/impact-radius-1.png){: .shadow}
 
 1. The impact radius will be displayed.
 
-    ![Impact radius displayed on screen](../assets/images/features/impact-radius-2.png){: .shadow}
+    ![Impact radius displayed on screen](../assets/images/4-downstream-impacts/impact-radius-2.png){: .shadow}
 
 1. To exit impact radius view, click the close button in the upper-left corner.
 
-    ![Close button for exiting impact radius view](../assets/images/features/impact-radius-3.png){: .shadow}
+    ![Close button for exiting impact radius view](../assets/images/4-downstream-impacts/impact-radius-3.png){: .shadow}
 
 ### Show impact radius for a single changed model
 
 1. Hover over a changed model, then click the **target icon** or right-click the model and click the **Show Impact Radius**
 
-    ![Target icon for showing impact radius of a single model](../assets/images/features/impact-radius-single-1.png){: .shadow}
+    ![Target icon for showing impact radius of a single model](../assets/images/4-downstream-impacts/impact-radius-single-1.png){: .shadow}
 
 1. The impact radius for this model will be displayed.
 
-    ![Impact radius for a single model displayed on screen](../assets/images/features/impact-radius-single-2.png){: .shadow}
+    ![Impact radius for a single model displayed on screen](../assets/images/4-downstream-impacts/impact-radius-single-2.png){: .shadow}
 
 1. To exit impact radius view, click the close button in the upper-left corner.
 
-    ![Close button for exiting single model impact radius view](../assets/images/features/impact-radius-single-3.png){: .shadow}
+    ![Close button for exiting single model impact radius view](../assets/images/4-downstream-impacts/impact-radius-single-3.png){: .shadow}
 
 
 ## How it works

docs/4-downstream-impacts/metadata-first.md

@@ -1,6 +1,5 @@
 ---
 title: Metadata First
-icon: material/adjust
 ---
 
 # Metadata first apporach

docs/4-downstream-impacts/transformation-types.md

@@ -1,6 +1,5 @@
 ---
 title: Transformation Types
-icon: material/adjust
 ---
 
 # Transformation Types
@@ -71,7 +70,7 @@ select
 from {{ ref("customers") }}
 ```
 
-![alt text](../assets/images/features/cll-example.png){: .shadow}
+![alt text](../assets/images/4-downstream-impacts/cll-example.png){: .shadow}
 
 The following impact is detected:
 

docs/5-data-diffing/histogram-diff.md

@@ -7,7 +7,7 @@ title: Histogram Diff
 Histogram Diff compares the distribution of a numeric column in an overlay histogram chart.
 
 <figure markdown>
-  ![Recce Histogram Diff](../assets/images/features/histogram-diff.png)
+  ![Recce Histogram Diff](../assets/images/5-data-diffing/histogram-diff.png)
   <figcaption>Histogram Diff</figcaption>
 </figure>
 
@@ -29,11 +29,11 @@ A Histogram Diff can be generated in two ways.
 4. Click `Histogram Diff`.
 
 <figure markdown>
-  ![Generate a Recce Histogram Diff ](../assets/images/features/histogram-diff.gif){: .shadow}
+  ![Generate a Recce Histogram Diff ](../assets/images/5-data-diffing/histogram-diff.gif){: .shadow}
   <figcaption>Generate a Recce Histogram Diff from the column options</figcaption>
 </figure>
 
-#### SQL Execution
+## SQL Execution
 
 Histogram Diff generates SQL queries to create distribution histograms for numeric and date columns. The queries use binning strategies to group values and count occurrences in each bin, supporting both integer and floating-point data types.
 

docs/5-data-diffing/profile-diff.md

@@ -17,7 +17,7 @@ Profile Diff generates SQL queries using Jinja templates to calculate statistica
 You can review the exact [SQL templates](https://github.com/DataRecce/recce/blob/main/recce/tasks/profile.py#L14).
 
 <figure markdown>
-  ![Recce Profile Diff](../assets/images/features/profile-diff.png)
+  ![Recce Profile Diff](../assets/images/5-data-diffing/profile-diff.png)
   <figcaption>Profile Diff</figcaption>
 </figure>
 

docs/5-data-diffing/query.md

@@ -1,6 +1,5 @@
 ---
 title: Query
-icon: material/code-block-tags
 ---
 
 Query page provides an AdHoc query interface to run arbitrary query or diff the query result between two environments. If you're a dbt user, you can use any dbt macros that are installed in your project.
@@ -24,15 +23,15 @@ select * from {{ ref("mymodel") }}
 
     If the primary key(s) is specified, the query will occur in the warehouse; otherwise, the query will happen across two environments and the comparison will take place on the client side.
 
-![Recce Query Diff](../assets/images/features/query-diff.png)
+![Recce Query Diff](../assets/images/5-data-diffing/query-diff.png)
 
 !!! tip
 
     In Mac, you can use `⌘ Enter` to run a query or use `⌘ ⇧ Enter` to run a query diff.
 
 ## Query Result
 
-![Recce Query Diff](../assets/images/features/query-diff.gif){: .shadow}
+![Recce Query Diff](../assets/images/5-data-diffing/query-diff.gif){: .shadow}
 
 - **Primary Key:** When comparison occurs on the client side, we can select the primary key by clicking the `key` icon. The primary key columns are used to be identified as the same record for both sides. If no primary key is specified, the records is compared by the row's index.
 - **Pinned Column:** The pinned column would show first in the column list.

docs/5-data-diffing/row-count-diff.md

@@ -11,6 +11,6 @@ Row Count Diff shows the difference in row count between the base and current en
 3. Click `Row Count Diff`.
 
 <figure markdown>
-  ![Recce Row Count Diff - Single model](../assets/images/features/row-count-diff-single.gif){: .shadow}
+  ![Recce Row Count Diff - Single model](../assets/images/5-data-diffing/row-count-diff-single.gif){: .shadow}
   <figcaption>Row Count Diff - Single model</figcaption>
 </figure>

docs/5-data-diffing/topK-diff.md

@@ -7,7 +7,7 @@ title: Top-K Diff
 Top-K Diff compares the distribution of a categorical column. The top 10 elements are shown by default, which can be expanded to the top 50 elements.
 
 <figure markdown>
-  ![Recce Top-K Diff](../assets/images/features/top-k-diff.png)
+  ![Recce Top-K Diff](../assets/images/5-data-diffing/top-k-diff.png)
   <figcaption>Recce Top-K Diff</figcaption>
 </figure>
 
@@ -29,7 +29,7 @@ A Top-K Diff can be generated in two ways.
 4. Click `Top-K Diff`.
 
 <figure markdown>
-  ![Generate a Recce Top-K Diff ](../assets/images/features/top-k-diff.gif){: .shadow}
+  ![Generate a Recce Top-K Diff ](../assets/images/5-data-diffing/top-k-diff.gif){: .shadow}
   <figcaption>Generate a Recce Top-K Diff </figcaption>
 </figure>