Site: Improve HTML tables display & update CSV tutorial

guiyanakuang · zabetak · commit 8094bc3794fc · 2022-01-07T12:40:34.000+01:00
1. Allow code pre-wrap in tables. 2. Display horizontal scrollbar in tables when content is too large and cannot be wrapped. 3. Update CSV tutorial example based on current code. Close apache#2632
diff --git a/site/_docs/adapter.md b/site/_docs/adapter.md
@@ -109,14 +109,18 @@ as implemented by Avatica's
 To make a connection to a single schema based on a built-in schema type, you don't need to specify
 a model. For example,
 
-  `jdbc:calcite:schemaType=JDBC; schema.jdbcUser=SCOTT; schema.jdbcPassword=TIGER; schema.jdbcUrl=jdbc:hsqldb:res:foodmart`
+{% highlight text %}
+jdbc:calcite:schemaType=JDBC; schema.jdbcUser=SCOTT; schema.jdbcPassword=TIGER; schema.jdbcUrl=jdbc:hsqldb:res:foodmart
+{% endhighlight %}
 
 creates a connection with a schema mapped via the JDBC schema adapter to the foodmart database.
 
 Similarly, you can connect to a single schema based on a user-defined schema adapter.
 For example,
 
-  `jdbc:calcite:schemaFactory=org.apache.calcite.adapter.cassandra.CassandraSchemaFactory; schema.host=localhost; schema.keyspace=twissandra`
+{% highlight text %}
+jdbc:calcite:schemaFactory=org.apache.calcite.adapter.cassandra.CassandraSchemaFactory; schema.host=localhost; schema.keyspace=twissandra
+{% endhighlight %}
 
 makes a connection to the Cassandra adapter, equivalent to writing the following model file:
 
diff --git a/site/_docs/tutorial.md b/site/_docs/tutorial.md
@@ -78,15 +78,15 @@ Execute a metadata query:
 
 {% highlight bash %}
 sqlline> !tables
-+------------+--------------+-------------+---------------+----------+------+
-| TABLE_CAT  | TABLE_SCHEM  | TABLE_NAME  |  TABLE_TYPE   | REMARKS  | TYPE |
-+------------+--------------+-------------+---------------+----------+------+
-| null       | SALES        | DEPTS       | TABLE         | null     | null |
-| null       | SALES        | EMPS        | TABLE         | null     | null |
-| null       | SALES        | HOBBIES     | TABLE         | null     | null |
-| null       | metadata     | COLUMNS     | SYSTEM_TABLE  | null     | null |
-| null       | metadata     | TABLES      | SYSTEM_TABLE  | null     | null |
-+------------+--------------+-------------+---------------+----------+------+
++-----------+-------------+------------+--------------+---------+----------+------------+-----------+---------------------------+----------------+
+| TABLE_CAT | TABLE_SCHEM | TABLE_NAME |  TABLE_TYPE  | REMARKS | TYPE_CAT | TYPE_SCHEM | TYPE_NAME | SELF_REFERENCING_COL_NAME | REF_GENERATION |
++-----------+-------------+------------+--------------+---------+----------+------------+-----------+---------------------------+----------------+
+|           | SALES       | DEPTS      | TABLE        |         |          |            |           |                           |                |
+|           | SALES       | EMPS       | TABLE        |         |          |            |           |                           |                |
+|           | SALES       | SDEPTS     | TABLE        |         |          |            |           |                           |                |
+|           | metadata    | COLUMNS    | SYSTEM TABLE |         |          |            |           |                           |                |
+|           | metadata    | TABLES     | SYSTEM TABLE |         |          |            |           |                           |                |
++-----------+-------------+------------+--------------+---------+----------+------------+-----------+---------------------------+----------------+
 {% endhighlight %}
 
 (JDBC experts, note: sqlline's <code>!tables</code> command is just executing
@@ -95,29 +95,29 @@ behind the scenes.
 It has other commands to query JDBC metadata, such as <code>!columns</code> and <code>!describe</code>.)
 
 As you can see there are 5 tables in the system: tables
-<code>EMPS</code>, <code>DEPTS</code> and <code>HOBBIES</code> in the current
+<code>EMPS</code>, <code>DEPTS</code> and <code>SDEPTS</code> in the current
 <code>SALES</code> schema, and <code>COLUMNS</code> and
 <code>TABLES</code> in the system <code>metadata</code> schema. The
 system tables are always present in Calcite, but the other tables are
 provided by the specific implementation of the schema; in this case,
-the <code>EMPS</code> and <code>DEPTS</code> tables are based on the
-<code>EMPS.csv</code> and <code>DEPTS.csv</code> files in the
+the <code>EMPS</code>, <code>DEPTS</code> and <code>SDEPTS</code> tables are based on the
+<code>EMPS.csv.gz</code>, <code>DEPTS.csv</code> and <code>SDEPTS.csv</code> files in the
 <code>resources/sales</code> directory.
 
 Let's execute some queries on those tables, to show that Calcite is providing
 a full implementation of SQL. First, a table scan:
 
 {% highlight bash %}
 sqlline> SELECT * FROM emps;
-+--------+--------+---------+---------+----------------+--------+-------+---+
-| EMPNO  |  NAME  | DEPTNO  | GENDER  |      CITY      | EMPID  |  AGE  | S |
-+--------+--------+---------+---------+----------------+--------+-------+---+
-| 100    | Fred   | 10      |         |                | 30     | 25    | t |
-| 110    | Eric   | 20      | M       | San Francisco  | 3      | 80    | n |
-| 110    | John   | 40      | M       | Vancouver      | 2      | null  | f |
-| 120    | Wilma  | 20      | F       |                | 1      | 5     | n |
-| 130    | Alice  | 40      | F       | Vancouver      | 2      | null  | f |
-+--------+--------+---------+---------+----------------+--------+-------+---+
++-------+-------+--------+--------+---------------+-------+------+---------+---------+------------+
+| EMPNO | NAME  | DEPTNO | GENDER |     CITY      | EMPID | AGE  | SLACKER | MANAGER |  JOINEDAT  |
++-------+-------+--------+--------+---------------+-------+------+---------+---------+------------+
+| 100   | Fred  | 10     |        |               | 30    | 25   | true    | false   | 1996-08-03 |
+| 110   | Eric  | 20     | M      | San Francisco | 3     | 80   |         | false   | 2001-01-01 |
+| 110   | John  | 40     | M      | Vancouver     | 2     | null | false   | true    | 2002-05-03 |
+| 120   | Wilma | 20     | F      |               | 1     | 5    |         | true    | 2005-09-07 |
+| 130   | Alice | 40     | F      | Vancouver     | 2     | null | false   | true    | 2007-01-01 |
++-------+-------+--------+--------+---------------+-------+------+---------+---------+------------+
 {% endhighlight %}
 
 Now JOIN and GROUP BY:
@@ -277,11 +277,11 @@ private Table createTable(File file) {
 }
 {% endhighlight %}
 
-The schema scans the directory and finds all files whose name ends
-with ".csv" and creates tables for them. In this case, the directory
+The schema scans the directory, finds all files with the appropriate extension,
+and creates tables for them. In this case, the directory
 is <code>sales</code> and contains files
-<code>EMPS.csv</code> and <code>DEPTS.csv</code>, which these become
-the tables <code>EMPS</code> and <code>DEPTS</code>.
+<code>EMPS.csv.gz</code>, <code>DEPTS.csv</code> and <code>SDEPTS.csv</code>, which these become
+the tables <code>EMPS</code>, <code>DEPTS</code> and <code>SDEPTS</code>.
 
 ## Tables and views in schemas
 
@@ -480,16 +480,15 @@ sqlline> explain plan for select name from emps;
 +-----------------------------------------------------+
 | PLAN                                                |
 +-----------------------------------------------------+
-| EnumerableCalcRel(expr#0..9=[{inputs}], NAME=[$t1]) |
+| EnumerableCalc(expr#0..9=[{inputs}], NAME=[$t1])    |
 |   EnumerableTableScan(table=[[SALES, EMPS]])        |
 +-----------------------------------------------------+
 sqlline> !connect jdbc:calcite:model=src/test/resources/smart.json admin admin
 sqlline> explain plan for select name from emps;
 +-----------------------------------------------------+
 | PLAN                                                |
 +-----------------------------------------------------+
-| EnumerableCalcRel(expr#0..9=[{inputs}], NAME=[$t1]) |
-|   CsvTableScan(table=[[SALES, EMPS]])               |
+| CsvTableScan(table=[[SALES, EMPS]], fields=[[1]])   |
 +-----------------------------------------------------+
 {% endhighlight %}
 
diff --git a/site/_plugins/wrap_table.rb b/site/_plugins/wrap_table.rb
@@ -0,0 +1,24 @@
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to you under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+require 'nokogiri'
+
+Jekyll::Hooks.register [:pages, :documents], :post_render do |post|
+  if post.path.end_with?(".md")
+    doc = Nokogiri::HTML(post.output)
+    doc.search("table").wrap("<div class=\"scroll-table-style\">")
+    post.output = doc.to_html
+  end
+end
diff --git a/site/_sass/_style.scss b/site/_sass/_style.scss
@@ -705,13 +705,23 @@ blockquote {
 /* Tables */
 
 table {
+  /* Allow code inside tables to wrap when there is no space */
+  pre,
+  code {
+    white-space: pre-wrap;
+  }
   width: 100%;
   background-color: #555;
   margin: .5em 0;
   @include border-radius(5px);
   @include box-shadow(0 1px 3px rgba(0,0,0,.3));
 }
 
+/* The CSS class is added via _plugins/wrap_table.rb plugin to enable horizontal scrolling */
+.scroll-table-style {
+  overflow-x: auto;
+}
+
 thead {
   @include border-top-left-radius(5px);
   @include border-top-right-radius(5px);
