Skip to content

Commit

Permalink
Make it prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
Michiel De Muynck committed Oct 31, 2024
1 parent d39aeba commit a8800b5
Show file tree
Hide file tree
Showing 33 changed files with 413 additions and 20 deletions.
16 changes: 16 additions & 0 deletions Cargo.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions Cargo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ edition = "2021"
[dependencies]
console_error_panic_hook = "0.1.7"
leptos = { version = "0.6.15", features = ["csr", "nightly"] }
markdown = "1.0.0-alpha.21"
reqwasm = "0.5.0"
serde = { version = "1.0.213", features = ["derive"] }
serde_yaml = "0.9.34"
4 changes: 3 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link data-trunk rel="css" href="static/style.css"/>
<link data-trunk rel="copy-dir" href="static/images" data-target-path="static/images"/>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=El+Messiri:wght@700&display=swap" rel="stylesheet">
</head>
<body></body>
</html>

44 changes: 42 additions & 2 deletions integrations.yaml
Original file line number Diff line number Diff line change
@@ -1,8 +1,48 @@
- id: local_csv
short_name: "Local CSV"
description: "A CSV file stored on the local filesystem"
logo: "csv.jpg"
description: "A CSV file on the local filesystem"
logo: "csv.png"
- id: local_parquet
short_name: "Local Parquet"
description: "A Parquet file on the local filesystem"
logo: "parquet.png"
- id: local_json
short_name: "Local JSON"
description: "A JSON file on the local filesystem"
logo: "json.png"
- id: csv_on_s3
short_name: "CSV on S3"
description: "A CSV file on S3"
logo: "s3.png"
- id: csv_on_azure
short_name: "CSV on Azure"
description: "CSV Azure blob storage"
logo: "azure-blob-storage.png"
- id: csv_on_google_cloud_storage
short_name: "CSV on GCP"
description: "CSV on Google cloud storage"
logo: "google-cloud-storage.png"
- id: oracle
short_name: "Oracle"
description: "The relational database management system by Oracle"
logo: "oracle.png"
- id: mysql
short_name: "MySQL"
description: "An open-source relational database management system"
logo: "mysql.png"
- id: sql_server
short_name: "SQL Server"
description: "A proprietary relational database management system developed by Microsoft"
logo: "sql-server.svg"
- id: postgres
short_name: "PostgreSQL"
description: "Free and open-source relational database management system (RDBMS) emphasizing extensibility and SQL compliance"
logo: "postgres.png"
- id: mongodb
short_name: "MongoDB"
description: >
MongoDB is a source-available, cross-platform, document-oriented database program.
Classified as a NoSQL database product, MongoDB utilizes JSON-like documents with
optional schemas. MongoDB is developed by MongoDB Inc. and current versions are
licensed under the Server Side Public License.
logo: "mongodb.png"
66 changes: 64 additions & 2 deletions query_engines.yaml
Original file line number Diff line number Diff line change
@@ -1,10 +1,72 @@
- id: duckdb
short_name: DuckDB
short_name: "DuckDB"
description: "An in-process SQL OLAP database management system"
url: "https://duckdb.org/"
logo: "duckdb.jfif"
- id: polars
short_name: Polars
short_name: "Polars"
description: "A blazingly fast DataFrame library implemented in Rust"
url: "https://pola.rs/"
logo: "polars.png"
- id: spark
short_name: "Spark"
description: "Apache Spark is an open-source unified analytics engine for large-scale data processing"
url: "https://spark.apache.org/"
logo: "spark.webp"
- id: snowflake
short_name: "Snowflake"
description: "Managed cloud data platform"
url: "https://snowflake.com/"
logo: "snowflake.png"
- id: athena
short_name: "Athena"
description: "An interactive query service that makes it easy to analyze data in Amazon S3 using standard SQL"
url: "https://aws.amazon.com/athena/"
logo: "athena.png"
- id: fabric
short_name: "Fabric"
description: "An end-to-end analytics and data platform designed for enterprises that require a unified solution"
url: "https://www.fabric.io/"
logo: "fabric.webp"
- id: synapse
short_name: "Synapse"
description: "Azure Synapse Analytics is a limitless analytics service that brings together enterprise SQL data warehousing and big data analytics services"
url: "https://azure.microsoft.com/en-us/products/synapse-analytics"
logo: "synapse.png"
- id: impala
short_name: "Impala"
description: "Modern, open source, distributed SQL query engine for open data and table formats by Apache"
url: "https://impala.apache.org/"
logo: "impala.png"
- id: trino
short_name: "Trino"
description: "Open-source distributed SQL query engine designed to query large data sets distributed over one or more heterogeneous data sources"
url: "https://trino.io/"
logo: "trino.png"
- id: starburst
short_name: "Starburst"
description: "Enterprise managed Trino"
url: "https://www.starburst.io/"
logo: "starburst.png"
- id: bigquery
short_name: "BigQuery"
description: "Serverless, cost-effective, multicloud data warehouse by Google."
url: "https://cloud.google.com/bigquery"
logo: "bigquery.svg"
- id: hive
short_name: "Hive"
description: "Distributed, fault-tolerant warehouse infrastructure built on top of Hadoop"
url: "https://hive.apache.org/"
logo: "hive.png"
- id: redshift
short_name: "Redshift"
description: "A fully managed, petabyte-scale data warehouse service by AWS"
url: "https://aws.amazon.com/redshift/"
logo: "redshift.png"

# Todo:
# Presto
# StarRocks
# Dremio
# Meltano?
# dlt?
129 changes: 125 additions & 4 deletions src/main.rs
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
mod markdown;

use std::{collections::HashMap, panic};

use leptos::*;
use markdown::Markdown;
use serde::Deserialize;

#[derive(Debug, Deserialize, Clone)]
Expand Down Expand Up @@ -32,7 +35,7 @@ struct IntegrationSupport {
export: Feature,
}

#[derive(Debug)]
#[derive(Debug, Clone)]
struct ClickedCell {
query_engine: QueryEngine,
integration: Integration,
Expand Down Expand Up @@ -67,7 +70,11 @@ fn main() {

mount_to_body(move || {
view! {
<div class="content">
<h1>"Engine Query"</h1>
<p>
Answer all your queries about query engines.
</p>
<table class="styled-table">
<thead>
<tr>
Expand All @@ -78,8 +85,12 @@ fn main() {
let:integration
>
<th>
<img class="logo-small" src={format!("static/images/{}", integration.logo)} />
<span class="logo-text">{&integration.short_name}</span>
<div class="logo-in-th-container"><img class="logo-in-th" src={format!("static/images/{}", integration.logo)} /></div>
<div class="th-rotated-text">
<span>
{&integration.short_name}
</span>
</div>
</th>
</For>
</tr>
Expand All @@ -101,6 +112,7 @@ fn main() {
let:integration
>
<td
class="support-matrix-cell-td"
on:click={
// TODO: not sure if all these clone()s are necessary
let qe = qe.clone();
Expand All @@ -121,7 +133,7 @@ fn main() {
let support = support_matrix.get().get(&qe.id).and_then(|qe_support_map| qe_support_map.get(&integration.id)).cloned();
if let Some(support) = support {
view! {
<div class="support-cell">
<div class="support-matrix-cell">
{
match (support.import.supported, support.export.supported) {
(true, true) => "✅",
Expand All @@ -146,6 +158,115 @@ fn main() {
</For>
</tbody>
</table>
<p>
<b>Legend:</b>
<ul>
<li>"✅ = Can read & write"</li>
<li>"🔎 = Can read but not write"</li>
<li>"✍️ = Can write but not read"</li>
<li>"❌ = Not supported"</li>
<li>"❓ = Unknown ("<a href="https://github.com/datamindedbe/playground-engine-query/edit/main/support_matrix.yaml">"please contribute!"</a>")"</li>
</ul>
</p>
{
move || {
if let Some(c) = clicked_on_cell.get() {
let support = support_matrix.get().get(&c.query_engine.id).and_then(|qe_support_map| qe_support_map.get(&c.integration.id)).cloned();
view! {
<div class="support-details-popup" style={move || format!("--clicked-at-x: {}px; --clicked-at-y: {}px;", c.mouse_x, c.mouse_y)}>
<img
class="popup-close-button"
src="static/images/cross-mark.png"
on:click={
move |_mouse_event| {
set_clicked_on_cell(None)
}
}
/>
<p class="popup-subtitle">"Can "
<img class="logo-small" src={format!("static/images/{}", c.query_engine.logo)} />
<span class="logo-text">{&c.query_engine.short_name}</span>
" "
<span class="popup-subtitle-emphasis">"read"</span>
" from "
<img class="logo-small" src={format!("static/images/{}", c.integration.logo)} />
<span class="logo-text">{&c.integration.short_name}</span>
" ?"
</p>
<p>
{
if let Some(support) = &support {
if support.import.supported {
view! {
<div>
<p><span class="popup-yesno">"Yes."</span></p>
<p><Markdown src={support.import.evidence.clone()} /></p>
</div>
}
} else {
view! {
<div>
<p><span class="popup-yesno">"No."</span></p>
<p><Markdown src={support.import.evidence.clone()} /></p>
</div>
}
}
} else {
view! {
<div>
<p>"Unknown ("<a href="https://github.com/datamindedbe/playground-engine-query/edit/main/support_matrix.yaml">"please contribute!"</a>")"</p>
</div>
}
}
}
</p>
<p class="popup-subtitle">"Can "
<img class="logo-small" src={format!("static/images/{}", c.query_engine.logo)} />
<span class="logo-text">{&c.query_engine.short_name}</span>
" "
<span class="popup-subtitle-emphasis">"write"</span>
" to "
<img class="logo-small" src={format!("static/images/{}", c.integration.logo)} />
<span class="logo-text">{&c.integration.short_name}</span>
" ?"
</p>
<p>
{
if let Some(support) = &support {
if support.export.supported {
view! {
<div>
<p><span class="popup-yesno">"Yes."</span></p>
<p><Markdown src={support.export.evidence.clone()} /></p>
</div>
}
} else {
view! {
<div>
<p><span class="popup-yesno">"No."</span></p>
<p><Markdown src={support.export.evidence.clone()} /></p>
</div>
}
}
} else {
view! {
<div>
<p>"Unknown ("<a href="https://github.com/datamindedbe/playground-engine-query/edit/main/support_matrix.yaml">"please contribute!"</a>")"</p>
</div>
}
}
}
</p>
</div>
}
} else {
view! {
<div style="display: hidden;" />
}
}
}
}
</div>
}
})
}
23 changes: 23 additions & 0 deletions src/markdown.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
use leptos::*;

#[component]
pub fn Markdown(
src: impl AsRef<str>
) -> impl IntoView {
let compiled_html = markdown::to_html_with_options(
src.as_ref(),
&markdown::Options::gfm()
);
match compiled_html {
Ok(compiled_html) => {
view! {
<div inner_html=compiled_html/>
}
},
Err(e) => {
view! {
<div>{ format!("Invalid markdown: {}", e) }</div>
}
}
}
}
Binary file added static/images/athena.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/azure-blob-storage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions static/images/bigquery.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/cross-mark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed static/images/csv.jpg
Binary file not shown.
Binary file added static/images/csv.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/fabric.webp
Binary file not shown.
Binary file added static/images/google-cloud-storage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/hive.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/impala.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/json.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/mongodb.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/mysql.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 0 additions & 4 deletions static/images/oracle.png:Zone.Identifier

This file was deleted.

Binary file added static/images/parquet.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/postgres.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/redshift.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/s3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/snowflake.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/spark.webp
Binary file not shown.
Loading

0 comments on commit a8800b5

Please sign in to comment.