Remove `google_poppins`, `fontello` dependencies.
Image containing the copyright of Fontello was not used. so, removed and replaced in the form of SVG.
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 '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 { 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 @@
/>
</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 @@
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 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 @@
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 { 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 @@
title="Edge Weight"
onClick={() => onThick()}
>
- <i className="icon-edge-weight" />
+ <EdgeWeight />
</Button>
</Popover>
) : null }
@@ -83,7 +86,7 @@
onClick={() => onSearchCancel()}
title="Cancel Search"
>
- <i className="icon-search-cancel" />
+ <IconSearchCancel />
</Button>
) : null}
{onSearch ? (
@@ -94,7 +97,7 @@
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 0 0.874-0.364 0.923-0.831l0-0.004v-1.408c-0.064-0.456-0.451-0.803-0.92-0.803-0.026 0-0.051 0.001-0.076 0.003l0.003-0h-29.984c-0.022-0.002-0.047-0.003-0.072-0.003-0.468 0-0.856 0.347-0.919 0.798l-0.001 0.005zM0 26.432v4.544c0.064 0.581 0.553 1.029 1.145 1.029 0.036 0 0.072-0.002 0.107-0.005l-0.005 0h29.472c0.031 0.003 0.067 0.005 0.103 0.005 0.593 0 1.081-0.448 1.145-1.023l0-0.005v-4.544c-0.064-0.581-0.553-1.029-1.145-1.029-0.036 0-0.072 0.002-0.107 0.005l0.005-0h-29.472c-0.031-0.003-0.067-0.005-0.103-0.005-0.593 0-1.081 0.448-1.145 1.023l-0 0.005zM0 0.768v0.32c0.049 0.435 0.415 0.771 0.859 0.771 0.024 0 0.048-0.001 0.072-0.003l-0.003 0h30.112c0.021 0.002 0.045 0.003 0.069 0.003 0.444 0 0.81-0.335 0.859-0.767l0-0.004v-0.32c-0.049-0.435-0.415-0.771-0.859-0.771-0.024 0-0.048 0.001-0.072 0.003l0.003-0h-30.112c-0.021-0.002-0.045-0.003-0.069-0.003-0.444 0-0.81 0.335-0.859 0.767l-0 0.004z"
+ />
+ </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.704-1.184 1.056-0.096 0.384-0.096 0.96 0.544 1.664 3.488 3.84 6.976 7.712 10.432 11.552 0.064 0.064 0.064 0.128 0.096 0.224 0.032 1.792 0.032 3.424 0 4.896-0.096 0.864 0.352 1.696 1.12 2.112 0.8 0.416 1.664 0.768 2.56 1.056 0.576 0.128 1.152 0.192 1.728 0.192 0.096 0 0.192 0 0.32 0 0.448 0 1.568-0.16 1.568-1.664l0.032-1.152c0-1.76 0.032-3.52 0.032-5.312 0-0.16 0.032-0.352 0.192-0.512 3.488-3.84 6.976-7.68 10.432-11.52 0.192-0.16 0.288-0.32 0.384-0.512 0.32-0.736 0-1.568-0.704-1.92zM17.824 22.048c-0.384 0.384-0.576 0.928-0.576 1.44 0.032 1.312 0 2.656 0 3.968v2.112c-0.032 0-0.032-0.032-0.064-0.032-0.704-0.224-1.504-0.48-2.368-0.8v-0.096c0.032-1.728 0.032-3.488 0.032-5.248-0.032-0.448-0.192-0.896-0.512-1.248-2.72-3.040-5.44-6.080-8.192-9.088 6.592 0.672 13.248 0.672 19.84 0-0.288 0.32-0.576 0.64-0.864 0.96-2.464 2.688-4.864 5.376-7.296 8.032zM7.936 6.752c0 0 0 0 0 0 0.736 0 1.504-0.256 2.080-0.704l2.688 1.28c0 1.856 1.504 3.328 3.36 3.328s3.36-1.504 3.36-3.36c0-0.032 0-0.096 0-0.096l2.88-1.536c0.608 0.672 1.504 1.088 2.432 1.088 0 0 0 0 0 0 0.928 0 1.76-0.352 2.4-0.992s0.96-1.504 0.96-2.4c0-0.352-0.032-0.672-0.16-0.992-0.288-0.896-0.8-1.376-0.8-1.376-0.64-0.64-1.504-0.992-2.4-0.992 0 0 0 0 0 0-0.896 0-1.76 0.352-2.368 0.992s-0.992 1.504-0.992 2.368c0 0.032 0 0.064 0 0.096l-2.88 1.536c-0.64-0.672-1.504-1.056-2.432-1.056-0.992 0-1.92 0.416-2.528 1.12l-2.304-1.088c0.128-0.608 0.064-1.248-0.192-1.824-0.32-0.832-0.96-1.504-1.792-1.856-0.416-0.192-0.864-0.256-1.312-0.256-1.888 0-3.392 1.504-3.392 3.36s1.536 3.36 3.392 3.36zM7.936 2.432c0.544 0 0.96 0.416 0.96 0.96s-0.416 0.992-0.96 0.992c-0.544 0-0.992-0.448-0.992-0.992s0.448-0.96 0.992-0.96zM15.104 7.296c0-0.544 0.448-0.96 0.96-0.96 0.544 0 0.992 0.416 0.992 0.96s-0.448 0.992-0.992 0.992c-0.512-0.032-0.96-0.448-0.96-0.992zM25.728 3.36c0 0.256-0.064 0.48-0.224 0.64l-0.064 0.064c-0.192 0.192-0.416 0.288-0.704 0.288 0 0 0 0 0 0-0.512 0-0.96-0.448-0.96-0.992 0-0.512 0.448-0.96 0.96-0.96 0 0 0 0 0 0 0.576 0 0.992 0.448 0.992 0.96z"
+ />
+ </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.496 0-4.512 2.016-4.512 4.512s2.016 4.48 4.512 4.48 4.48-2.016 4.48-4.48c0-0.704-0.16-1.344-0.448-1.952l3.488-2.656c1.088 1.088 2.56 1.76 4.192 1.76 0.864 0 1.664-0.16 2.368-0.48l3.648 4.224c-0.544 0.736-0.864 1.664-0.864 2.624 0 2.496 2.016 4.512 4.48 4.512s4.512-2.016 4.512-4.512-2.048-4.48-4.512-4.48c-0.512 0-0.992 0.096-1.472 0.256l-3.616-4.256c0.832-1.024 1.376-2.336 1.376-3.776 0-1.088-0.32-2.080-0.832-2.976l3.552-2.688c0.736 0.544 1.664 0.864 2.656 0.864zM27.488 4.16c0.992 0 1.792 0.832 1.792 1.824s-0.8 1.792-1.792 1.792-1.792-0.8-1.792-1.792 0.8-1.824 1.792-1.824zM5.792 6.304c-0.992 0-1.792-0.8-1.792-1.792s0.8-1.824 1.792-1.824 1.824 0.832 1.824 1.824-0.8 1.792-1.824 1.792zM4.48 25.792c-1.024 0-1.824-0.8-1.824-1.792s0.8-1.824 1.824-1.824 1.792 0.832 1.792 1.824-0.8 1.792-1.792 1.792zM16.192 18.464c-1.76 0-3.2-1.44-3.2-3.2s1.44-3.232 3.2-3.232 3.232 1.44 3.232 3.232-1.44 3.2-3.232 3.2zM25.824 25.728c0.992 0 1.792 0.8 1.792 1.792s-0.8 1.824-1.792 1.824c-0.992 0-1.824-0.832-1.824-1.824 0.032-0.992 0.832-1.792 1.824-1.792z" />
+ </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.328-3.326v-0.002l2.688-1.28c0.562 0.439 1.279 0.704 2.058 0.704 0.008 0 0.015-0 0.023-0h-0.001c1.709-0.172 3.032-1.604 3.032-3.344s-1.323-3.172-3.018-3.343l-0.014-0.001zM7.872 4.32c-0.516-0.018-0.928-0.441-0.928-0.959 0-0.53 0.43-0.96 0.96-0.96s0.96 0.429 0.96 0.959v0c0 0 0 0 0 0.001 0 0.53-0.43 0.96-0.96 0.96-0.011 0-0.022-0-0.034-0.001l0.002 0zM15.968 8.192c-0.53 0-0.96-0.43-0.96-0.96s0.43-0.96 0.96-0.96c0.53 0 0.96 0.43 0.96 0.96v0 0c0 0.53-0.43 0.96-0.96 0.96v0zM24.064 4.32c-0.516-0.018-0.928-0.441-0.928-0.959 0-0.53 0.43-0.96 0.96-0.96s0.96 0.429 0.96 0.959v0c0 0 0 0 0 0.001 0 0.53-0.43 0.96-0.96 0.96-0.011 0-0.022-0-0.034-0.001l0.002 0zM26.496 17.76c-0.945-0.463-2.057-0.733-3.232-0.733-4.136 0-7.488 3.352-7.488 7.488s3.352 7.488 7.488 7.488c4.136 0 7.488-3.352 7.488-7.488 0-0.001 0-0.002 0-0.003v0c-0.001-2.96-1.719-5.518-4.212-6.732l-0.044-0.020zM28.064 27.968l-1.632 1.632-3.168-3.168-3.168 3.168-1.632-1.632 3.168-3.168-3.168-3.168 1.632-1.632 3.168 3.168 3.168-3.168 1.632 1.632-3.168 3.168zM13.536 24.512c-0-0.009-0-0.019-0-0.029 0-1.006 0.152-1.976 0.434-2.888l-0.018 0.069q-3.936-4.352-7.872-8.704c2.966 0.328 6.405 0.516 9.888 0.516s6.922-0.187 10.308-0.552l-0.42 0.037-0.864 0.96c-0.288 0.32-0.544 0.608-0.832 0.896 1.003 0.099 1.925 0.337 2.784 0.696l-0.064-0.024 3.392-3.712c0.152-0.149 0.272-0.331 0.349-0.534l0.003-0.010c0.072-0.168 0.114-0.364 0.114-0.569 0-0.575-0.33-1.073-0.81-1.315l-0.008-0.004c-0.323-0.191-0.698-0.335-1.098-0.412l-0.022-0.004c-1.408-0.256-2.912-0.512-4.416-0.736-0.64-0.064-1.28-0.096-1.888-0.128-0.288-0.032-0.544-0.032-0.832-0.064l-0.864-0.064v2.496h0.768q1.28 0.064 2.56 0.192c-1.088 0.096-2.208 0.224-3.328 0.256-1.557 0.102-3.376 0.16-5.209 0.16-2.842 0-5.652-0.139-8.422-0.411l0.351 0.028q1.44-0.192 2.912-0.224l0.8-0.032-0.096-2.496-0.864 0.064c-0.448 0.064-0.896 0.096-1.344 0.128-0.992 0.064-2.016 0.16-3.008 0.288-1.308 0.189-2.464 0.457-3.582 0.811l0.158-0.043c-0.565 0.128-1.010 0.541-1.181 1.077l-0.003 0.011c-0.027 0.113-0.043 0.244-0.043 0.378 0 0.496 0.213 0.943 0.553 1.253l0.001 0.001q5.216 5.76 10.4 11.52c0.040 0.057 0.065 0.127 0.065 0.203 0 0.007-0 0.015-0.001 0.022l0-0.001c0.032 1.792 0.032 3.424 0.032 4.896-0.009 0.073-0.014 0.158-0.014 0.244 0 0.791 0.441 1.479 1.091 1.831l0.011 0.005c0.716 0.378 1.563 0.736 2.442 1.023l0.118 0.033c0.237 0.063 0.53 0.119 0.829 0.156l0.035 0.004c-2.025-1.786-3.296-4.386-3.296-7.284 0-0.004 0-0.009 0-0.013v0.001z" />
+ </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
--- a/frontend/src/static/icons/font/fontello.eot
+++ /dev/null
Binary files 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="" 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="" 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 6 5 9 10 12 16 10 23 0 49-22 60z m-382-395c-12-12-18-29-18-45 1-41 0-83 0-124l0-66c-1 0-1 1-2 1-22 7-47 15-74 25l0 3c1 54 1 109 1 164-1 14-6 28-16 39-85 95-170 190-256 284 206-21 414-21 620 0-9-10-18-20-27-30-77-84-152-168-228-251z m-309 478c0 0 0 0 0 0 23 0 47 8 65 22l84-40c0-58 47-104 105-104 58 0 105 47 105 105 0 1 0 3 0 3l90 48c19-21 47-34 76-34 0 0 0 0 0 0 29 0 55 11 75 31 20 20 30 47 30 75 0 11-1 21-5 31-9 28-25 43-25 43-20 20-47 31-75 31 0 0 0 0 0 0-28 0-55-11-74-31s-31-47-31-74c0-1 0-2 0-3l-90-48c-20 21-47 33-76 33-31 0-60-13-79-35l-72 34c4 19 2 39-6 57-10 26-30 47-56 58-13 6-27 8-41 8-59 0-106-47-106-105s48-105 106-105z m0 135c17 0 30-13 30-30s-13-31-30-31c-17 0-31 14-31 31s14 30 31 30z m224-152c0 17 14 30 30 30 17 0 31-13 31-30s-14-31-31-31c-16 1-30 14-30 31z m332 123c0-8-2-15-7-20l-2-2c-6-6-13-9-22-9 0 0 0 0 0 0-16 0-30 14-30 31 0 16 14 30 30 30 0 0 0 0 0 0 18 0 31-14 31-30z" horiz-adv-x="1000" />
-
-<glyph glyph-name="graph" unicode="" 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 141 141-64 140-141 140c-16 0-31-3-46-8l-113 133c26 32 43 73 43 118 0 34-10 65-26 93l111 84c23-17 52-27 83-27z m0 197c31 0 56-26 56-57s-25-56-56-56-56 25-56 56 25 57 56 57z m-678-67c-31 0-56 25-56 56s25 57 56 57 57-26 57-57-25-56-57-56z m-41-609c-32 0-57 25-57 56s25 57 57 57 56-26 56-57-25-56-56-56z m366 229c-55 0-100 45-100 100s45 101 100 101 101-45 101-101-45-100-101-100z m301-227c31 0 56-25 56-56 0-31-25-57-56-57-31 0-57 26-57 57 1 31 26 56 57 56z" horiz-adv-x="1000" />
-
-<glyph glyph-name="play" unicode="" 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="" 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="" 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="" 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-51-51-99 99-99-99-51 51 99 99-99 99 51 51 99-99 99 99 51-51-99-99z m-454 108a305 305 0 0 0 13 89q-123 136-246 272a2971 2971 0 0 1 618 0l-27-30c-9-10-17-19-26-28a301 301 0 0 0 85-21l106 116a46 46 0 0 1 11 17 46 46 0 0 1-22 59 110 110 0 0 1-35 13c-44 8-91 16-138 23-20 2-40 3-59 4-9 1-17 1-26 2l-27 2v-78l24 0q40-2 80-6c-34-3-69-7-104-8a2660 2660 0 0 0-415 7q45 6 91 7l25 1-3 78-27-2c-14-2-28-3-42-4-31-2-63-5-94-9a696 696 0 0 1-107-24 50 50 0 0 1-37-34 53 53 0 0 1 16-51q163-180 325-360a11 11 0 0 0 2-7c1-56 1-107 1-153a65 65 0 0 1 34-65 522 522 0 0 1 80-33 224 224 0 0 1 27-5 303 303 0 0 0-103 228z" horiz-adv-x="1000" />
-
-<glyph glyph-name="edge-weight" unicode="" 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
--- a/frontend/src/static/icons/font/fontello.ttf
+++ /dev/null
Binary files 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
--- a/frontend/src/static/icons/font/fontello.woff
+++ /dev/null
Binary files 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
--- a/frontend/src/static/icons/font/fontello.woff2
+++ /dev/null
Binary files 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 @@
.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 @@
}
.alert {
- margin-bottom: 0px;
+ margin-bottom: 0;
}
.chart-frame-area {
@@ -460,8 +460,8 @@
}
.graph-tabpanel {
- padding-left: 0px !important;
- padding-right: 0px !important;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
}
.nodeLegend, .edgeLegend {
@@ -502,7 +502,7 @@
.colorSelector {
width: 15px;
height: 15px;
- padding: 6px 0px;
+ padding: 6px 0;
border-radius: 15px;
font-size: 8px;
text-align: center;
@@ -522,7 +522,7 @@
.sizeSelector.node {
background-color: darkgrey;
- padding: 6px 0px;
+ padding: 6px 0;
border-radius: 15px;
font-size: 8px;
text-align: center;
@@ -532,7 +532,7 @@
.sizeSelector.edge {
background-color: darkgrey;
- padding: 6px 0px;
+ padding: 6px 0;
font-size: 8px;
text-align: center;
margin-left: 5px;
@@ -598,14 +598,14 @@
}
.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 @@
.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;
+}
