refactor

Added styles Fixed lifecycle method issues with the embeds Updated the backend SDK authentication methods Added embed explore Added dashboard external filters
llooker · Mar 17, 2021 · 67b0ca7 · 67b0ca7
1 parent 2da72c8
commit 67b0ca7
Show file tree

Hide file tree

Showing 18 changed files with 409 additions and 85 deletions.
diff --git a/backend/.env.example b/backend/.env.example
@@ -3,7 +3,7 @@
 PBL_PORT=3000
 
 LOOKERSDK_API_VERSION=4.0
-LOOKERSDK_BASE_URL=https://your-instance.looker.com
+LOOKERSDK_BASE_URL=https://your-instance.looker.com:19999
 LOOKERSDK_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxx
 LOOKERSDK_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxx
 # no protocol for this host

diff --git a/backend/config.js b/backend/config.js
@@ -29,7 +29,9 @@ config.authenticatedUser =
       "embed_browse_spaces"
     ],
     "models": ["reference_implementation"],
+    // "models": ["atom_fashion"],
     "user_attributes": { "locale": "en_US" }
+    // "user_attributes": { "brand":"Calvin Klein","locale": "en_US" }
   },
   user2: {
     "external_user_id": "user2",
@@ -39,12 +41,15 @@ config.authenticatedUser =
     "force_logout_login": true,
     "external_group_id": "group2",
     "group_ids": [],
+    //user2 has reduced permissions
     "permissions": [
       "access_data",
       "see_looks",
       "see_user_dashboards"
     ],
     "models": ["reference_implementation"],
+    // "models": ["atom_fashion"],
+    //user2 will be localized into a different language
     "user_attributes": { "locale": "es_US" }
   }
 }

diff --git a/backend/package.json b/backend/package.json
@@ -7,6 +7,7 @@
     "start": "node ./bin/www"
   },
   "dependencies": {
+    "@looker/sdk-node": "^21.0.9",
     "cookie-parser": "~1.4.4",
     "cors": "^2.8.5",
     "debug": "~2.6.9",

diff --git a/backend/routes/api.js b/backend/routes/api.js
@@ -1,10 +1,10 @@
 var express = require('express')
 var config = require('../config') 
 var router = express.Router()
-var NodeAPI = require('@looker/sdk/lib/node')
-var NodeSettings = require('@looker/sdk-rtl/lib/NodeSettings')
-var createSignedUrl = require('../auth/auth_utils')
+const { LookerNodeSDK } = require('@looker/sdk-node')
+const sdk = LookerNodeSDK.init40()
 
+var createSignedUrl = require('../auth/auth_utils')
 
 /*****************************************
  * Authentication                        *
@@ -41,7 +41,6 @@ router.post('/embed-user/:id/update', async (req, res) => {
  * Create a signed URL for embedding content
  */
 router.get('/auth', (req, res) => {
-  console.log(req.headers.usertoken);
   const src = req.query.src;
   const host = process.env.LOOKERSDK_EMBED_HOST // Might need to be different than API baseurl (port nums)
   const secret = process.env.LOOKERSDK_EMBED_SECRET
@@ -55,10 +54,6 @@ router.get('/auth', (req, res) => {
  * Backend Data API calls               *
  ****************************************/
 
-// Init the Looker SDK using environment variables
-// const sdk = NodeAPI.LookerNodeSDK.init40(new NodeSettings.NodeSettings());
-const sdk = NodeAPI.LookerNodeSDK.init40();
-
 /**
  * Get details of the current authenticated user
  */
@@ -97,9 +92,4 @@ router.get('/looks/:id', async (req, res, next) => {
   res.send(newQueryResults)
   });
 
-
-
-// test endpoint
-router.get('/test', (req, res, next) => res.send(config.api.testResponse))
-
 module.exports = router;
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
@@ -1,21 +1,24 @@
 <html>
 <head>
-  <title>REACT INDEX</title>
+  <title>Ref Implementation</title>
   <style>
     body {
       margin: 0;
     }
+
     .fullpage {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       width: 100vw;
       height: 100vh;
     }
+
     .topbar {
       /* Blue/900 */
       background: #174EA6;
-      height: 50px;
+      /* height: 50px; */
+      min-height: 50px;
       gap: 16px;
       width: 100%;
       color: white;
@@ -25,43 +28,147 @@
       flex-direction: row;
       align-items: center;
       padding: 0 16px;
+      z-index:1;
     }
+
     .home_title {
       font-size: 32px;
     }
+
     .sections {
       font-size: 16px;
     }
+
+    .dropdown {
+      position: relative;
+    }
+
+    .dropdown > ul {
+      list-style: none;
+    }
+
+    .dropdown > button {
+      font-family: inherit;
+      background-color: inherit;
+      color: inherit;
+      padding: 0;
+      font-size: 100%;
+      border: 0;
+    }
+
+    .dropdown .dropdown__title {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .dropdown .dropdown__title:after {
+      content: "";
+      border: 0.35rem solid transparent;
+      border-top-color: rgba(255, 255, 255, 0.45);
+      margin-left: 0.25em;
+      transform: translateY(0.15em);
+    }
+
+    .dropdown .dropdown__menu {
+      position: absolute;
+      min-width: 15ch;
+      left: 50%;
+      top: calc(100% - 0.25rem);
+      transition: 280ms all 120ms ease-out;
+      transform: rotateX(-90deg) translateX(-50%);
+      transform-origin: top center;
+      visibility: hidden;
+      opacity: 0.3;
+      padding: 0.5em 0;
+      background-color: #fff;
+      border-radius: 4px;
+      box-shadow: 0 0.15em 0.25em rgba(0, 0, 0, 0.25);
+    }
+
+    .dropdown .dropdown__menu a {
+      color: black;
+      display: block;
+      padding: 0.5em;
+      opacity: 0;
+      transition: 280ms all 120ms ease-out;
+      text-decoration: none;
+      /* font-size: 12; */
+    }
+
+    .dropdown .dropdown__menu a:hover {
+      background-color: #174EA633;
+    }
+
+    .dropdown .dropdown__menu a:focus {
+      outline: none;
+      background-color: #174EA633;
+    }
+
+    .dropdown:after {
+      content: "";
+      border: 0.5rem solid transparent;
+      border-bottom-color: #fff;
+      position: absolute;
+      top: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+      transition: 280ms all 120ms ease-out;
+      opacity: 0;
+      will-change: opacity;
+    }
+
+    .dropdown:hover .dropdown__title,
+    .dropdown:focus-within .dropdown__title {
+      border-top-color: pink;
+    }
+
+    .dropdown:hover .dropdown__menu,
+    .dropdown:focus-within .dropdown__menu {
+      opacity: 1;
+      transform: rotateX(0) translateX(-50%);
+      visibility: visible;
+    }
+
+    .dropdown:hover .dropdown__menu a,
+    .dropdown:focus-within .dropdown__menu a {
+      opacity: 1;
+    }
+
+    .dropdown:hover:after,
+    .dropdown:focus-within:after {
+      opacity: 1;
+    }
   </style>
 </head>
 
 <body>
   <div class="fullpage">
     <div class="topbar">
-      <div class="home_title">Acme Corp</div>
-      <div class="sections">Basics</div>
-      <div class="sections">Advanced</div>
-      <nav aria-label="Main Navigation">
-        <ul>
-          <li><a href="#">About</a></li>
-          <li class="dropdown">
-            <!-- aria-expanded needs managed with Javascript -->
-            <button type="button" class="dropdown__title" aria-expanded="false" aria-controls="sweets-dropdown">
-              Sweets
-            </button>
-            <ul class="dropdown__menu" id="sweets-dropdown">
-              <li><a href="#">Donuts</a></li>
-              <li><a href="#">Cupcakes</a></li>
-              <li><a href="#">Chocolate</a></li>
-              <li><a href="#">Bonbons</a></li>
-            </ul>
-          </li>
-          <li><a href="#">Order</a></li>
+      <div class="home_title"><a style="text-decoration:none; color:white;" href="/">Cyberdyne Systems</a></div>
+      <div class="sections dropdown">
+        <button type="button" class="dropdown__title" aria-expanded="false" aria-controls="basics-dropdown">Basics</button>
+        <ul class="dropdown__menu" id="basics-dropdown">
+          <li><a href="/examples/embed-sdk">Embed a Dash</a></li>
+          <li><a href="/examples/embed-look">Embed a Look</a></li>
+          <li><a href="/examples/embed-explore">Embed an Explore</a></li>
+          <li><a href="/examples/api-data-backend">Backend API</a></li>
+          <li><a href="/examples/cors">Frontend API I</a></li>
+          <li><a href="/examples/api-query-frontend">Frontend API II</a></li>
         </ul>
-      </nav>
+      </div>
+      <div class="sections dropdown">
+        <button type="button" class="dropdown__title" aria-expanded="false" aria-controls="advanced-dropdown">Advanced</button>
+        <ul class="dropdown__menu" id="advanced-dropdown">
+          <li><a href="/examples/dash-filters">Dashboard Filters</a></li>
+          <li><a href="/examples/embed-api">Embed + API</a></li>
+          <li><a href="/examples/d3-custom-vis">D3 Custom Vis</a></li>
+          <li><a href="/examples/embed-two">Embed Two Hosts</a></li>
+        </ul>
+      </div>
     </div>
     <div id="app" style="width:100%;"></div>
   </div>
   <script src="/pbl.bundle.js"></script>
 </body>
+
 </html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -8,8 +8,8 @@
   "dependencies": {
     "@looker/components": "^0.9.16",
     "@looker/embed-sdk": "^1.5.1",
-    "@looker/sdk": "^0.3.7-beta.4",
-    "@looker/sdk-rtl": "^0.3.7-beta.4",
+    "@looker/sdk": "^21.0.9",
+    "@looker/sdk-rtl": "^21.0.9",
     "d3-force": "^2.1.1",
     "d3-scale": "^3.2.3",
     "d3-scale-chromatic": "^2.0.0",

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -7,6 +7,8 @@ import CorsExample from './components/CorsExample'
 import DashboardExternalFilters from './components/DashboardExternalFilters'
 import D3CustomVis from './components/D3CustomVis'
 import EmbedTwoInstances from './components/EmbedTwoInstances'
+import EmbedExplore from './components/EmbedExplore'
+import DashFilters from './components/DashFilters'
 
 import {
   BrowserRouter as Router,
@@ -53,6 +55,14 @@ const params = {
     {
       text: 'Embed Two',
       url: '/examples/embed-two'
+    },
+    {
+      text: 'Embed Explore',
+      url: '/examples/embed-explore'
+    },
+    {
+      text: 'Dashboard w External Filters',
+      url: '/examples/dash-filters'
     }
   ]
 } 
@@ -91,6 +101,8 @@ function App() {
         <Route path='/examples/embed-dashboard-external-filters' component={DashboardExternalFilters} />
         <Route path='/examples/d3-custom-vis' component={D3CustomVis} />
         <Route path='/examples/embed-two' component={EmbedTwoInstances} />
+        <Route path='/examples/embed-explore' component={EmbedExplore} />
+        <Route path='/examples/dash-filters' component={DashFilters} />
       </Switch>
     </Router>
   )

diff --git a/frontend/src/components/ApiDataBackend/APIData.js b/frontend/src/components/ApiDataBackend/APIData.js
@@ -139,9 +139,9 @@ const FetchedLooks = (props) => {
 /**
  * Render the main page component
  */
-const APIData = () => {
+const APIData =  () => {
   const [user, setUser] = useState({});
-  const fetchUser = () => {
+  const fetchUser =  () => {
     fetch("/api/me")
       .then((res) => res.json())
       .then((user) => setUser(user));

diff --git a/frontend/src/components/CorsExample/CorsExampleComp.js b/frontend/src/components/CorsExample/CorsExampleComp.js
@@ -1,14 +1,21 @@
-import React from 'react'
+import React, {useEffect, useState} from 'react'
 import { sdk } from "../../helpers/CorsSessionHelper"
 
+const CorsExampleComp = () => {
+  const [user, setUser] = useState('');
+  useEffect(() => {
+    const apiCall = async () => {
+        const response = await sdk.ok(sdk.me())
+        setUser(response.display_name)
+    }
+    apiCall()
+  },[]);
 
 
-const CorsExampleComp = () => {
-  const me = sdk.ok(sdk.me())
   return (
     <>
-      <div className='stuff' style={{width: '100%', height: '100%'}}>
-        { me.display_name }
+      <div style={{width: '100%', height: '100%'}}>
+        {user}
       </div>
     </>
   )