Merge pull request #2214 from finos/workspace-2-update

Update `perspective-workspace` design
finos · May 6, 2023 · 78268e2 · 78268e2
2 parents e89ae0a + 87b8c88
commit 78268e2
Show file tree

Hide file tree

Showing 51 changed files with 565 additions and 399 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,3 +1,11 @@
 {
-  "tabWidth": 4
+    "tabWidth": 4,
+    "overrides": [
+        {
+            "files": ["*.html"],
+            "options": {
+                "printWidth": 200
+            }
+        }
+    ]
 }
diff --git a/examples/blocks/src/evictions/layout.json b/examples/blocks/src/evictions/layout.json
@@ -14,5 +14,10 @@
         "// bucket lon\nvar x[2];\nindexof(\"shape\", ' .+?( )', x);\nvar y := substring(\"shape\", 7, x[1] - 7);\nbucket(float(y), 0.0025) + 0.00125",
         "// bucket lat\nvar x[2];\nindexof(\"shape\", ' .+?( )', x);\nvar y := substring(\"shape\", x[0], length(\"shape\") - x[1]);\nbucket(float(y), 0.0025) + 0.00125"
     ],
-    "aggregates": { "lon": "avg", "bucket lon": "avg", "bucket lat": "avg" }
+    "aggregates": {
+        "lon": "avg",
+        "lat": "avg",
+        "bucket lon": "avg",
+        "bucket lat": "avg"
+    }
 }
diff --git a/examples/blocks/src/fractal/index.css b/examples/blocks/src/fractal/index.css
@@ -50,7 +50,7 @@ perspective-viewer[theme="Pro Dark"] {
 span,
 input,
 button {
-    font-family: "Open Sans";
+    font-family: "Roboto Mono";
     font-size: 12px;
     background: none;
     margin: 0px;

diff --git a/examples/blocks/src/movies/index.html b/examples/blocks/src/movies/index.html
@@ -1,32 +1,15 @@
 <html>
     <head>
-        <meta
-            name="viewport"
-            content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
-        />
+        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
 
-        <link
-            rel="stylesheet"
-            crossorigin="anonymous"
-            href="/node_modules/@finos/perspective-workspace/dist/css/pro-dark.css"
-        />
+        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/pro-dark.css" />
+        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-workspace/dist/css/pro-dark.css" />
 
-        <script
-            type="module"
-            src="/node_modules/@finos/perspective-workspace/dist/cdn/perspective-workspace.js"
-        ></script>
-        <script
-            type="module"
-            src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"
-        ></script>
-        <script
-            type="module"
-            src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"
-        ></script>
-        <script
-            type="module"
-            src="/node_modules/@finos/perspective/dist/cdn/perspective.js"
-        ></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-workspace/dist/cdn/perspective-workspace.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective/dist/cdn/perspective.js"></script>
 
         <style>
             body {
@@ -43,56 +26,11 @@
             }
 
             perspective-viewer {
-                --d3fc-positive--gradient: linear-gradient(
-                    #94d0ff,
-                    #8795e8,
-                    #966bff,
-                    #ad8cff,
-                    #c774e8,
-                    #c774a9,
-                    #ff6ad5,
-                    #ff6a8b,
-                    #ff8b8b,
-                    #ffa58b,
-                    #ffde8b,
-                    #cdde8b,
-                    #8bde8b,
-                    #20de8b
-                ) !important;
+                --d3fc-positive--gradient: linear-gradient(#94d0ff, #8795e8, #966bff, #ad8cff, #c774e8, #c774a9, #ff6ad5, #ff6a8b, #ff8b8b, #ffa58b, #ffde8b, #cdde8b, #8bde8b, #20de8b) !important;
 
-                --d3fc-negative--gradient: linear-gradient(
-                    #94d0ff,
-                    #8795e8,
-                    #966bff,
-                    #ad8cff,
-                    #c774e8,
-                    #c774a9,
-                    #ff6ad5,
-                    #ff6a8b,
-                    #ff8b8b,
-                    #ffa58b,
-                    #ffde8b,
-                    #cdde8b,
-                    #8bde8b,
-                    #20de8b
-                ) !important;
+                --d3fc-negative--gradient: linear-gradient(#94d0ff, #8795e8, #966bff, #ad8cff, #c774e8, #c774a9, #ff6ad5, #ff6a8b, #ff8b8b, #ffa58b, #ffde8b, #cdde8b, #8bde8b, #20de8b) !important;
 
-                --d3fc-full--gradient: linear-gradient(
-                    #94d0ff,
-                    #8795e8,
-                    #966bff,
-                    #ad8cff,
-                    #c774e8,
-                    #c774a9,
-                    #ff6ad5,
-                    #ff6a8b,
-                    #ff8b8b,
-                    #ffa58b,
-                    #ffde8b,
-                    #cdde8b,
-                    #8bde8b,
-                    #20de8b
-                ) !important;
+                --d3fc-full--gradient: linear-gradient(#94d0ff, #8795e8, #966bff, #ad8cff, #c774e8, #c774a9, #ff6ad5, #ff6a8b, #ff8b8b, #ffa58b, #ffde8b, #cdde8b, #8bde8b, #20de8b) !important;
             }
         </style>
     </head>
@@ -131,9 +69,7 @@
                 const response = await request;
                 const json = await response.json();
                 for (const row of json) {
-                    row["Release Date"] = row["Release Date"]
-                        ? new Date(row["Release Date"]) || null
-                        : null;
+                    row["Release Date"] = row["Release Date"] ? new Date(row["Release Date"]) || null : null;
                 }
                 const table = await worker.table(SCHEMA);
                 table.update(json);

diff --git a/examples/blocks/src/superstore/index.html b/examples/blocks/src/superstore/index.html
@@ -1,16 +1,11 @@
 <html>
     <head>
-        <meta
-            name="viewport"
-            content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
-        />
+        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
 
-        <link
-            rel="stylesheet"
-            crossorigin="anonymous"
-            href="/node_modules/@finos/perspective-workspace/dist/css/pro.css"
-        />
+        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/pro.css" />
+        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-workspace/dist/css/pro.css" />
 
+        <script src="/node_modules/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
         <script src="/node_modules/@finos/perspective-workspace/dist/umd/perspective-workspace.js"></script>
         <script src="/node_modules/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>
         <script src="/node_modules/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
@@ -32,10 +27,7 @@
         </style>
     </head>
     <body>
-        <perspective-workspace id="workspace">
-            <perspective-viewer table="superstore"></perspective-viewer>
-        </perspective-workspace>
-
+        <perspective-workspace id="workspace"></perspective-workspace>
         <script>
             const DATA_URL = "/node_modules/superstore-arrow/superstore.arrow";
 

diff --git a/examples/blocks/src/superstore/layout.json b/examples/blocks/src/superstore/layout.json
@@ -32,7 +32,8 @@
             "master": false,
             "name": "Sales Report",
             "table": "superstore",
-            "linked": false
+            "linked": false,
+            "title": "Sales Report 2"
         },
         "PERSPECTIVE_GENERATED_ID_1": {
             "plugin": "datagrid",
@@ -79,7 +80,7 @@
                 }
             },
             "master": false,
-            "name": "Sales Report (by State)",
+            "title": "Sales Report (by State)",
             "table": "superstore",
             "linked": false
         }

diff --git a/packages/perspective-jupyterlab/package.json b/packages/perspective-jupyterlab/package.json
@@ -50,7 +50,7 @@
         "@finos/perspective-esbuild-plugin": "^2.0.1",
         "@finos/perspective-test": "^2.0.1",
         "@jupyterlab/builder": "^3.4.0",
-        "@prospective.co/procss": "^0.1.12",
+        "@prospective.co/procss": "^0.1.13",
         "cpy": "^9.0.1"
     },
     "jupyterlab": {

diff --git a/packages/perspective-viewer-d3fc/package.json b/packages/perspective-viewer-d3fc/package.json
@@ -62,6 +62,6 @@
     "devDependencies": {
         "@finos/perspective-esbuild-plugin": "^2.0.1",
         "@finos/perspective-test": "^2.0.1",
-        "@prospective.co/procss": "^0.1.12"
+        "@prospective.co/procss": "^0.1.13"
     }
 }
diff --git a/packages/perspective-viewer-datagrid/package.json b/packages/perspective-viewer-datagrid/package.json
@@ -39,7 +39,7 @@
         "regular-table": "=0.5.6"
     },
     "devDependencies": {
-        "@prospective.co/procss": "^0.1.12",
+        "@prospective.co/procss": "^0.1.13",
         "@finos/perspective-esbuild-plugin": "^2.0.1",
         "@finos/perspective-test": "^2.0.1"
     }

diff --git a/packages/perspective-workspace/build.js b/packages/perspective-workspace/build.js
@@ -110,17 +110,36 @@ async function build_all() {
         builder3.compile().get("injected.css")
     );
 
-    const builder = new BuildCss("");
-    add(builder, "@finos/perspective-viewer/dist/css/pro.css");
+    const builder = new BuildCss("./src/themes");
+    add(
+        builder,
+        "fonts.less",
+        "@finos/perspective-viewer/src/themes/fonts.less"
+    );
+
+    add(builder, "@finos/perspective-viewer/src/themes/pro.less");
     add(builder, "pro.scss", "./src/themes/pro.less");
     add(builder, "pro2.scss", "./src/themes/pro.less");
     fs.writeFileSync("dist/css/pro.css", builder.compile().get("pro2.css"));
 
-    const builder2 = new BuildCss("");
-    add(builder2, "@finos/perspective-viewer/dist/css/pro.css");
-    add(builder2, "@finos/perspective-viewer/dist/css/pro-dark.css");
+    const builder2 = new BuildCss("./src/themes");
+    add(
+        builder2,
+        "fonts.less",
+        "@finos/perspective-viewer/src/themes/fonts.less"
+    );
+    add(builder2, "@finos/perspective-viewer/src/themes/pro.less");
     add(builder2, "@finos/perspective-viewer/src/themes/variables.less");
-    add(builder2, "pro.less", "./src/themes/pro.less");
+    add(
+        builder2,
+        "pro.less",
+        "@finos/perspective-workspace/src/themes/pro.less"
+    );
+    add(
+        builder2,
+        "pro-dark-viewer.less",
+        "@finos/perspective-viewer/src/themes/pro-dark.less"
+    );
     add(builder2, "pro-dark2.scss", "./src/themes/pro-dark.less");
     fs.writeFileSync(
         "dist/css/pro-dark.css",

diff --git a/packages/perspective-workspace/package.json b/packages/perspective-workspace/package.json
@@ -53,7 +53,7 @@
         "lodash": "^4.17.4"
     },
     "devDependencies": {
-        "@prospective.co/procss": "^0.1.12",
+        "@prospective.co/procss": "^0.1.13",
         "@finos/perspective-esbuild-plugin": "^2.0.1",
         "@finos/perspective-test": "^2.0.1"
     }