snippets and remaining data visualizations

Author: Blargian

docs/_snippets/_GCS_authentication_and_bucket.md

@@ -6,46 +6,47 @@ import GCS_create_service_account_a from '@site/static/images/integrations/data-
 import GCS_create_service_account_2 from '@site/static/images/integrations/data-ingestion/s3/GCS-create-service-account-2.png';
 import GCS_create_service_account_3 from '@site/static/images/integrations/data-ingestion/s3/GCS-create-service-account-3.png';
 import GCS_guide_key from '@site/static/images/integrations/data-ingestion/s3/GCS-guide-key.png';
+import Image from '@theme/IdealImage';
 
 <details>
     <summary>Create GCS buckets and an HMAC key</summary>
 
 ### ch_bucket_us_east1 {#ch_bucket_us_east1}
 
-<img src={GCS_bucket_1} alt="Creating a GCS bucket in US East 1" />
+<Image size="md" img={GCS_bucket_1} alt="Creating a GCS bucket in US East 1" border />
 
 ### ch_bucket_us_east4 {#ch_bucket_us_east4}
 
-<img src={GCS_bucket_2} alt="Creating a GCS bucket in US East 4" />
+<Image size="md" img={GCS_bucket_2} alt="Creating a GCS bucket in US East 4" border />
 
 ### Generate an Access key {#generate-an-access-key}
 
 ### Create a service account HMAC key and secret {#create-a-service-account-hmac-key-and-secret}
 
 Open **Cloud Storage > Settings > Interoperability** and either choose an existing **Access key**, or **CREATE A KEY FOR A SERVICE ACCOUNT**.  This guide covers the path for creating a new key for a new service account.
 
-<img src={GCS_create_service_account_key} alt="Generating a service account HMAC key in GCS" />
+<Image size="md" img={GCS_create_service_account_key} alt="Generating a service account HMAC key in GCS" border />
 
 ### Add a new service account {#add-a-new-service-account}
 
 If this is a project with no existing service account, **CREATE NEW ACCOUNT**.
 
-<img src={GCS_create_service_account_0} alt="Adding a new service account in GCS" />
+<Image size="md" img={GCS_create_service_account_0} alt="Adding a new service account in GCS" border />
 
 There are three steps to creating the service account, in the first step give the account a meaningful name, ID, and description.
 
-<img src={GCS_create_service_account_a} alt="Defining a new service account name and ID in GCS" />
+<Image size="md" img={GCS_create_service_account_a} alt="Defining a new service account name and ID in GCS" border />
 
 In the Interoperability settings dialog the IAM role **Storage Object Admin** role is recommended; select that role in step two.
 
-<img src={GCS_create_service_account_2} alt="Selecting IAM role Storage Object Admin in GCS" />
+<Image size="md" img={GCS_create_service_account_2} alt="Selecting IAM role Storage Object Admin in GCS" border />
 
 Step three is optional and not used in this guide.  You may allow users to have these privileges based on your policies.
 
-<img src={GCS_create_service_account_3} alt="Configuring additional settings for the new service account in GCS" />
+<Image size="md" img={GCS_create_service_account_3} alt="Configuring additional settings for the new service account in GCS" border />
 
 The service account HMAC key will be displayed.  Save this information, as it will be used in the ClickHouse configuration.
 
-<img src={GCS_guide_key} alt="Retrieving the generated HMAC key for GCS" />
+<Image size="md" img={GCS_guide_key} alt="Retrieving the generated HMAC key for GCS" border />
 
 </details>

docs/_snippets/_S3_authentication_and_bucket.md

@@ -1,3 +1,4 @@
+import Image from '@theme/IdealImage';
 import s3_1 from '@site/static/images/_snippets/s3/s3-1.png';
 import s3_2 from '@site/static/images/_snippets/s3/s3-2.png';
 import s3_3 from '@site/static/images/_snippets/s3/s3-3.png';
@@ -27,85 +28,85 @@ In this procedure, we'll be creating a service account user, not a login user.
 
 2. In "users", select **Add users**
 
-<img src={s3_1} alt="create_iam_user_0"/>
+<Image size="md" img={s3_1} alt="AWS IAM Management Console - Adding a new user" border />
 
 3. Enter the user name and set the credential type to **Access key - Programmatic access** and select **Next: Permissions**
 
-<img src={s3_2} alt="create_iam_user_1"/>
+<Image size="md" img={s3_2} alt="Setting user name and access type for IAM user" border />
 
 4. Do not add the user to any group; select **Next: Tags**
 
-<img src={s3_3} alt="create_iam_user_2"/>
+<Image size="md" img={s3_3} alt="Skipping group assignment for IAM user" border />
 
 5. Unless you need to add any tags, select **Next: Review**
 
-<img src={s3_4} alt="create_iam_user_3"/>
+<Image size="md" img={s3_4} alt="Skipping tag assignment for IAM user" border />
 
 6. Select **Create User**
 
     :::note
     The warning message stating that the user has no permissions can be ignored; permissions will be granted on the bucket for the user in the next section
     :::
 
-<img src={s3_5} alt="create_iam_user_4"/>
+<Image size="md" img={s3_5} alt="Creating the IAM user with no permissions warning" border />
 
 7. The user is now created; click on **show** and copy the access and secret keys.
 :::note
 Save the keys somewhere else; this is the only time that the secret access key will be available.
 :::
 
-<img src={s3_6} alt="create_iam_user_5"/>
+<Image size="md" img={s3_6} alt="Viewing and copying the IAM user access keys" border />
 
 8. Click close, then find the user in the users screen.
 
-<img src={s3_7} alt="create_iam_user_6"/>
+<Image size="md" img={s3_7} alt="Finding the newly created IAM user in the users list" border />
 
 9. Copy the ARN (Amazon Resource Name) and save it for use when configuring the access policy for the bucket.
 
-<img src={s3_8} alt="create_iam_user_7"/>
+<Image size="md" img={s3_8} alt="Copying the ARN of the IAM user" border />
 
 ### Create an S3 bucket {#create-an-s3-bucket}
 1. In the S3 bucket section, select **Create bucket**
 
-<img src={s3_9} alt="create_s3_bucket_0"/>
+<Image size="md" img={s3_9} alt="Starting the S3 bucket creation process" border />
 
 2. Enter a bucket name, leave other options default
 :::note
 The bucket name must be unique across AWS, not just the organization, or it will emit an error.
 :::
 3. Leave `Block all Public Access` enabled; public access is not needed.
 
-<img src={s3_a} alt="create_s3_bucket_2"/>
+<Image size="md" img={s3_a} alt="Configuring the S3 bucket settings with public access blocked" border />
 
 4. Select **Create Bucket** at the bottom of the page
 
-<img src={s3_b} alt="create_s3_bucket_3"/>
+<Image size="md" img={s3_b} alt="Finalizing S3 bucket creation" border />
 
 5. Select the link, copy the ARN, and save it for use when configuring the access policy for the bucket.
 
 6. Once the bucket has been created, find the new S3 bucket in the S3 buckets list and select the link
 
-<img src={s3_c} alt="create_s3_bucket_4"/>
+<Image size="md" img={s3_c} alt="Finding the newly created S3 bucket in the buckets list" border />
 
 7. Select **Create folder**
 
-<img src={s3_d} alt="create_s3_bucket_5"/>
+<Image size="md" img={s3_d} alt="Creating a new folder in the S3 bucket" border />
 
 8. Enter a folder name that will be the target for the ClickHouse S3 disk and select **Create folder**
 
-<img src={s3_e} alt="create_s3_bucket_6"/>
+<Image size="md" img={s3_e} alt="Setting the folder name for ClickHouse S3 disk usage" border />
 
 9. The folder should now be visible on the bucket list
 
-<img src={s3_f} alt="create_s3_bucket_7"/>
+<Image size="md" img={s3_f} alt="Viewing the newly created folder in the S3 bucket" border />
 
 10. Select the checkbox for the new folder and click on **Copy URL** Save the URL copied to be used in the ClickHouse storage configuration in the next section.
 
-<img src={s3_g} alt="create_s3_bucket_8"/>
+<Image size="md" img={s3_g} alt="Copying the S3 folder URL for ClickHouse configuration" border />
 
 11. Select the **Permissions** tab and click on the **Edit** button in the **Bucket Policy** section
 
-<img src={s3_h} alt="create_s3_bucket_9"/>
+<Image size="md" img={s3_h} alt="Accessing the S3 bucket policy configuration" border />
 
 12. Add a bucket policy, example below:
 ```json

docs/_snippets/_add_remote_ip_access_list_detail.md

@@ -1,3 +1,4 @@
+import Image from '@theme/IdealImage';
 import ip_allow_list_check_list from '@site/static/images/_snippets/ip-allow-list-check-list.png';
 import ip_allow_list_add_current_ip from '@site/static/images/_snippets/ip-allow-list-add-current-ip.png';
 
@@ -6,10 +7,10 @@ import ip_allow_list_add_current_ip from '@site/static/images/_snippets/ip-allow
 
 From your ClickHouse Cloud services list choose the service that you will work with and switch to **Settings**.  If the IP Access List does not contain the IP Address or range of the remote system that needs to connect to your ClickHouse Cloud service, then you can resolve the problem with **Add IPs**:
 
-<img src={ip_allow_list_check_list} class="image" alt="Check to see if the service allows traffic" />
+<Image size="md" img={ip_allow_list_check_list} alt="Check to see if the service allows traffic from your IP address in the IP Access List" border />
 
 Add the individual IP Address, or the range of addresses that need to connect to your ClickHouse Cloud service. Modify the form as you see fit and then **Save**.
 
-<img src={ip_allow_list_add_current_ip} class="image" alt="Add your current IP address" />
+<Image size="md" img={ip_allow_list_add_current_ip} alt="Add your current IP address to the IP Access List in ClickHouse Cloud" border />
 
 </details>

docs/_snippets/_clickhouse_mysql_cloud_setup.mdx

@@ -3,43 +3,38 @@ import mysql_2 from '@site/static/images/_snippets/mysql2.png';
 import mysql_3 from '@site/static/images/_snippets/mysql3.png';
 import mysql_4 from '@site/static/images/_snippets/mysql4.png';
 import mysql_5 from '@site/static/images/_snippets/mysql5.png';
+import Image from '@theme/IdealImage';
 
 <br/>
 1. After creating your ClickHouse Cloud Service, on the `Connect your app` screen, select MySQL from the drop down.
 <br/>
 
-<div class="eighty-percent">
-    <img src={mysql_1} class="image" alt="Credentials screen - Prompt" />
-</div>
+<Image size="md" img={mysql_1} alt="ClickHouse Cloud credentials screen showing MySQL interface selection dropdown" border />
 
 
 2. Toggle the switch to enable the MySQL interface for this specific service. This will expose port `3306` for this service and prompt you with your MySQL connection screen that include your unique MySQL username.
 
-<div class="eighty-percent">
-    <img src={mysql_2} class="image" alt="Credentials screen - Enabled MySQL" />
-</div>
+<Image size="md" img={mysql_2} alt="ClickHouse Cloud MySQL interface enabling toggle and connection details" border />
 <br/>
 
 Alternatively, in order to enable the MySQL interface for an existing service:
 
 3. Ensure your service is in `Running` state then click on the service you want to enable the MySQL interface for. Select "Connect" from the left menu:
 
 <br/>
-<div class="eighty-percent">
-    <img src={mysql_3} class="image" alt="Connection screen - Prompt MySQL" />
-</div>
+<Image size="md" img={mysql_3} alt="ClickHouse Cloud service connection screen with Connect option highlighted" border />
 <br/>
 
 
 4. Select MySQL from the `Connect With` drop down.
 
 <br/>
-<img src={mysql_4} class="image" alt="Connection screen - Prompt MySQL" />
+<Image size="md" img={mysql_4} alt="ClickHouse Cloud connection screen showing MySQL option selection" border />
 <br/>
 
 5. Toggle the switch to enable the MySQL interface for this specific service. This will expose port `3306` for this service and prompt you with your MySQL connection screen that include your unique MySQL username.
 
-<img src={mysql_5} class="image" alt="Connection screen - MySQL Enabled" />
+<Image size="md" img={mysql_5} alt="ClickHouse Cloud connection screen with MySQL interface enabled showing connection details" border />
 
 ## Creating multiple MySQL users in ClickHouse Cloud {#creating-multiple-mysql-users-in-clickhouse-cloud}
 

docs/_snippets/_service_actions_menu.md

@@ -1,5 +1,6 @@
+import Image from '@theme/IdealImage';
 import cloud_service_action_menu from '@site/static/images/_snippets/cloud-service-actions-menu.png';
 
 Select your service, followed by `Data souces` -> `Predefined sample data`.
 
-<img src={cloud_service_action_menu} class="image" alt="Cloud service Actions menu" />
+<Image size="md" img={cloud_service_action_menu} alt="ClickHouse Cloud service Actions menu showing Data sources and Predefined sample data options" border />

docs/integrations/data-visualization/astrato-and-clickhouse.md

@@ -41,21 +41,21 @@ When setting up your data connection, you'll need to know:
 ​
 - Click on the **New Data Connection** button in the top right side of the screen.
 
-<Image img={astrato_1_dataconnection}  class="image"  alt="Astrato Data Connection"  size="sm"/>
+<Image size="sm" img={astrato_1_dataconnection} alt="Astrato Data Connection" border />
 
 - Select **ClickHouse**.
 
-<Image img={astrato_2a_clickhouse_connection}  class="image"  alt="Astrato ClickHouse Data Connection"  size="sm"/>
+<Image size="sm" img={astrato_2a_clickhouse_connection} alt="Astrato ClickHouse Data Connection" border />
 
 - Complete the required fields in the connection dialogue box
 
-<Image img={astrato_2b_clickhouse_connection}  class="image"  alt="Astrato connect to ClickHouse required fields"  size="sm"/>
+<Image size="sm" img={astrato_2b_clickhouse_connection} alt="Astrato connect to ClickHouse required fields" border />
 
 - Click **Test Connection**. If the connection is successful, give the data connection a **name** and click **Next.**
 
 - Set the **user access** to the data connection and click **connect.**
 
-<Image img={astrato_3_user_access} alt="Astrato connect to ClickHouse User Access"  size="md"/>
+<Image size="md" img={astrato_3_user_access} alt="Astrato connect to ClickHouse User Access" border />
 
 -   A connection is created and a dataview is created.
 
@@ -67,17 +67,17 @@ if a duplicate is created, a timestamp is added to the data source name.
 
 In our Data View editor, you will see all of your Tables and Schemas in ClickHouse, select some to get started.
 
-<Image img={astrato_4a_clickhouse_data_view} alt="Astrato connect to ClickHouse User Access"  size="lg"/>
+<Image size="lg" img={astrato_4a_clickhouse_data_view} alt="Astrato connect to ClickHouse User Access" border />
 
 Now that you have your data selected, go to define the **data view**. Click define on the top right of the webpage.
 
 In here, you are able to join data, as well as, **create governed dimensions and measures** - ideal for driving consistency in business logic across various teams.
 
-<Image img={astrato_4b_clickhouse_data_view_joins}  alt="Astrato connect to ClickHouse User Access"  size="lg"/>
+<Image size="lg" img={astrato_4b_clickhouse_data_view_joins} alt="Astrato connect to ClickHouse User Access" border />
 
 **Astrato intelligently suggests joins** using your meta data, including leveraging the keys in ClickHouse. Our suggested joins make it easy for you to gets started, working from your well-governed ClickHouse data, without reinventing the wheel. We also show you **join quality** so that you have the option to review all suggestions, in detail, from Astrato.
 
-<Image img={astrato_4c_clickhouse_completed_data_view} alt="Astrato connect to ClickHouse User Access" size="lg"/>
+<Image size="lg" img={astrato_4c_clickhouse_completed_data_view} alt="Astrato connect to ClickHouse User Access" border />
 
 ## Creating a dashboard {#creating-a-dashboard}
 
@@ -87,18 +87,18 @@ In just a few steps, you can build your first chart in Astrato.
 3. Add dimension(s)
 4. Add measure(s)
 
-<Image img={astrato_5a_clickhouse_build_chart}  alt="Astrato connect to ClickHouse User Access" size="lg"/>
+<Image size="lg" img={astrato_5a_clickhouse_build_chart} alt="Astrato connect to ClickHouse User Access" border />
 
 
 ### View generated SQL supporting each visualization {#view-generated-sql-supporting-each-visualization}
 
 Transparency and accuracy are at the heart of Astrato. We ensure that every query generated is visible, letting you keep full control. All compute happens directly in ClickHouse, taking advantage of its speed while maintaining robust security and governance.
 
-<Image img={astrato_5b_clickhouse_view_sql} alt="Astrato connect to ClickHouse User Access" size="lg"/>
+<Image size="lg" img={astrato_5b_clickhouse_view_sql} alt="Astrato connect to ClickHouse User Access" border />
 
 
 ### Example completed dashboard {#example-completed-dashboard}
 
 A beautiful complete dashboard or data app isn't far away now. To see more of what we've built, head to our demo gallery on our website. https://astrato.io/gallery
 
-<Image img={astrato_5c_clickhouse_complete_dashboard} alt="Astrato connect to ClickHouse User Access" size="lg"/>
+<Image size="lg" img={astrato_5c_clickhouse_complete_dashboard} alt="Astrato connect to ClickHouse User Access" border />

docs/integrations/data-visualization/deepnote.md

@@ -23,18 +23,18 @@ This guide assumes you already have a Deepnote account and that you have a runni
 ## Interactive example {#interactive-example}
 If you would like to explore an interactive example of querying ClickHouse from Deepnote data notebooks, click the button below to  launch a template project connected to the [ClickHouse playground](../../getting-started/playground.md).
 
-[<Image size="logo" img="https://deepnote.com/buttons/launch-in-deepnote.svg"/>](https://deepnote.com/launch?template=ClickHouse%20and%20Deepnote)
+[<Image size="logo" img="https://deepnote.com/buttons/launch-in-deepnote.svg" alt="Launch in Deepnote" />](https://deepnote.com/launch?template=ClickHouse%20and%20Deepnote)
 
 ## Connect to ClickHouse {#connect-to-clickhouse}
 
 1. Within Deepnote, select the "Integrations" overview and click on the ClickHouse tile.
 
-<Image size="lg" img={deepnote_01} alt="ClickHouse integration tile"/>
+<Image size="lg" img={deepnote_01} alt="ClickHouse integration tile" border />
 
 2. Provide the connection details for your ClickHouse instance:
 <ConnectionDetails />
 
-   <Image size="md" img={deepnote_02} alt="ClickHouse details dialog"/>
+   <Image size="md" img={deepnote_02} alt="ClickHouse details dialog" border />
 
    **_NOTE:_** If your connection to ClickHouse is protected with an IP Access List, you might need to allow Deepnote's IP addresses. Read more about it in [Deepnote's docs](https://docs.deepnote.com/integrations/authorize-connections-from-deepnote-ip-addresses).
 
@@ -44,7 +44,7 @@ If you would like to explore an interactive example of querying ClickHouse from
 
 1. Start by connecting to the ClickHouse integration on the right of your notebook.
 
-   <Image size="lg" img={deepnote_03} alt="ClickHouse details dialog"/>
+   <Image size="lg" img={deepnote_03} alt="ClickHouse details dialog" border />
 
 2. Now create a new ClickHouse query block and query your database. The query results will be saved as a DataFrame and stored in the variable specified in the SQL block.
 3. You can also convert any existing [SQL block](https://docs.deepnote.com/features/sql-cells) to a ClickHouse block.