Front End Modification

ecosystem.config.js

@@ -18,25 +18,32 @@
  */
 
 module.exports = {
-    apps: [{
-        name: "ag-viewer",
-        namespace: "ag-viewer",
-        script: "cd backend && node ./build/bin/www",
-        watch: false,
-        env: {
-            name: "ag-viewer-develop",
-            PORT: 3001,
-            NODE_ENV: "develop",
-        },
-        env_release: {
-            name: "ag-viewer-release",
-            PORT: 4000,
-            NODE_ENV: "release",
-        }
-    }],
-    deploy: {
-        staging: {
-            'post-deploy': 'npm install && npm run setup && npm run build-front && pm2 reload ecosystem.config.js'
-        }
-    }
-}
+
+  apps: [
+    {
+      name: "ag-viewer",
+      namespace: "ag-viewer",
+      script: "cd backend && node ./build/bin/www",
+      watch: false,
+      env: {
+        name: "ag-viewer-develop",
+        PORT: 3001,
+        NODE_ENV: "develop",
+      },
+      env_release: {
+        name: "ag-viewer-release",
+        PORT: 4000,
+        NODE_ENV: "release",
+      },
+    },
+  ],
+  deploy: {
+    staging: {
+      "post-deploy":
+        "npm install && npm run setup && npm run build-front && pm2 reload ecosystem.config.js",
+    },
+  },
+
+
+
+};

frontend/.eslintrc.js

@@ -18,24 +18,21 @@
  */
 
 module.exports = {
+
   env: {
     browser: true,
     es2021: true,
   },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'airbnb',
-  ],
+  extends: ["eslint:recommended", "plugin:react/recommended", "airbnb"],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 12,
-    sourceType: 'module',
+    sourceType: "module",
   },
-  plugins: ['babel', 'react', 'import', 'react-hooks'],
+  plugins: ["babel", "react", "import", "react-hooks"],
   rules: {
-    'linebreak-style': 0, // fow winodw user
+    "linebreak-style": 0, // fow winodw user
   },
 };

frontend/src/App.css

@@ -1,3 +1,5 @@
+
+
 /*
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file

frontend/src/App.jsx

@@ -19,15 +19,17 @@
 
 import React from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import 'antd/dist/antd.css';
+import 'antd/dist/antd-with-locales';
 import './static/style.css';
 import './static/navbar-fixed-left.css';
 import MainPage from './pages/Main/MainPage';
 
-const App = () => (
-  <React.StrictMode>
-    <MainPage />
-  </React.StrictMode>
-);
+function App() {
+  return (
+    <React.StrictMode>
+      <MainPage />
+    </React.StrictMode>
+  );
+}
 
 export default App;

frontend/src/components/alert/presentations/Alert.jsx

@@ -23,7 +23,6 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
 import { Alert } from 'antd';
-
 const SingleAlert = ({
   alertKey,
   alertName,

frontend/src/components/contents/presentations/Editor.jsx

@@ -19,7 +19,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import uuid from 'react-uuid';
+import { v4 as uuidv4 } from 'uuid';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimesCircle, faToggleOff, faToggleOn } from '@fortawesome/free-solid-svg-icons';

frontend/src/components/cypherresult/components/GraphFilterModal.jsx

@@ -24,7 +24,7 @@ import {
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
-import uuid from 'react-uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 const generateNewFilterObject = () => ({
   key: uuid(),

frontend/src/components/cypherresult/containers/CypherResultCytoscapeContainer.js

@@ -18,10 +18,10 @@
  */
 
 import { connect } from 'react-redux';
-import CypherResultCytoscape from '../presentations/CypherResultCytoscape';
 import { setLabels } from '../../../features/cypher/CypherSlice';
 import { openModal, addGraphHistory, addElementHistory } from '../../../features/modal/ModalSlice';
 import { generateCytoscapeElement } from '../../../features/cypher/CypherUtil';
+import CypherResultCytoscapeContainer from "../../cypherresult/containers/CypherResultCytoscapeContainer";
 
 const mapStateToProps = (state, ownProps) => {
   const { refKey } = ownProps;
@@ -67,4 +67,4 @@ export default connect(
   mapDispatchToProps,
   null,
   { forwardRef: true },
-)(CypherResultCytoscape);
+)(CypherResultCytoscapeCounter);

frontend/src/components/cypherresult/containers/CypherResultTableContainer.js

@@ -50,4 +50,7 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = { };
 
-export default connect(mapStateToProps, mapDispatchToProps)(CypherResultTable);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CypherResultTableContainer);

frontend/src/components/cypherresult/presentations/CypherResultCytoscape.jsx

@@ -27,7 +27,7 @@ import {
 } from '../../../features/cypher/CypherUtil';
 import CypherResultCytoscapeChart from '../../cytoscape/CypherResultCytoscapeChart';
 import CypherResultCytoscapeLegend from '../../cytoscape/CypherResultCytoscapeLegend';
-import CypherResultCytoscapeFooter from '../../cytoscape/CypherResultCytoscapeFooter';
+import {CypherResultCytoscapeFooter} from '../../cytoscape/CypherResultCytoscapeFooter';
 import CypherResultTab from '../../cytoscape/CypherResultTab';
 
 const CypherResultCytoscape = forwardRef((props, ref) => {
@@ -434,4 +434,4 @@ CypherResultCytoscape.propTypes = {
   setIsTable: PropTypes.func.isRequired,
 };
 
-export default CypherResultCytoscape;
+export {CypherResultCytoscape};

frontend/src/components/cytoscape/CypherResultCytoscapeChart.jsx

@@ -36,7 +36,7 @@ import {
   faProjectDiagram,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons';
-import uuid from 'react-uuid';
+import { v4 as uuidv4 } from 'uuid';
 import cxtmenu from '../../lib/cytoscape-cxtmenu';
 import { initLocation, seletableLayouts } from './CytoscapeLayouts';
 import { stylesheet } from './CytoscapeStyleSheet';

frontend/src/components/cytoscape/CypherResultCytoscapeFooter.jsx

@@ -20,7 +20,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Badge } from 'react-bootstrap';
-import uuid from 'react-uuid';
+import { v4 as uuidv4 } from 'uuid';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
 import {
@@ -399,4 +399,4 @@ CypherResultCytoscapeFooter.propTypes = {
   captions: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
-export default CypherResultCytoscapeFooter;
+export {CypherResultCytoscapeFooter};

frontend/src/components/cytoscape/CypherResultCytoscapeLegend.jsx

@@ -20,7 +20,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Badge } from 'react-bootstrap';
-import uuid from 'react-uuid';
+import { v4 as uuidv4 } from 'uuid';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
 

frontend/src/components/editor/presentations/CodeMirrorWrapper.jsx

@@ -19,10 +19,7 @@
 
 import React, { useRef, useState } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
-import 'codemirror/keymap/sublime';
-import 'codemirror/addon/display/placeholder';
-import 'codemirror/theme/ambiance-mobile.css';
-import './CodeMirror.scss';
+
 import PropTypes from 'prop-types';
 
 const CodeMirrorWrapper = ({

frontend/src/components/frame/presentations/CypherGraphResultFrame.jsx

@@ -18,7 +18,7 @@
  */
 
 import React, { createRef, useEffect, useState } from 'react';
-import uuid from 'react-uuid';
+import { v4 as uuidv4 } from 'uuid';
 import { saveAs } from 'file-saver';
 import { Parser } from 'json2csv';
 import PropTypes from 'prop-types';

frontend/src/components/initializer/presentation/GraphInitializer.jsx

@@ -4,7 +4,7 @@ import {
 } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMinusCircle } from '@fortawesome/free-solid-svg-icons';
-import uuid from 'react-uuid';
+import { v4 as uuidv4 } from 'uuid';
 import PropTypes from 'prop-types';
 import './GraphInit.scss';
 import { Divider, Checkbox, Input } from 'antd';

frontend/src/components/sidebar/presentations/SidebarHome.jsx

@@ -21,7 +21,7 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import { Modal } from 'antd';
-import uuid from 'react-uuid';
+import { v4 as uuidv4 } from 'uuid';
 import { connect, useDispatch } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRedo, faTimes } from '@fortawesome/free-solid-svg-icons';

frontend/src/features/alert/AlertSlice.js

@@ -18,7 +18,7 @@
  */
 
 import { createSlice } from '@reduxjs/toolkit';
-import uuid from 'react-uuid';
+import { v4 as uuidv4 } from "uuid";
 
 const AlertSlice = createSlice({
   name: 'alerts',

frontend/src/features/database/MetadataSlice.js

@@ -18,7 +18,7 @@
  */
 
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import uuid from 'react-uuid';
+import { v4 as uuidv4 } from "uuid";
 
 export const getMetaData = createAsyncThunk(
   'database/getMetaData',

frontend/src/features/frame/FrameSlice.js

@@ -18,45 +18,59 @@
  */
 
 /* eslint-disable no-param-reassign */
-import { createSlice } from '@reduxjs/toolkit';
-import uuid from 'react-uuid';
+import { createSlice } from "@reduxjs/toolkit";
+import { v4 as uuidv4 } from "uuid";
 
 const FrameSlice = createSlice({
-  name: 'frames',
+  name: "frames",
   initialState: [],
   reducers: {
     addFrame: {
       reducer: (state, action) => {
         const reqString = action.payload.reqString.trim();
-        const firstNotPinnedIndex = state.findIndex((frame) => (frame.isPinned === false));
+        const firstNotPinnedIndex = state.findIndex(
+          (frame) => frame.isPinned === false
+        );
         const { frameName } = action.payload;
 
         const frameProps = {
           reqString,
           key: action.payload.refKey ? action.payload.refKey : uuid(),
         };
 
-        if (reqString.startsWith(':play')) {
+        if (reqString.startsWith(":play")) {
           frameProps.playTarget = reqString.split(/\s+/).pop();
         }
 
-        state.splice(firstNotPinnedIndex, 0, { frameName, frameProps, isPinned: false });
-        state.map((frame) => { if (frame.orgIndex) { frame.orgIndex += 1; } return frame; });
+        state.splice(firstNotPinnedIndex, 0, {
+          frameName,
+          frameProps,
+          isPinned: false,
+        });
+        state.map((frame) => {
+          if (frame.orgIndex) {
+            frame.orgIndex += 1;
+          }
+          return frame;
+        });
       },
-      prepare: (reqString, frameName, refKey) => ({ payload: { reqString, frameName, refKey } }),
+      prepare: (reqString, frameName, refKey) => ({
+        payload: { reqString, frameName, refKey },
+      }),
     },
     removeFrame: {
       reducer: (state, action) => {
         const frameKey = action.payload.refKey;
         return state.filter((frame) => frame.frameProps.key !== frameKey);
       },
       prepare: (refKey) => ({ payload: { refKey } }),
-
     },
     pinFrame: {
       reducer: (state, action) => {
         const frameKey = action.payload.refKey;
-        const frameIndex = state.findIndex((frame) => (frame.frameProps.key === frameKey));
+        const frameIndex = state.findIndex(
+          (frame) => frame.frameProps.key === frameKey
+        );
         if (!state[frameIndex].isPinned) {
           state[frameIndex].isPinned = true;
           state[frameIndex].orgIndex = frameIndex;
@@ -72,16 +86,14 @@ const FrameSlice = createSlice({
     trimFrame: {
       reducer: (state, action) => {
         const { frameName } = action.payload;
-        return state.filter((frame) => (frame.frameName !== frameName));
+        return state.filter((frame) => frame.frameName !== frameName);
       },
       prepare: (frameName) => ({ payload: { frameName } }),
-
     },
   },
 });
 
-export const {
-  addFrame, removeFrame, pinFrame, trimFrame,
-} = FrameSlice.actions;
+export const { addFrame, removeFrame, pinFrame, trimFrame } =
+  FrameSlice.actions;
 
 export default FrameSlice.reducer;