You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@age.apache.org by em...@apache.org on 2022/01/04 06:54:29 UTC

[incubator-age-viewer] branch main updated: Remove `google_poppins`, `fontello` dependencies.

This is an automated email from the ASF dual-hosted git repository.

emotionbug pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-age-viewer.git


The following commit(s) were added to refs/heads/main by this push:
     new 4d6fa19  Remove `google_poppins`, `fontello` dependencies.
4d6fa19 is described below

commit 4d6fa193cb29d8c9e17abe03c044e8af2001b458
Author: Alex Kwak <ta...@kakao.com>
AuthorDate: Tue Jan 4 15:53:56 2022 +0900

    Remove `google_poppins`, `fontello` dependencies.
    
    Image containing the copyright of Fontello was not used. so, removed and replaced in the form of SVG.
---
 frontend/src/App.jsx                               |   2 -
 .../components/contents/presentations/Editor.jsx   |  10 +-
 .../src/components/cytoscape/CypherResultTab.jsx   |   3 +-
 frontend/src/components/frame/Frame.jsx            |   9 +-
 .../src/components/sidebar/containers/Sidebar.js   |  74 ----
 .../components/sidebar/containers/SidebarHome.js   |  40 --
 .../sidebar/containers/SidebarSetting.js           |  48 ---
 .../components/sidebar/presentations/Sidebar.jsx   |  43 ---
 .../sidebar/presentations/SidebarComponents.jsx    |  78 ----
 .../sidebar/presentations/SidebarHome.jsx          | 415 ---------------------
 .../sidebar/presentations/SidebarSetting.jsx       | 142 -------
 frontend/src/icons/EdgeWeight.jsx                  |  11 +
 frontend/src/icons/IconFilter.jsx                  |  11 +
 frontend/src/icons/IconGraph.jsx                   |   9 +
 frontend/src/icons/IconPlay.jsx                    |   9 +
 frontend/src/icons/IconSearchCancel.jsx            |   9 +
 frontend/src/static/google-Poppins.css             |  43 ---
 frontend/src/static/icons/css/fontello.css         |  84 -----
 frontend/src/static/icons/font/fontello.eot        | Bin 9348 -> 0 bytes
 frontend/src/static/icons/font/fontello.svg        |  45 ---
 frontend/src/static/icons/font/fontello.ttf        | Bin 9180 -> 0 bytes
 frontend/src/static/icons/font/fontello.woff       | Bin 5444 -> 0 bytes
 frontend/src/static/icons/font/fontello.woff2      | Bin 4616 -> 0 bytes
 frontend/src/static/style.css                      |  54 ++-
 24 files changed, 108 insertions(+), 1031 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index abb1e8e..09ea03b 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -22,8 +22,6 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import 'antd/dist/antd.css';
 import './static/style.css';
 import './static/navbar-fixed-left.css';
-import './static/google-Poppins.css';
-import './static/icons/css/fontello.css';
 import MainPage from './pages/Main/MainPage';
 
 const App = () => (
diff --git a/frontend/src/components/contents/presentations/Editor.jsx b/frontend/src/components/contents/presentations/Editor.jsx
index 0180431..3c14533 100644
--- a/frontend/src/components/contents/presentations/Editor.jsx
+++ b/frontend/src/components/contents/presentations/Editor.jsx
@@ -21,10 +21,13 @@ import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import uuid from 'react-uuid';
 import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import AlertContainers from '../../alert/containers/AlertContainers';
 import CodeMirror from '../../editor/containers/CodeMirrorWapperContainer';
 import SideBarToggle from '../../editor/containers/SideBarMenuToggleContainer';
 import { setting } from '../../../conf/config';
+import IconPlay from '../../../icons/IconPlay';
 
 const Editor = ({
   setCommand,
@@ -147,7 +150,10 @@ const Editor = ({
                 />
               </button> */}
               <button className={command ? 'btn show-eraser' : 'btn hide-eraser'} type="button" id="eraser" onClick={() => clearCommand()}>
-                <i className="icon-eraser" />
+                <FontAwesomeIcon
+                  icon={faTimesCircle}
+                  size="1x"
+                />
               </button>
               <button
                 className="frame-head-button btn btn-link"
@@ -155,7 +161,7 @@ const Editor = ({
                 onClick={() => onClick()}
                 title="Run Query"
               >
-                <i className="icon-play" />
+                <IconPlay />
               </button>
               <button
                 className="frame-head-button btn btn-link"
diff --git a/frontend/src/components/cytoscape/CypherResultTab.jsx b/frontend/src/components/cytoscape/CypherResultTab.jsx
index 6d68a9b..e2e6285 100644
--- a/frontend/src/components/cytoscape/CypherResultTab.jsx
+++ b/frontend/src/components/cytoscape/CypherResultTab.jsx
@@ -22,6 +22,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTable } from '@fortawesome/free-solid-svg-icons';
+import IconGraph from '../../icons/IconGraph';
 
 class CypherResultTab extends Component {
   constructor(props) {
@@ -56,7 +57,7 @@ class CypherResultTab extends Component {
           style={{ width: '50%', fontSize: '14px', color: this.currentTab === 'graph' ? '#142B80' : '#495057' }}
           onClick={() => activeTab(this.refKey, 'graph')}
         >
-          <i className="icon-graph" style={{ fontSize: '25px' }} />
+          <IconGraph />
           <br />
           <b style={{ fontSize: '14px;' }}>Graph</b>
         </button>
diff --git a/frontend/src/components/frame/Frame.jsx b/frontend/src/components/frame/Frame.jsx
index ddfb700..aa585fa 100644
--- a/frontend/src/components/frame/Frame.jsx
+++ b/frontend/src/components/frame/Frame.jsx
@@ -27,6 +27,9 @@ import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import styles from './Frame.module.scss';
 import { removeFrame } from '../../features/frame/FrameSlice';
+import EdgeWeight from '../../icons/EdgeWeight';
+import IconFilter from '../../icons/IconFilter';
+import IconSearchCancel from '../../icons/IconSearchCancel';
 
 const Frame = ({
   reqString, children, refKey,
@@ -71,7 +74,7 @@ const Frame = ({
                 title="Edge Weight"
                 onClick={() => onThick()}
               >
-                <i className="icon-edge-weight" />
+                <EdgeWeight />
               </Button>
             </Popover>
           ) : null }
@@ -83,7 +86,7 @@ const Frame = ({
               onClick={() => onSearchCancel()}
               title="Cancel Search"
             >
-              <i className="icon-search-cancel" />
+              <IconSearchCancel />
             </Button>
           ) : null}
           {onSearch ? (
@@ -94,7 +97,7 @@ const Frame = ({
               onClick={() => onSearch()}
               title="Filter/Search"
             >
-              <i className="icon-filter" />
+              <IconFilter />
             </Button>
           ) : null}
           {/* {false ? ( // en:Functionality is hidden due to */}
diff --git a/frontend/src/components/sidebar/containers/Sidebar.js b/frontend/src/components/sidebar/containers/Sidebar.js
deleted file mode 100644
index c3547cb..0000000
--- a/frontend/src/components/sidebar/containers/Sidebar.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
- * 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.
- */
-
-import { connect } from 'react-redux';
-import Sidebar from '../presentations/Sidebar';
-
-const mapStateToProps = (state) => ({
-  activeMenuName: state.navigator.activeMenu,
-  isActive: state.navigator.isActive,
-});
-
-/*
-const  mapDispatchToProps = (dispatch) => {
-    return {
-        onThemeChange: function(e) {
-            const selectedTheme = e.target.value
-            dispatch({type: 'CHANGE_THEME', theme : selectedTheme})
-        }
-    }
-}
-*/
-
-const mapDispatchToProps = {};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Sidebar);
-
-/*
-import React, {Component} from 'react'
-import store from '../../../app/store'
-class SidebarContainer extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {navigator : store.getState().navigator}
-    }
-
-    componentDidMount() {
-        store.subscribe(function() {
-            this.setState({navigator : store.getState().navigator});
-        }.bind(this));
-    }
-
-    changeTheme = (e) => {
-        console.log(e);
-        const selectedTheme = e.target.value
-        store.dispatch({type: 'CHANGE_THEME', theme : selectedTheme})
-    }
-
-    render() {
-        const activeMenu  = this.state.navigator.activeMenu
-        return (
-            <Sidebar activeMenuName={activeMenu} onThemeChange={this.changeTheme} />
-        );
-    }
-
-}
-
-export default SidebarContainer
-*/
diff --git a/frontend/src/components/sidebar/containers/SidebarHome.js b/frontend/src/components/sidebar/containers/SidebarHome.js
deleted file mode 100644
index 860495b..0000000
--- a/frontend/src/components/sidebar/containers/SidebarHome.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * 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.
- */
-
-import { connect } from 'react-redux';
-import SidebarHome from '../presentations/SidebarHome';
-import { setCommand } from '../../../features/editor/EditorSlice';
-import { addFrame, trimFrame } from '../../../features/frame/FrameSlice';
-import { getMetaData } from '../../../features/database/MetadataSlice';
-
-const mapStateToProps = (state) => ({
-  edges: state.metadata.edges,
-  nodes: state.metadata.nodes,
-  propertyKeys: state.metadata.propertyKeys,
-  dbname: state.metadata.dbname,
-  graph: state.metadata.graph,
-  role: state.metadata.role,
-  command: state.editor.command,
-});
-
-const mapDispatchToProps = {
-  setCommand, addFrame, trimFrame, getMetaData,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(SidebarHome);
diff --git a/frontend/src/components/sidebar/containers/SidebarSetting.js b/frontend/src/components/sidebar/containers/SidebarSetting.js
deleted file mode 100644
index 4dd0009..0000000
--- a/frontend/src/components/sidebar/containers/SidebarSetting.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * 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.
- */
-
-import { connect } from 'react-redux';
-import {
-  changeMaxDataOfGraph,
-  changeMaxDataOfTable,
-  changeMaxNumOfFrames,
-  changeMaxNumOfHistories,
-  changeTheme,
-  resetSetting,
-} from '../../../features/setting/SettingSlice';
-import SidebarSetting from '../presentations/SidebarSetting';
-
-const mapStateToProps = (state) => ({
-  theme: state.setting.theme,
-  maxNumOfFrames: state.setting.maxNumOfFrames,
-  maxNumOfHistories: state.setting.maxNumOfHistories,
-  maxDataOfGraph: state.setting.maxDataOfGraph,
-  maxDataOfTable: state.setting.maxDataOfTable,
-});
-
-const mapDispatchToProps = {
-  changeTheme,
-  changeMaxNumOfFrames,
-  changeMaxNumOfHistories,
-  changeMaxDataOfGraph,
-  changeMaxDataOfTable,
-  resetSetting,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(SidebarSetting);
diff --git a/frontend/src/components/sidebar/presentations/Sidebar.jsx b/frontend/src/components/sidebar/presentations/Sidebar.jsx
deleted file mode 100644
index ccb6d02..0000000
--- a/frontend/src/components/sidebar/presentations/Sidebar.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * 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.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import SidebarHome from '../containers/SidebarHome';
-import SidebarSetting from '../containers/SidebarSetting';
-
-const Sidebar = ({ activeMenuName, isActive }) => (
-  <div id="sidebar" className={isActive ? ' active ' : 'inactive'}>
-    <div className="tab-content">
-      <div className={`tab-pane fade${activeMenuName === 'home' ? ' active show ' : ''}`} role="tabpanel" aria-labelledby="side-home-tab">
-        <SidebarHome />
-      </div>
-      <div className={`tab-pane fade${activeMenuName === 'setting' ? ' active show ' : ''}`} role="tabpanel" aria-labelledby="side-setting-tab">
-        <SidebarSetting />
-      </div>
-    </div>
-  </div>
-);
-
-Sidebar.propTypes = {
-  activeMenuName: PropTypes.string.isRequired,
-  isActive: PropTypes.bool.isRequired,
-};
-
-export default Sidebar;
diff --git a/frontend/src/components/sidebar/presentations/SidebarComponents.jsx b/frontend/src/components/sidebar/presentations/SidebarComponents.jsx
deleted file mode 100644
index fcc34a0..0000000
--- a/frontend/src/components/sidebar/presentations/SidebarComponents.jsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- * 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.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const StyleTextRight = {
-  marginBottom: '10px', textAlign: 'right', fontSize: '13px', fontWeight: 'bold',
-};
-const StyleTextLeft = { fontSize: '13px', fontWeight: 'bold' };
-
-export const ColoredLine = () => (
-  <hr
-    style={{
-      color: '#B0B0B0',
-      backgroundColor: '#B0B0B0',
-      marginTop: 0,
-      height: 0.3,
-    }}
-  />
-);
-
-export const VerticalLine = () => (
-  <div
-    style={{
-      backgroundColor: '#C4C4C4',
-      width: '1px',
-      height: '120px',
-      marginTop: '37px',
-      marginBottom: '37px',
-    }}
-  />
-);
-
-const SubLabelRight = ({ label, classes }) => (
-  <div className={classes} style={StyleTextRight}>{label}</div>
-);
-SubLabelRight.propTypes = {
-  classes: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-};
-
-const SubLabelLeft = ({ label, classes }) => (
-  <div className={classes} style={StyleTextLeft}>{label}</div>
-);
-SubLabelLeft.propTypes = {
-  classes: PropTypes.string.isRequired,
-  label: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element,
-  ]).isRequired,
-};
-
-const SubLabelLeftWithLink = ({ label, classes }) => (
-  <div className={classes} style={StyleTextLeft}><pre>{label}</pre></div>
-);
-SubLabelLeftWithLink.propTypes = {
-  classes: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-};
-
-export { SubLabelRight, SubLabelLeft, SubLabelLeftWithLink };
diff --git a/frontend/src/components/sidebar/presentations/SidebarHome.jsx b/frontend/src/components/sidebar/presentations/SidebarHome.jsx
deleted file mode 100644
index 78a84e5..0000000
--- a/frontend/src/components/sidebar/presentations/SidebarHome.jsx
+++ /dev/null
@@ -1,415 +0,0 @@
-/*
- * 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.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Modal } from 'antd';
-import uuid from 'react-uuid';
-import { connect, useDispatch } from 'react-redux';
-import { VerticalLine, SubLabelLeft, SubLabelRight } from './SidebarComponents';
-
-const genLabelQuery = (eleType, labelName, database) => {
-  function age() {
-    if (eleType === 'node') {
-      if (labelName === '*') {
-        return `SELECT * from cypher('${database.graph}', $$
-          MATCH (V)
-          RETURN V
-$$) as (V agtype);`;
-      }
-      return `SELECT * from cypher('${database.graph}', $$
-          MATCH (V:${labelName})
-          RETURN V
-$$) as (V agtype);`;
-    }
-    if (eleType === 'edge') {
-      if (labelName === '*') {
-        return `SELECT * from cypher('${database.graph}', $$
-          MATCH (V)-[R]-(V2)
-          RETURN V,R,V2
-$$) as (V agtype, R agtype, V2 agtype);`;
-      }
-      return `SELECT * from cypher('${database.graph}', $$
-          MATCH (V)-[R:${labelName}]-(V2)
-          RETURN V,R,V2
-$$) as (V agtype, R agtype, V2 agtype);`;
-    }
-    return '';
-  }
-  function agens() {
-    if (eleType === 'node') {
-      if (labelName === '*') {
-        return 'MATCH (V) RETURN V';
-      }
-      return `MATCH (V) WHERE LABEL(V) = '${labelName}' RETURN V`;
-    }
-    if (eleType === 'edge') {
-      if (labelName === '*') {
-        return 'MATCH (V)-[R]->(V2) RETURN *';
-      }
-      return `MATCH (V)-[R]->(V2) WHERE LABEL(R) = '${labelName}' RETURN *`;
-    }
-    return '';
-  }
-  if (database.flavor === 'AGE') {
-    return age();
-  }
-  if (database.flavor === 'AGENS') {
-    return agens();
-  }
-  return '';
-};
-
-const genPropQuery = (eleType, propertyName) => {
-  if (eleType === 'v') {
-    return `MATCH (V) WHERE V.${propertyName} IS NOT NULL RETURN V`;
-  }
-  if (eleType === 'e') {
-    return `MATCH (V)-[R]->(V2) WHERE R.${propertyName} IS NOT NULL RETURN *`;
-  }
-  return '';
-};
-
-const NodeList = ({ nodes, setCommand }) => {
-  let list;
-  if (nodes) {
-    list = nodes.map((item) => (
-      <NodeItems
-        key={uuid()}
-        label={item.label}
-        cnt={item.cnt}
-        setCommand={setCommand}
-      />
-    ));
-    return (
-      <div style={{
-        display: 'flex',
-        flexWrap: 'wrap',
-        height: '80px',
-        overflowY: 'auto',
-        marginTop: '12px',
-      }}
-      >
-        {list}
-      </div>
-    );
-  }
-
-  return null;
-};
-NodeList.propTypes = {
-  nodes: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    cnt: PropTypes.number,
-  })).isRequired,
-  setCommand: PropTypes.func.isRequired,
-};
-
-const NodeItems = connect((state) => ({
-  database: state.database,
-}), {})(
-  ({
-    label, cnt, setCommand, database,
-  }) => (
-    <button
-      type="button"
-      className="node-item"
-      onClick={() => setCommand(genLabelQuery('node', label, database))}
-    >
-      {label}
-      (
-      {cnt}
-      )
-    </button>
-  ),
-);
-NodeItems.propTypes = {
-  database: PropTypes.shape({
-    flavor: PropTypes.string,
-  }).isRequired,
-  label: PropTypes.string.isRequired,
-  cnt: PropTypes.number.isRequired,
-  setCommand: PropTypes.func.isRequired,
-};
-
-const EdgeList = ({ edges, setCommand }) => {
-  let list;
-  if (edges) {
-    list = edges.map((item) => (
-      <EdgeItems
-        key={uuid()}
-        label={item.label}
-        cnt={item.cnt}
-        setCommand={setCommand}
-      />
-    ));
-    return (
-      <div style={{
-        display: 'flex',
-        flexWrap: 'wrap',
-        height: '80px',
-        overflowY: 'auto',
-        marginTop: '12px',
-      }}
-      >
-        {list}
-      </div>
-    );
-  }
-
-  return null;
-};
-EdgeList.propTypes = {
-  edges: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    cnt: PropTypes.number,
-  })).isRequired,
-  setCommand: PropTypes.func.isRequired,
-};
-
-const EdgeItems = connect((state) => ({
-  database: state.database,
-}), {})(({
-  label, cnt, setCommand, database,
-}) => (
-  <button
-    type="button"
-    className="edge-item"
-    onClick={() => setCommand(genLabelQuery('edge', label, database))}
-  >
-    {label}
-    (
-    {cnt}
-    )
-  </button>
-));
-EdgeItems.propTypes = {
-  database: PropTypes.shape({
-    flavor: PropTypes.string,
-  }).isRequired,
-  label: PropTypes.string.isRequired,
-  cnt: PropTypes.number.isRequired,
-  setCommand: PropTypes.func.isRequired,
-};
-
-const PropertyList = ({ propertyKeys, setCommand }) => {
-  let list;
-  if (propertyKeys) {
-    list = propertyKeys.map((item) => (
-      <PropertyItems
-        key={uuid()}
-        propertyName={item.key}
-        keyType={item.key_type}
-        setCommand={setCommand}
-      />
-    ));
-    return (
-      <div style={{
-        display: 'flex',
-        flexWrap: 'wrap',
-        height: '80px',
-        overflowY: 'auto',
-        marginTop: '12px',
-      }}
-      >
-        {list}
-      </div>
-    );
-  }
-
-  return null;
-};
-PropertyList.propTypes = {
-  propertyKeys: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string,
-    key_type: PropTypes.string,
-  })).isRequired,
-  setCommand: PropTypes.func.isRequired,
-};
-
-const PropertyItems = ({ propertyName, keyType, setCommand }) => (
-  <button
-    type="button"
-    className={`${keyType === 'v' ? 'propertie-item' : 'propertie-item'} propertie-item`}
-    onClick={() => setCommand(genPropQuery(keyType, propertyName))}
-  >
-    {propertyName}
-  </button>
-);
-PropertyItems.propTypes = {
-  propertyName: PropTypes.string.isRequired,
-  keyType: PropTypes.string.isRequired,
-  setCommand: PropTypes.func.isRequired,
-};
-
-const ConnectedText = ({ userName, roleName }) => (
-  <div>
-    <h6>
-      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-        <SubLabelRight label="Username :" classes="col-sm-6" />
-        <SubLabelLeft label={userName} classes="col-sm-6" />
-      </div>
-      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-        <SubLabelRight label="Roles :" classes="col-sm-6" />
-        <SubLabelLeft label={roleName} classes="col-sm-6" />
-      </div>
-    </h6>
-  </div>
-);
-
-ConnectedText.propTypes = {
-  userName: PropTypes.string.isRequired,
-  roleName: PropTypes.string.isRequired,
-};
-
-const DBMSText = ({ dbname, graph }) => (
-  <div>
-    <h6>
-      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-        <SubLabelRight label="Databases :" classes="col-sm-6" />
-        <SubLabelLeft label={dbname} classes="col-sm-6" />
-      </div>
-      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-        <SubLabelRight label="Graph Path :" classes="col-sm-6" />
-        <SubLabelLeft label={graph} classes="col-sm-6" />
-      </div>
-      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-        <SubLabelRight label="Information :" classes="col-sm-6" />
-        <SubLabelLeft label="-" classes="col-sm-6" />
-      </div>
-      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-        <SubLabelRight label="Query List :" classes="col-sm-6" />
-        <SubLabelLeft label="-" classes="col-sm-6" />
-      </div>
-    </h6>
-  </div>
-);
-
-DBMSText.propTypes = {
-  dbname: PropTypes.string.isRequired,
-  graph: PropTypes.string.isRequired,
-};
-
-const SidebarHome = ({
-  edges,
-  nodes,
-  propertyKeys,
-  setCommand,
-  command,
-  trimFrame,
-  addFrame,
-  getMetaData,
-}) => {
-  const dispatch = useDispatch();
-  const { confirm } = Modal;
-
-  const requestDisconnect = () => {
-    const refKey = uuid();
-    dispatch(() => trimFrame('ServerDisconnect'));
-    dispatch(() => addFrame(command, 'ServerDisconnect', refKey));
-  };
-
-  const refreshSidebarHome = () => {
-    getMetaData();
-  };
-
-  return (
-    <div className="sidebar-home">
-      <div className="sidebar sidebar-body">
-        <div className="form-group sidebar-item">
-          <b>Node Label</b>
-          <br />
-          <NodeList nodes={nodes} setCommand={setCommand} />
-        </div>
-        <VerticalLine />
-        <div className="form-group sidebar-item">
-          <b>Edge Label</b>
-          <br />
-          <EdgeList edges={edges} setCommand={setCommand} />
-        </div>
-        <VerticalLine />
-        <div className="form-group sidebar-item">
-          <b>Properties</b>
-          <br />
-          <PropertyList propertyKeys={propertyKeys} setCommand={setCommand} />
-        </div>
-        <VerticalLine />
-        <div className="form-group sidebar-item-disconnect">
-          <button
-            className="frame-head-button btn btn-link"
-            type="button"
-            onClick={() => refreshSidebarHome()}
-          >
-            <i className="icon-refresh" />
-          </button>
-          <br />
-          <b>Refresh</b>
-          <div style={{
-            border: '1px solid #C4C4C4',
-            opacity: '1',
-            width: '80%',
-            height: '0',
-            margin: '3px auto',
-          }}
-          />
-          <button
-            className="frame-head-button btn btn-link"
-            type="button"
-            onClick={() => confirm({
-              title: 'Are you sure you want to close this window?',
-              onOk() {
-                requestDisconnect();
-              },
-              onCancel() {
-                return false;
-              },
-            })}
-          >
-            <i className="icon-close-session" />
-          </button>
-          <br />
-          <b>Close Session</b>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-SidebarHome.propTypes = {
-  edges: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    cnt: PropTypes.number,
-  })).isRequired,
-  nodes: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    cnt: PropTypes.number,
-  })).isRequired,
-  propertyKeys: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string,
-    key_type: PropTypes.string,
-  })).isRequired,
-  setCommand: PropTypes.func.isRequired,
-  command: PropTypes.string.isRequired,
-  trimFrame: PropTypes.func.isRequired,
-  addFrame: PropTypes.func.isRequired,
-  getMetaData: PropTypes.func.isRequired,
-};
-
-export default SidebarHome;
diff --git a/frontend/src/components/sidebar/presentations/SidebarSetting.jsx b/frontend/src/components/sidebar/presentations/SidebarSetting.jsx
deleted file mode 100644
index 382b39f..0000000
--- a/frontend/src/components/sidebar/presentations/SidebarSetting.jsx
+++ /dev/null
@@ -1,142 +0,0 @@
-/*
- * 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.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ColoredLine, SubLabelLeft } from './SidebarComponents';
-import { saveToCookie } from '../../../features/cookie/CookieUtil';
-
-const SidebarSetting = ({
-  theme,
-  maxNumOfFrames,
-  maxNumOfHistories,
-  maxDataOfGraph,
-  maxDataOfTable,
-  changeTheme,
-  changeMaxNumOfFrames,
-  changeMaxNumOfHistories,
-  changeMaxDataOfGraph,
-  changeMaxDataOfTable,
-  resetSetting,
-}) => (
-  <div className="sidebar-setting">
-    <div className="sidebar sidebar-header">
-      <h4>Configuration</h4>
-    </div>
-    <div className="sidebar sidebar-body">
-      <div className="form-group">
-        <b>Themes</b>
-        <ColoredLine />
-        <select
-          className="form-control theme-switcher"
-          value={theme}
-          onChange={(e) => [saveToCookie('theme', e.target.value), changeTheme(e)]}
-        >
-          <option value="default">Default</option>
-          <option value="dark">Dark</option>
-        </select>
-      </div>
-      <div className="form-group pt-4">
-        <b>Frames</b>
-        <ColoredLine />
-        <fieldset className="form-group">
-          <SubLabelLeft label="Maximum Number of Frames:" classes="py-1" />
-          <input
-            type="number"
-            className="form-control"
-            id="maxFrames"
-            name="maxFrames"
-            min="0"
-            value={maxNumOfFrames}
-            onChange={(e) => [saveToCookie('maxNumOfFrames', e.target.value), changeMaxNumOfFrames(parseInt(e.target.value, 10))]}
-          />
-        </fieldset>
-        <fieldset className="form-group">
-          <SubLabelLeft label="Max Number of Histories:" classes="py-1" />
-          <input
-            type="number"
-            className="form-control"
-            id="maxHistories"
-            name="maxHistories"
-            value={maxNumOfHistories}
-            min="0"
-            onChange={(e) => [saveToCookie('maxNumOfHistories', e.target.value), changeMaxNumOfHistories(parseInt(e.target.value, 10))]}
-          />
-        </fieldset>
-      </div>
-      <div className="form-group pt-4">
-        <b>Data Display</b>
-        <ColoredLine />
-        <fieldset className="form-group">
-          <SubLabelLeft label="Maximum Data of Graph Visualization" classes="py-1" />
-          <input
-            type="number"
-            className="form-control"
-            id="maxGraphData"
-            name="maxGraphData"
-            value={maxDataOfGraph.toString()}
-            min="0"
-            onChange={(e) => [saveToCookie('maxDataOfGraph', e.target.value), changeMaxDataOfGraph(parseInt(e.target.value, 10))]}
-          />
-        </fieldset>
-        <fieldset className="form-group">
-          <SubLabelLeft label="Maximum Data of Table Display" classes="py-1" />
-          <input
-            type="number"
-            className="form-control"
-            id="maxTableData"
-            name="maxTableData"
-            value={maxDataOfTable}
-            min="0"
-            onChange={(e) => [saveToCookie('maxDataOfTable', e.target.value), changeMaxDataOfTable(parseInt(e.target.value, 10))]}
-          />
-        </fieldset>
-      </div>
-      <div className="form-group pt-4">
-        <fieldset className="form-group">
-          <button
-            type="button"
-            className="btn btn-info btn-sm btn-block"
-            onClick={() => [
-              resetSetting(),
-            ]}
-          >
-            Reset Configuration
-          </button>
-        </fieldset>
-      </div>
-    </div>
-  </div>
-);
-
-SidebarSetting.propTypes = {
-  theme: PropTypes.string.isRequired,
-  maxNumOfFrames: PropTypes.number.isRequired,
-  maxNumOfHistories: PropTypes.number.isRequired,
-  maxDataOfGraph: PropTypes.number.isRequired,
-  maxDataOfTable: PropTypes.number.isRequired,
-  changeTheme: PropTypes.func.isRequired,
-  changeMaxNumOfFrames: PropTypes.func.isRequired,
-  changeMaxNumOfHistories: PropTypes.func.isRequired,
-  changeMaxDataOfGraph: PropTypes.func.isRequired,
-  changeMaxDataOfTable: PropTypes.func.isRequired,
-  resetSetting: PropTypes.func.isRequired,
-};
-
-export default SidebarSetting;
diff --git a/frontend/src/icons/EdgeWeight.jsx b/frontend/src/icons/EdgeWeight.jsx
new file mode 100644
index 0000000..efce909
--- /dev/null
+++ b/frontend/src/icons/EdgeWeight.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const EdgeWeight = (props) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <svg fill="currentcolor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32" {...props}>
+    <path
+      d="M0 15.68v2.72c0.063 0.51 0.494 0.901 1.017 0.901 0.036 0 0.072-0.002 0.108-0.006l-0.004 0h29.728c0.031 0.003 0.067 0.005 0.103 0.005 0.522 0 0.953-0.391 1.016-0.896l0-0.005v-2.72c-0.048-0.525-0.486-0.933-1.020-0.933-0.035 0-0.070 0.002-0.104 0.005l0.004-0h-29.728c-0.030-0.003-0.065-0.005-0.1-0.005-0.533 0-0.972 0.408-1.020 0.929l-0 0.004zM0.032 7.296v1.408c0.049 0.471 0.444 0.835 0.923 0.835 0.024 0 0.048-0.001 0.072-0.003l-0.003 0h29.984c0.021 0.002 0.045 0.003 0.069 0.003 0.48 [...]
+    />
+  </svg>
+);
+export default EdgeWeight;
diff --git a/frontend/src/icons/IconFilter.jsx b/frontend/src/icons/IconFilter.jsx
new file mode 100644
index 0000000..a822e1d
--- /dev/null
+++ b/frontend/src/icons/IconFilter.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const IconFilter = (props) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <svg fill="currentcolor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32" {...props}>
+    <path
+      d="M30.048 9.408c-0.352-0.192-0.704-0.352-1.12-0.416-1.408-0.256-2.944-0.512-4.448-0.736-0.608-0.064-1.248-0.096-1.888-0.128-0.288-0.032-0.544-0.032-0.832-0.064l-0.864-0.064v2.496l0.768 0.032c0.864 0 1.728 0.064 2.56 0.16-1.088 0.128-2.208 0.224-3.328 0.288-4.416 0.256-8.896 0.16-13.312-0.256 0.96-0.128 1.92-0.192 2.912-0.224l0.8-0.032-0.128-2.496-0.832 0.064c-0.448 0.032-0.896 0.064-1.344 0.096-0.992 0.096-2.016 0.16-3.008 0.32-1.184 0.16-2.336 0.448-3.488 0.8-0.8 0.224-1.088 0.70 [...]
+    />
+  </svg>
+);
+export default IconFilter;
diff --git a/frontend/src/icons/IconGraph.jsx b/frontend/src/icons/IconGraph.jsx
new file mode 100644
index 0000000..a368c33
--- /dev/null
+++ b/frontend/src/icons/IconGraph.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const IconGraph = (props) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <svg fill="currentcolor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 32 32" {...props}>
+    <path d="M27.488 10.464c2.464 0 4.48-2.016 4.48-4.48s-2.016-4.512-4.48-4.512-4.48 2.016-4.48 4.512c0 0.48 0.096 0.96 0.256 1.44l-3.84 2.912c-0.928-0.608-2.016-0.96-3.232-0.96-1.088 0-2.144 0.288-3.008 0.832l-3.296-3.84c0.256-0.576 0.416-1.184 0.416-1.856 0-2.496-2.016-4.512-4.512-4.512s-4.48 2.016-4.48 4.512 2.016 4.48 4.48 4.48c0.832 0 1.6-0.224 2.272-0.64l3.168 3.712c-0.576 0.928-0.928 2.016-0.928 3.2 0 0.64 0.096 1.248 0.288 1.824l-3.936 3.008c-0.64-0.384-1.376-0.608-2.176-0.608-2 [...]
+  </svg>
+);
+export default IconGraph;
diff --git a/frontend/src/icons/IconPlay.jsx b/frontend/src/icons/IconPlay.jsx
new file mode 100644
index 0000000..a1b09cb
--- /dev/null
+++ b/frontend/src/icons/IconPlay.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const IconPlay = (props) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <svg fill="currentcolor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32" {...props}>
+    <path d="M29.152 13.92c-0.352-0.576-0.864-1.056-1.376-1.408l-18.944-11.936c-1.248-0.736-2.816-0.768-4.128-0.032-1.28 0.736-2.080 2.080-2.080 3.552v23.776c0 1.472 0.8 2.848 2.080 3.616 0.608 0.352 1.312 0.512 2.016 0.512 0.032 0 0.032 0 0.032 0 0.736 0 1.44-0.16 2.144-0.576l18.816-11.872c1.952-1.184 2.592-3.68 1.44-5.632zM21.12 16.032l-12 7.584v-15.2l12 7.616z" />
+  </svg>
+);
+export default IconPlay;
diff --git a/frontend/src/icons/IconSearchCancel.jsx b/frontend/src/icons/IconSearchCancel.jsx
new file mode 100644
index 0000000..9a2b338
--- /dev/null
+++ b/frontend/src/icons/IconSearchCancel.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const IconSearchCancel = (props) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <svg fill="currentcolor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32" {...props}>
+    <path d="M24.064 0c-1.85 0.008-3.346 1.509-3.346 3.36 0 0.204 0.018 0.403 0.053 0.596l-0.003-0.020-2.304 1.088c-0.611-0.699-1.501-1.141-2.494-1.152l-0.002-0c-0.995 0.011-1.885 0.453-2.493 1.148l-0.003 0.004-2.272-1.088c0.035-0.183 0.055-0.393 0.055-0.608 0-1.856-1.504-3.36-3.36-3.36s-3.36 1.504-3.36 3.36c0 1.847 1.491 3.347 3.335 3.36h0.001c0.006 0 0.014 0 0.022 0 0.779 0 1.496-0.265 2.066-0.71l-0.007 0.006 2.688 1.28c0.018 1.831 1.497 3.31 3.326 3.328h0.002c1.831-0.018 3.31-1.497 3. [...]
+  </svg>
+);
+export default IconSearchCancel;
diff --git a/frontend/src/static/google-Poppins.css b/frontend/src/static/google-Poppins.css
deleted file mode 100644
index 4647525..0000000
--- a/frontend/src/static/google-Poppins.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * 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.
- */
-
-/* devanagari */
-@font-face {
-  font-family: 'Poppins';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v13/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
-  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Poppins';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v13/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Poppins';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v13/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
diff --git a/frontend/src/static/icons/css/fontello.css b/frontend/src/static/icons/css/fontello.css
deleted file mode 100644
index 7c4d3e8..0000000
--- a/frontend/src/static/icons/css/fontello.css
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * 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.
- */
-
-@font-face {
-  font-family: 'fontello';
-  src: url('../font/fontello.eot?12833378');
-  src: url('../font/fontello.eot?12833378#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?12833378') format('woff2'),
-       url('../font/fontello.woff?12833378') format('woff'),
-       url('../font/fontello.ttf?12833378') format('truetype'),
-       url('../font/fontello.svg?12833378#fontello') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
-/*
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-  @font-face {
-    font-family: 'fontello';
-    src: url('../font/fontello.svg?12833378#fontello') format('svg');
-  }
-}
-*/
-
- [class^="icon-"]:before, [class*=" icon-"]:before {
-  font-family: "fontello";
-  font-style: normal;
-  font-weight: normal;
-  speak: never;
-
-  display: inline-block;
-  text-decoration: inherit;
-  width: 1em;
-  margin-right: .2em;
-  text-align: center;
-  /* opacity: .8; */
-
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
-
-  /* fix buttons height, for twitter bootstrap */
-  line-height: 1em;
-
-  /* Animation center compensation - margins should be symmetric */
-  /* remove if not needed */
-  margin-left: .2em;
-
-  /* you can be more comfortable with increased icons size */
-  /* font-size: 120%; */
-
-  /* Font smoothing. That was taken from TWBS */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Uncomment for 3D effect */
-  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
-}
-
-.icon-eraser:before { content: '\e800'; }
-.icon-filter:before { content: '\e801'; font-size: 24px; }
-.icon-graph:before { content: '\e802'; }
-.icon-play:before { content: '\e803'; font-size: 30px; }
-.icon-close-session:before { content: '\e804'; font-size: 30px; color: #142B80; }
-.icon-refresh:before { content: '\e805'; font-size: 30px; color: #18CCC5; }
-.icon-search-cancel:before { content: '\e806'; font-size: 24px; }
-.icon-edge-weight:before { content: '\e807'; font-size: 24px;}
diff --git a/frontend/src/static/icons/font/fontello.eot b/frontend/src/static/icons/font/fontello.eot
deleted file mode 100644
index 76dc8f9..0000000
Binary files a/frontend/src/static/icons/font/fontello.eot and /dev/null differ
diff --git a/frontend/src/static/icons/font/fontello.svg b/frontend/src/static/icons/font/fontello.svg
deleted file mode 100644
index b6b2a39..0000000
--- a/frontend/src/static/icons/font/fontello.svg
+++ /dev/null
@@ -1,45 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!--
-  - 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.
-  -->
-
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2021 by original authors @ fontello.com</metadata>
-<defs>
-<font id="fontello" horiz-adv-x="1000" >
-<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
-<missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="eraser" unicode="&#xe800;" d="M499 850c-276 0-500-224-500-500s224-500 500-500 500 224 500 500l0 0c0 276-224 500-500 500z m-156-278l156-156 157 156 65-66-156-156 156-156-66-66-156 156-156-156-65 66 156 156-156 156 65 66z" horiz-adv-x="1000" />
-
-<glyph glyph-name="filter" unicode="&#xe801;" d="M939 556c-11 6-22 11-35 13-44 8-92 16-139 23-19 2-39 3-59 4-9 1-17 1-26 2l-27 2v-78l24-1c27 0 54-2 80-5-34-4-69-7-104-9-138-8-278-5-416 8 30 4 60 6 91 7l25 1-4 78-26-2c-14-1-28-2-42-3-31-3-63-5-94-10-37-5-73-14-109-25-25-7-34-22-37-33-3-12-3-30 17-52 109-120 218-241 326-361 2-2 2-4 3-7 1-56 1-107 0-153-3-27 11-53 35-66 25-13 52-24 80-33 18-4 36-6 54-6 3 0 6 0 10 0 14 0 49 5 49 52l1 36c0 55 1 110 1 166 0 5 1 11 6 16 109 120 218 240 326 360  [...]
-
-<glyph glyph-name="graph" unicode="&#xe802;" d="M859 523c77 0 140 63 140 140s-63 141-140 141-140-63-140-141c0-15 3-30 8-45l-120-91c-29 19-63 30-101 30-34 0-67-9-94-26l-103 120c8 18 13 37 13 58 0 78-63 141-141 141s-140-63-140-141 63-140 140-140c26 0 50 7 71 20l99-116c-18-29-29-63-29-100 0-20 3-39 9-57l-123-94c-20 12-43 19-68 19-78 0-141-63-141-141s63-140 141-140 140 63 140 140c0 22-5 42-14 61l109 83c34-34 80-55 131-55 27 0 52 5 74 15l114-132c-17-23-27-52-27-82 0-78 63-141 140-141s141 63 1 [...]
-
-<glyph glyph-name="play" unicode="&#xe803;" d="M911 415c-11 18-27 33-43 44l-583 367-9 6c-39 23-88 24-129 1-40-23-65-65-65-111v-743c0-46 25-89 65-113 19-11 41-16 63-16 1 0 1 0 1 0 23 0 45 5 67 18l588 371c61 37 81 115 45 176z m-251-66l-375-237v475l375-238z" horiz-adv-x="1000" />
-
-<glyph glyph-name="close-session" unicode="&#xe804;" d="M864 850h-728a136 136 0 0 1-136-136v-728a136 136 0 0 1 136-136h728a136 136 0 0 1 136 136v728a136 136 0 0 1-136 136z m-129-736a54 54 0 0 0-75 1l-160 160-160-160-1-1a53 53 0 0 0-74 77l160 159-160 160a53 53 0 0 0 75 76l160-160 160 160a53 53 0 0 0 75 0l2-1a53 53 0 0 0-2-75l-159-160 159-160 2-1a54 54 0 0 0-2-75z" horiz-adv-x="1000" />
-
-<glyph glyph-name="refresh" unicode="&#xe805;" d="M864 850h-728a136 136 0 0 1-136-136v-728a136 136 0 0 1 136-136h728a136 136 0 0 1 136 136v728a136 136 0 0 1-136 136z m-154-706a268 268 0 0 0-182-99 270 270 0 0 0-297 226l0 0a49 49 0 0 0 96 15 172 172 0 1 1 187 199v-56l0-1a19 19 0 0 0-29-13l-1 1-142 104a18 18 0 0 0-3 4 18 18 0 0 0 3 25l143 104a19 19 0 0 0 29-12l0-1v-57a270 270 0 0 0 196-439z" horiz-adv-x="1000" />
-
-<glyph glyph-name="search-cancel" unicode="&#xe806;" d="M752 850a105 105 0 0 1-103-123l-72-34a105 105 0 0 1-78 36h0a105 105 0 0 1-78-36l-71 34a105 105 0 1 1-104-86h0a105 105 0 0 1 65 22l84-40a105 105 0 0 1 104-104h0a105 105 0 0 1 104 104l84 40a105 105 0 0 1 65-22h0a105 105 0 0 1 0 209z m-506-135a30 30 0 1 0 31 30 30 30 0 0 0-31-30z m253-121a30 30 0 1 0 30 30v0a30 30 0 0 0-30-30z m253 121a30 30 0 1 0 31 30v0a30 30 0 0 0-31-30z m76-420a234 234 0 1 1 133-211 234 234 0 0 1-133 211z m49-319l- [...]
-
-<glyph glyph-name="edge-weight" unicode="&#xe807;" d="M0 360v-85a32 32 0 0 1 35-28h929a32 32 0 0 1 35 28v85a32 32 0 0 1-35 29h-929a32 32 0 0 1-35-29z m1 262v-44a29 29 0 0 1 31-26h937a29 29 0 0 1 31 26v44a29 29 0 0 1-31 25h-937a29 29 0 0 1-31-25z m-1-598v-142a36 36 0 0 1 39-32h921a36 36 0 0 1 39 32v142a36 36 0 0 1-39 32h-921a36 36 0 0 1-39-32z m0 802v-10a27 27 0 0 1 29-24h941a27 27 0 0 1 29 24v10a27 27 0 0 1-29 24h-941a27 27 0 0 1-29-24z" horiz-adv-x="1000" />
-</font>
-</defs>
-</svg>
diff --git a/frontend/src/static/icons/font/fontello.ttf b/frontend/src/static/icons/font/fontello.ttf
deleted file mode 100644
index c74fc93..0000000
Binary files a/frontend/src/static/icons/font/fontello.ttf and /dev/null differ
diff --git a/frontend/src/static/icons/font/fontello.woff b/frontend/src/static/icons/font/fontello.woff
deleted file mode 100644
index 85262f2..0000000
Binary files a/frontend/src/static/icons/font/fontello.woff and /dev/null differ
diff --git a/frontend/src/static/icons/font/fontello.woff2 b/frontend/src/static/icons/font/fontello.woff2
deleted file mode 100644
index c5dad89..0000000
Binary files a/frontend/src/static/icons/font/fontello.woff2 and /dev/null differ
diff --git a/frontend/src/static/style.css b/frontend/src/static/style.css
index d9b1718..1261c8f 100644
--- a/frontend/src/static/style.css
+++ b/frontend/src/static/style.css
@@ -213,14 +213,14 @@ a[data-toggle="collapse"] {
 .editor-code-wrapper{
     margin-top: 1px;
     min-height: 60px;
-    padding: 0px;
+    padding: 0;
     resize: vertical;
     overflow: auto;
     border: 1px solid;
 }
 
-.editor-button-wrapper{
-    margin-left: -60px !important;
+.editor-button-wrapper {
+    margin-left: -50px !important;
     height: 60px;
 }
 
@@ -410,7 +410,7 @@ a.nav-link.active {
 }
 
 .alert {
-    margin-bottom: 0px;
+    margin-bottom: 0;
 }
 
 .chart-frame-area {
@@ -460,8 +460,8 @@ a.nav-link.active {
 }
 
 .graph-tabpanel {
-    padding-left: 0px !important;
-    padding-right: 0px !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
 }
 
 .nodeLegend, .edgeLegend {
@@ -502,7 +502,7 @@ a.nav-link.active {
 .colorSelector {
     width: 15px;
     height: 15px;
-    padding: 6px 0px;
+    padding: 6px 0;
     border-radius: 15px;
     font-size: 8px;
     text-align: center;
@@ -522,7 +522,7 @@ a.nav-link.active {
 
 .sizeSelector.node {
     background-color: darkgrey;
-    padding: 6px 0px;
+    padding: 6px 0;
     border-radius: 15px;
     font-size: 8px;
     text-align: center;
@@ -532,7 +532,7 @@ a.nav-link.active {
 
 .sizeSelector.edge {
     background-color: darkgrey;
-    padding: 6px 0px;
+    padding: 6px 0;
     font-size: 8px;
     text-align: center;
     margin-left: 5px;
@@ -598,14 +598,14 @@ a.nav-link.active {
 }
 
 .carousel-inner {
-    margin: 0px 25px 10px 25px;
+    margin: 0 25px 10px 25px;
     width: initial;
     height: 100%;
     overflow:auto;
 }
 
 .carousel-indicators {
-    bottom: 0px;
+    bottom: 0;
 }
 
 .carousel-indicators li {
@@ -682,3 +682,35 @@ textarea.editorTextarea
 .layout-select {
     margin-top: .15rem !important;
 }
+
+.close_session {
+    background-color: #142B80;
+    display: inline-block;
+    cursor: pointer;
+    color: #ffffff;
+    text-decoration: none;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    margin: 5px 0;
+}
+.close_session:active {
+    position:relative;
+    top:1px;
+}
+
+.refresh_button {
+    background-color: #18CCC5;
+    display: inline-block;
+    cursor: pointer;
+    color: #ffffff;
+    text-decoration: none;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    margin: 5px 0;
+}
+.refresh_button:active {
+    position:relative;
+    top:1px;
+}