feat(#64): Create a facet panel for data exploration

app/package.json

@@ -47,6 +47,7 @@
     "eslint-plugin-vue": "^6.2.2",
     "jest-serializer-vue": "^2.0.2",
     "lint-staged": "^9.5.0",
+    "lodash": "^4.17.21",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
     "sinon": "^12.0.1",

app/src/App.vue

@@ -5,11 +5,5 @@
 </template>
 
 <style lang="scss">
-@import 'assets/css/style.scss';
-#app {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: $primary;
-  background-color: $primary-white;
-}
+  @import 'assets/css/style.scss';
 </style>

app/src/assets/css/base/_reset.scss

@@ -42,11 +42,12 @@ img {
     text-shadow: none;
 }
 
-#nanomine_app,
-#metamine_app {
+#app {
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     color: #2c3e50;
     background-color: white;
+    color: $primary;
+    background-color: $primary-white;
 }

app/src/assets/css/modules/_facet.scss

@@ -0,0 +1,86 @@
+.facet {
+    z-index: 9;
+    background-color: $primary-white;
+    border: 1px solid #d3d3d3;
+    text-align: center;
+    min-height: 60px;
+    min-width: 320px;
+    max-height: 500px;
+    max-width: 600px;
+    opacity: 0;
+
+    &_viewport {
+        width: 100%;
+        display: inline-block;
+        vertical-align: top;
+        overflow: auto;
+        border: 1px solid rgba(#000, .12);
+    }
+
+    &_active {
+        opacity: 0.8;
+    }
+}
+
+  /*Drgable */
+
+.facet {
+    position: absolute;
+    /*resize: both; !*enable this to css resize*! */
+    overflow: auto;
+}
+
+.md-subheader.facet-header {
+    min-height: 35px;
+    padding: 5px;
+    cursor: move;
+    z-index: 10;
+    background-color: $primary;
+    color: $primary-white !important;
+    font-weight: bold;
+    margin-bottom: .2rem;
+}
+
+/*Resizeable*/
+.facet .resizer-right {
+    width: 5px;
+    height: 100%;
+    background: transparent;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    cursor: e-resize;
+}
+
+.facet .resizer-bottom {
+    width: 100%;
+    height: 5px;
+    background: transparent;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    cursor: n-resize;
+}
+
+.facet .resizer-both {
+    width: 5px;
+    height: 5px;
+    background: transparent;
+    z-index: 10;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    cursor: nw-resize;
+}
+
+/*NOSELECT*/
+.facet * {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently
+                                    supported by Chrome and Opera */
+}
+

app/src/assets/css/modules/_form.scss

@@ -42,6 +42,31 @@
                 border: .15rem solid $tertiary;
             }
         }
+
+        &--flat {
+            border: none;
+            border-bottom: .15rem solid $primary-white;
+            font-size: inherit;
+            color: $primary-white;
+            background-color: transparent;
+            padding: .5rem .2rem;
+
+            &:focus {
+                border-bottom: .15rem solid $primary-white;
+                background-color: transparent;
+            }
+
+            &:focus:invalid {
+                border-bottom: .15rem solid $tertiary;
+            }
+            &::-webkit-input-placeholder {
+                color: $primary-white;
+            }
+
+            &-label {
+                color: $primary-white;
+            }
+        }
     }
 
 

app/src/assets/css/modules/_pages.scss

@@ -32,7 +32,7 @@
         }
         &_btn {
             display: block !important;
-            padding: 1.5rem 3.5rem !important;
+            padding: 1.65rem 3.5rem !important;
             font-size: 1.2rem;
             &:hover {
                 transform: translateY(0) !important;

app/src/assets/css/modules/_utility.scss

@@ -21,6 +21,9 @@
 }
 
 .u {
+    &_width--small {
+        width: 15rem;
+    }
     &--bg {
         background-color: $primary !important;
         color: $primary-white !important
@@ -83,8 +86,11 @@
     }
 
     &_margin-top {
+        &-small {
+            margin-top: 1rem !important;
+        }
         &-med {
-            margin-top: 3.1rem !important;
+            margin-top: 3.2rem !important;
         }
     }
 

app/src/assets/css/style.scss

@@ -4,6 +4,7 @@
 @import './base/_reset.scss';
 @import './base/_grid.scss';
 @import './modules/_button.scss';
+@import './modules/_facet.scss';
 @import './modules/_footer.scss';
 @import './modules/_form.scss';
 @import './modules/_header.scss';

app/src/components/explorer/Facet.vue

@@ -0,0 +1,21 @@
+<template>
+    <div :class="{facet: true, facet_active: searchEnabled}">
+        <div class="facet_viewport">
+            <md-list>
+                <md-subheader class="md-primary facet-header">Filter Panel</md-subheader>
+                <md-divider></md-divider>
+                <slot >Default Test</slot>
+            </md-list>
+        </div>
+    </div>
+</template>
+<script>
+import Facet from '@/modules/facet.js'
+export default {
+  name: 'FacetPanel',
+  props: ['searchEnabled'],
+  mounted () {
+    Facet()
+  }
+}
+</script>

app/src/components/explorer/Header.vue

@@ -3,17 +3,18 @@
     <md-app-toolbar class="md-large md-dense md-primary" id="reset_bg">
       <div class="md-toolbar-row">
         <div class="md-toolbar-section-start">
-          <md-button class="md-icon-button" @click="toggleMenu">
+          <md-button class="md-icon-button" @click="toggler">
             <md-icon>menu</md-icon>
           </md-button>
 
           <span class="md-title"><img id="logo" src="@/assets/img/materialsmine_logo_sm.png"></span>
         </div>
 
         <div class="md-toolbar-section-end">
-          <!-- <md-button class="md-icon-button">
-            <md-icon>more_vert</md-icon>
-          </md-button> -->
+          <div class="u_margin-top-small u_width--small u_margin-right-small" v-if="searchEnabled">
+            <input type="text" class="form__input form__input--flat" placeholder="Searching..." name="search" id="search" v-model="searchTerm"  />
+            <label htmlFor="search" class="form__label form__input--flat-label">Searching...</label>
+          </div>
           <md-badge id="header-badge" class="md-primary" md-content="12">
             <md-avatar>
               <img src="@/assets/img/brinson.jpeg" alt="Avatar">
@@ -36,9 +37,20 @@
 export default {
   name: 'ExpHeader',
   props: ['toggler'],
-  methods: {
-    toggleMenu () {
-      this.toggler()
+  computed: {
+    searchTerm: {
+      get () {
+        return this.$store.getters['explorer/getSearchKeyword']
+      },
+      set (payload) {
+        this.$store.commit('explorer/setSearchKeyword', payload)
+        if (!payload) {
+          this.$store.commit('explorer/setSearching')
+        }
+      }
+    },
+    searchEnabled () {
+      return this.$store.getters['explorer/getSearching']
     }
   }
 }

app/src/components/nanomine/Drawers.vue

@@ -46,7 +46,6 @@
                 <md-icon class="utility-navfonticon">view_comfy</md-icon>
                 <span class="md-list-item-text utility-navfont">Visualize</span>
                 <md-list slot="md-expand">
-                    <md-list-item class="md-inset">Browse Data</md-list-item>
                     <md-list-item class="md-inset">Chart Gallery</md-list-item>
                     <md-list-item class="md-inset">Image Gallery</md-list-item>
                 </md-list>