small fixes

Author: gingerwizard

docs/_snippets/_launch_sql_console.md

@@ -12,10 +12,10 @@ If you need a SQL client connection, your ClickHouse Cloud service has an associ
 
 From your ClickHouse Cloud services list, click on a service.
 
-<Image img={cloud_connect_to_sql_console}  alt="Connect to SQL Console" size="lg" force/>
+<Image img={cloud_connect_to_sql_console}  alt="Connect to SQL Console" size="lg" force border/>
 
 This will redirect you to the SQL console.
 
-<Image img={createservice8}  alt="SQL Console" size="lg" force/>
+<Image img={createservice8}  alt="SQL Console" size="lg" force border/>
 
 </details>

docs/migrations/bigquery/migrating-to-clickhouse-cloud.md

@@ -384,7 +384,7 @@ The following provides example queries comparing BigQuery to ClickHouse. This li
 
 _BigQuery_
 
-<Image img={bigquery_8} size="md" alt="Rewriting BigQuery queries"/>
+<Image img={bigquery_8} size="sm" alt="Rewriting BigQuery queries" border/>
 
 _ClickHouse_
 
@@ -417,7 +417,7 @@ _BigQuery_
 
 <br />
 
-<Image img={bigquery_9} size="md" alt="BigQuery 1"/>
+<Image img={bigquery_9} size="sm" alt="BigQuery 1" border/>
 
 _ClickHouse_
 
@@ -450,9 +450,9 @@ Where possible, users should exploit ClickHouse aggregate functions. Below, we s
 
 _BigQuery_
 
-<Image img={bigquery_10} size="md" alt="Aggregate functions 1"/>
+<Image img={bigquery_10} border size="sm" alt="Aggregate functions 1"/>
 
-<Image img={bigquery_11} size="md" alt="Aggregate functions 2"/>
+<Image img={bigquery_11} border size="sm" alt="Aggregate functions 2"/>
 
 _ClickHouse_
 
@@ -505,7 +505,7 @@ Conditional and array functions make queries significantly simpler. The followin
 
 _BigQuery_
 
-<Image img={bigquery_12} size="md" alt="Conditionals and Arrays"/>
+<Image img={bigquery_12} size="sm" border alt="Conditionals and Arrays"/>
 
 _ClickHouse_
 

docs/tutorial.md

@@ -89,6 +89,7 @@ The New York City taxi data contains the details of millions of taxi rides, with
 Now that you have a table created, let's add the NYC taxi data. It is in CSV files in S3, and you can load the data from there.
 
 1. The following command inserts ~2,000,000 rows into your `trips` table from two different files in S3: `trips_1.tsv.gz` and `trips_2.tsv.gz`:
+
     ```sql
     INSERT INTO trips
     SELECT * FROM s3(
@@ -499,4 +500,3 @@ Well done - you made it through the tutorial, and hopefully you have a better un
 - [Connect your favorite UI/BI tool](./integrations/data-visualization/index.md) to ClickHouse
 - Check out the [SQL Reference](./sql-reference/index.md) and browse through the various functions. ClickHouse has an amazing collection of functions for transforming, processing and analyzing data
 - Learn more about [Dictionaries](/sql-reference/dictionaries/index.md)
-

docs/use-cases/observability/grafana.md

@@ -49,15 +49,15 @@ If adhering to the Grafana requirements for logs, users can select `Query Type:
 SELECT Timestamp as timestamp, Body as body, SeverityText as level, TraceId as traceID FROM "default"."otel_logs" WHERE ( timestamp >= $__fromTime AND timestamp <= $__toTime ) ORDER BY timestamp DESC LIMIT 1000
 ```
 
-<Image img={observability_16} alt="Connector logs config" size="lg"/>
+<Image img={observability_16} alt="Connector logs config" size="lg" border/>
 
 The query builder provides a simple means of modifying the query, avoiding the need for users to write SQL. Filtering, including finding logs containing keywords, can be performed from the query builder. Users wishing to write more complex queries can switch to the SQL editor. Provided the appropriate columns are returned, and `logs` selected as the Query Type, the results will be rendered as logs. The required columns for log rendering are listed [here](https://grafana.com/developers/plugin-tools/tutorials/build-a-logs-data-source-plugin#logs-data-frame-format).
 
 ### Logs to traces {#logs-to-traces}
 
 If logs contain trace Ids, users can benefit from being able to navigate through to a trace for a specific log line.
 
-<Image img={observability_17} alt="Logs to traces" size="lg"/>
+<Image img={observability_17} alt="Logs to traces" size="lg" border/>
 
 ## Traces {#traces}
 
@@ -78,7 +78,7 @@ WHERE ( Timestamp >= $__fromTime AND Timestamp <= $__toTime )
 
 This query returns the column names expected by Grafana, rendering a table of traces as shown below. Filtering on duration or other columns can be performed without needing to write SQL.
 
-<Image img={observability_18} alt="Traces" size="lg"/>
+<Image img={observability_18} alt="Traces" size="lg" border/>
 
 Users wishing to write more complex queries can switch to the `SQL Editor`.
 
@@ -114,7 +114,7 @@ LIMIT 1000
 Note how the above query uses the materialized view `otel_traces_trace_id_ts` to perform the trace id lookup. See [Accelerating Queries - Using Materialized views for lookups](/use-cases/observability/schema-design#using-materialized-views-incremental--for-fast-lookups) for further details.
 :::
 
-<Image img={observability_19} alt="Trace Details" size="lg"/>
+<Image img={observability_19} alt="Trace Details" size="lg" border/>
 
 ### Traces to logs {#traces-to-logs}
 
@@ -128,15 +128,15 @@ WHERE ( traceID = '<trace_id>' )
 ORDER BY timestamp ASC LIMIT 1000
 ```
 
-<Image img={observability_20} alt="Traces to logs" size="lg"/>
+<Image img={observability_20} alt="Traces to logs" size="lg" border/>
 
 ## Dashboards {#dashboards}
 
 Users can build dashboards in Grafana using the ClickHouse data source. We recommend the Grafana and ClickHouse [data source documentation](https://github.com/grafana/clickhouse-datasource) for further details, especially the [concept of macros](https://github.com/grafana/clickhouse-datasource?tab=readme-ov-file#macros) and [variables](https://grafana.com/docs/grafana/latest/dashboards/variables/).
 
 The plugin provides several out-of-the-box dashboards, including an example dashboard, "Simple ClickHouse OTel dashboarding," for logging and tracing data conforming to the OTel specification. This requires users to conform to the default column names for OTel and can be installed from the data source configuration.
 
-<Image img={observability_21} alt="Dashboards" size="lg"/>
+<Image img={observability_21} alt="Dashboards" size="lg" border/>
 
 We provide some simple tips for building visualizations below.
 
@@ -157,7 +157,7 @@ ORDER BY time ASC
 LIMIT 100000
 ```
 
-<Image img={observability_22} alt="Time series" size="lg"/>
+<Image img={observability_22} alt="Time series" size="lg" border/>
 
 ### Multi-line charts {#multi-line-charts}
 
@@ -182,7 +182,7 @@ ORDER BY time ASC
 LIMIT 100000
 ```
 
-<Image img={observability_23} alt="Multi-line charts" size="lg"/>
+<Image img={observability_23} alt="Multi-line charts" size="lg" border/>
 
 ### Visualizing geo data {#visualizing-geo-data}
 
@@ -206,4 +206,4 @@ FROM coords
 GROUP BY hash
 ```
 
-<Image img={observability_24} alt="Visualizing geo data" size="lg"/>
+<Image img={observability_24} alt="Visualizing geo data" size="lg" border/>

docs/use-cases/observability/introduction.md

@@ -91,6 +91,6 @@ Each trace consists of several spans, with the initial span associated with the
 
 Most observability vendors visualize this information as a waterfall, with relative timing shown using horizontal bars of proportional size. For example, in Grafana:
 
-<Image img={observability_2} alt="Example trace" size="lg"/>
+<Image img={observability_2} alt="Example trace" size="lg" border/>
 
 For users needing to familiarize themselves deeply with the concepts of logs and traces, we highly recommend the [OpenTelemetry documentation](https://opentelemetry.io/docs/concepts/).

src/theme/IdealImage/index.tsx

@@ -129,6 +129,7 @@ export default function IdealImage(
   const [isZoomed, setIsZoomed] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
   const imageRef = useRef<HTMLDivElement>(null);
+  const [networkType, setNetworkType] = useState<string | null>(null);
 
   useEffect(() => {
     if (!imageRef.current) return;
@@ -186,7 +187,12 @@ export default function IdealImage(
   };
 
   const img_component = force ? (
-    <img width={currentImage.width ?? 100} alt={alt} src={currentImage.path} />
+    <img
+      width={currentImage.width ?? 100}
+      alt={alt}
+      src={currentImage.path}
+      style={imageStyles}
+    />
   ) : (
     <ReactIdealImage
       {...propsRest}
@@ -202,17 +208,66 @@ export default function IdealImage(
       style={imageStyles}
     />
   );
-  let connection = null;
-  if ("connection" in navigator) {
-    connection =
-      navigator.connection ||
-      navigator.mozConnection ||
-      navigator.webkitConnection;
-  }
+
+  useEffect(() => {
+    if ("connection" in navigator) {
+      const connection =
+        navigator.connection ||
+        navigator.mozConnection ||
+        navigator.webkitConnection;
+      setNetworkType(connection.effectiveType);
+    } else {
+      const controller = new AbortController();
+      const signal = controller.signal;
+      const timeout = setTimeout(() => {
+        console.log("Timeout reached, aborting fetch...");
+        controller.abort();
+        setNetworkType("3g");
+      }, 1000); // 1 second timeout
+
+      const testSpeed = async () => {
+        console.log("Downloading...");
+        const url = currentImage.path!;
+        const startTime = performance.now();
+
+        try {
+          const response = await fetch(url, { signal, cache: "force-cache" });
+          const endTime = performance.now();
+          const duration = (endTime - startTime) / 1000;
+
+          clearTimeout(timeout);
+
+          if (duration > 1) {
+            console.log("Took too long, setting as 3g");
+            setNetworkType("3g");
+          } else {
+            console.log("Loaded quickly, setting as 4g");
+            setNetworkType("4g");
+          }
+        } catch (error) {
+          if (error.name === "AbortError") {
+            console.log("Fetch aborted due to timeout.");
+            setNetworkType("3g");
+          } else {
+            console.error("Fetch failed:", error);
+            setNetworkType("3g");
+          }
+        }
+      };
+
+      testSpeed();
+
+      return () => {
+        clearTimeout(timeout);
+        controller.abort();
+      };
+    }
+  }, [currentImage.path]);
+
   return (
     <div style={containerStyles}>
       {/* Zoomed Image */}
-      {connection && connection.effectiveType == "4g" && (
+      {networkType == "4g" && (
         <ControlledZoom
           isZoomed={isZoomed}
           onZoomChange={handleZoomChange}
@@ -232,17 +287,9 @@ export default function IdealImage(
       )}
       <div
         ref={imageRef}
-        onClick={() =>
-          connection &&
-          connection.effectiveType == "4g" &&
-          isLoaded &&
-          setIsZoomed(true)
-        }
+        onClick={() => networkType == "4g" && isLoaded && setIsZoomed(true)}
         style={{
-          cursor:
-            connection && connection.effectiveType == "4g" && isLoaded
-              ? "zoom-in"
-              : "default",
+          cursor: networkType == "4g" && isLoaded ? "zoom-in" : "default",
         }}
       >
         {img_component}

src/theme/IdealImage/styles.module.css

@@ -2,18 +2,18 @@
 .customZoom [data-rmiz-modal-img] {
     transition-duration: 0.2s;
     transition-timing-function: linear;
-    background-color: rgb(0, 0, 0);
+    background-color: rgb(31 31 28);
 }
 .customZoom [data-rmiz-modal-overlay="hidden"] {
-    background-color: rgb(0, 0, 0);
+    background-color: rgb(31 31 28);
 }
 .customZoom [data-rmiz-modal-overlay="visible"] {
-    background-color: rgb(0, 0, 0);
+    background-color: rgb(31 31 28);
 }
 .customZoom [data-rmiz-btn-unzoom] {
     display: none;
 }
 
 .customWhiteZoom [data-rmiz-modal-img] {
-    background-color: rgb(31 31 28) !important;
+    background-color: rgb(255 255 255) !important;
 }