diff --git a/frontend/src/components/sidebar/containers/Sidebar.js b/frontend/src/components/sidebar/containers/Sidebar.js
new file mode 100644
index 0000000..c3547cb
--- /dev/null
+++ b/frontend/src/components/sidebar/containers/Sidebar.js
@@ -0,0 +1,74 @@
+/*
+ * 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
new file mode 100644
index 0000000..860495b
--- /dev/null
+++ b/frontend/src/components/sidebar/containers/SidebarHome.js
@@ -0,0 +1,40 @@
+/*
+ * 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
new file mode 100644
index 0000000..4dd0009
--- /dev/null
+++ b/frontend/src/components/sidebar/containers/SidebarSetting.js
@@ -0,0 +1,48 @@
+/*
+ * 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
new file mode 100644
index 0000000..ccb6d02
--- /dev/null
+++ b/frontend/src/components/sidebar/presentations/Sidebar.jsx
@@ -0,0 +1,43 @@
+/*
+ * 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
new file mode 100644
index 0000000..fcc34a0
--- /dev/null
+++ b/frontend/src/components/sidebar/presentations/SidebarComponents.jsx
@@ -0,0 +1,78 @@
+/*
+ * 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
new file mode 100644
index 0000000..6521585
--- /dev/null
+++ b/frontend/src/components/sidebar/presentations/SidebarHome.jsx
@@ -0,0 +1,427 @@
+/*
+ * 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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faRedo, faTimes } from '@fortawesome/free-solid-svg-icons';
+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 refresh_button btn btn-link"
+            type="button"
+            onClick={() => refreshSidebarHome()}
+          >
+            <FontAwesomeIcon
+              icon={faRedo}
+              size="1x"
+              color="white"
+              flip="horizontal"
+            />
+          </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 close_session btn btn-link"
+            type="button"
+            color="#142B80"
+            onClick={() => confirm({
+              title: 'Are you sure you want to close this window?',
+              onOk() {
+                requestDisconnect();
+              },
+              onCancel() {
+                return false;
+              },
+            })}
+          >
+            <FontAwesomeIcon
+              icon={faTimes}
+              size="1x"
+              color="white"
+            />
+          </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
new file mode 100644
index 0000000..382b39f
--- /dev/null
+++ b/frontend/src/components/sidebar/presentations/SidebarSetting.jsx
@@ -0,0 +1,142 @@
+/*
+ * 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;