diff --git a/package.json b/package.json
index b3e1d471..02c0a96e 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,17 @@
{
"name": "LibamtrackWeb",
- "version": "1.0.0",
+ "version": "0.1.0",
"private": false,
"description": "Libamtrack Web Gui",
"homepage": "https://libamtrack.github.io/web",
"repository": "https://github.com/libamtrack/web",
"scripts": {
- "start": "webpack-dev-server --compress --mode development --open",
- "startProd": "webpack-dev-server --compress --mode production --open",
+ "watch": "webpack --watch",
+ "start": "webpack serve --compress --mode development --open",
"build": "webpack --mode production",
"transpile": "babel src -d dist --copy-files",
"predeploy": "npm run build",
+ "dev": "webpack --mode development",
"deploy": "gh-pages -d dist"
},
"keywords": [
@@ -38,54 +39,57 @@
"provides",
"auxiliary"
],
- "author": "Arkadiusz Dudzik & Piotr Zmilczak",
+ "author": "Arkadiusz Dudzik, Piotr Zmilczak, Leszek Grzanka",
"license": "GPL-3.0-or-later",
"devDependencies": {
- "babel-loader": "8.1.0",
- "@babel/cli": "7.8.4",
- "@babel/core": "7.9.0",
- "@babel/plugin-proposal-class-properties": "7.8.3",
- "@babel/polyfill": "7.8.7",
- "@babel/preset-env": "7.9.0",
- "@babel/preset-react": "7.9.4",
- "copy-webpack-plugin": "5.1.1",
- "css-loader": "3.4.2",
- "file-loader": "5.1.0",
- "gh-pages": "2.2.0",
- "html-webpack-plugin": "4.0.3",
+ "@babel/cli": "7.12.10",
+ "@babel/core": "7.12.10",
+ "@babel/plugin-proposal-class-properties": "7.12.1",
+ "@babel/polyfill": "7.12.1",
+ "@babel/preset-env": "7.12.11",
+ "@babel/preset-react": "7.12.10",
+ "@babel/runtime": "7.12.5",
+ "@webpack-cli/serve": "1.2.1",
+ "babel-loader": "8.2.2",
+ "copy-webpack-plugin": "7.0.0",
+ "clean-webpack-plugin": "3.0.0",
+ "css-loader": "5.0.1",
+ "file-loader": "6.2.0",
+ "gh-pages": "3.1.0",
+ "html-webpack-plugin": "4.5.1",
"linspace": "1.0.0",
"logspace": "1.0.1",
- "react-bootstrap": "^0.32.4",
- "react-plotly.js": "2.4.0",
- "plotly.js": "1.52.3",
+ "plotly.js": "1.58.4",
+ "react-bootstrap": "^1.4.3",
+ "react-plotly.js": "^2.5.1",
"recursive-readdir": "2.2.2",
- "style-loader": "1.1.3",
- "terser": "4.6.7",
- "terser-webpack-plugin": "2.3.5",
- "uglifyjs-webpack-plugin": "2.2.0",
- "webpack": "4.42.1",
- "webpack-bundle-analyzer": "3.6.1",
- "webpack-cli": "3.3.11",
- "webpack-dev-server": "3.10.3"
+ "style-loader": "2.0.0",
+ "webpack": "5.12.1",
+ "webpack-bundle-analyzer": "4.3.0",
+ "webpack-cli": "4.3.1",
+ "webpack-dev-server": "3.11.1"
},
+ "@comment dependencies": [
+ "jquery@1.9.1 - 3 and popper.js@^1.16.1 are peer dependencies of bootstrap@4.5.3",
+ "react@^16.0.0 is a peer dependency of @axetroy/react-download@1.1.1"
+ ],
"dependencies": {
"@axetroy/react-download": "1.1.1",
- "antd": "3.26.12",
- "axios": "0.19.2",
- "babel-plugin-wildcard": "6.0.0",
- "bootstrap": "4.4.1",
- "jquery": "3.5.0",
- "npm-check-updates": "^4.1.0",
+ "antd": "^4.10.0",
+ "@ant-design/compatible": "^1.0.8",
+ "@ant-design/icons": "^4.3.0",
+ "babel-plugin-wildcard": "^6.0.0",
+ "bootstrap": "4.5.3",
+ "jquery": "1.9.1 - 3",
"plotly.js-basic-dist": "1.54.1",
- "popper.js": "1.16.1",
- "react": "16.13.1",
- "react-dom": "16.13.1",
+ "popper.js": "^1.16.1",
+ "react": "^16.12.0",
+ "react-dom": "^16.12.0",
"react-load-script": "0.0.6",
- "react-router": "5.1.2",
- "react-router-dom": "5.1.2",
- "webpack-visualizer-plugin": "0.1.11"
+ "react-router": "5.2.0",
+ "react-router-dom": "5.2.0"
},
"resolutions": {
- "@babel/preset-env": "7.5.5"
+ "@babel/runtime": "^7.12.5"
}
}
diff --git a/src/components/functions/FunctionsController.js b/src/components/functions/FunctionsController.js
index 1b5cabed..1550b68f 100644
--- a/src/components/functions/FunctionsController.js
+++ b/src/components/functions/FunctionsController.js
@@ -1,5 +1,6 @@
import React, {Component} from 'react';
-import {Breadcrumb, Icon, Spin, Tooltip} from 'antd';
+import {Breadcrumb, Spin, Tooltip} from 'antd';
+import {EditOutlined} from '@ant-design/icons';
import PlotComponent from './plots/PlotComponent.js';
import MoreOptionsForm from './forms/MoreOptionsForm.js';
import GenericForm from './forms/GenericForm.js';
@@ -11,7 +12,8 @@ import packageJson from '../../../package.json';
import {Link} from "react-router-dom";
import ErrorModal from "./modals/ErrorModal";
import Script from 'react-load-script'
-import {Col, Row} from "react-bootstrap";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
import FormItem from "antd/es/form/FormItem";
export default class FunctionsController extends Component {
@@ -95,7 +97,7 @@ export default class FunctionsController extends Component {
{this.state.json.visibleName.concat(" ")}
-
+
diff --git a/src/components/functions/forms/GenericForm.js b/src/components/functions/forms/GenericForm.js
index 363f8f17..0a203971 100644
--- a/src/components/functions/forms/GenericForm.js
+++ b/src/components/functions/forms/GenericForm.js
@@ -1,13 +1,18 @@
import React from 'react';
import Button from "antd/es/button/button";
-import Form from "antd/es/form/Form";
+
+// temporary workaround, waiting for https://github.com/libamtrack/web/issues/596 to be fixed
+// Form needs to be migrated to ant design v4
+import { Form as LegacyForm } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+
import Input from "antd/es/input/Input";
import Tooltip from "antd/es/tooltip/index";
import Select from "antd/es/select/index";
-const FormItem = Form.Item;
+const FormItem = LegacyForm.Item;
const InputGroup = Input.Group;
const Option = Select.Option;
@@ -51,14 +56,14 @@ class FormGenerator extends React.Component {
}
return (
-
+
);
};
@@ -107,7 +112,7 @@ class FormGenerator extends React.Component {
return (
-
+
{getFieldDecorator(startName, {
rules: [{
@@ -358,5 +363,5 @@ class FormGenerator extends React.Component {
}
}
-const GenericForm = Form.create()(FormGenerator);
+const GenericForm = LegacyForm.create()(FormGenerator);
export default GenericForm;
\ No newline at end of file
diff --git a/src/components/functions/modals/DataSeriesModal.js b/src/components/functions/modals/DataSeriesModal.js
index 4c7841e5..cf2347e6 100644
--- a/src/components/functions/modals/DataSeriesModal.js
+++ b/src/components/functions/modals/DataSeriesModal.js
@@ -1,5 +1,6 @@
import React from "react";
-import { Modal, List, Button, Icon } from 'antd';
+import { Modal, List, Button} from 'antd';
+import {DeleteOutlined, DownloadOutlined, EditTwoTone, TableOutlined} from '@ant-design/icons';
const confirm = Modal.confirm;
@@ -36,12 +37,12 @@ export default class DataSeriesModal extends React.Component {
renderItem={series => (
this.props.showRenameModal(series.name)}>Rename ,
- this.props.showDataSeries(series.name)}>Show ,
- this.props.downloadDataSeries(series)}>Download ,
+ this.props.showRenameModal(series.name)}>Rename ,
+ this.props.showDataSeries(series.name)}>Show ,
+ this.props.downloadDataSeries(series)}>Download ,
this.showConfirm(
() => this.props.deleteDataSeries(series.name)
- )}>Delete
+ )}>Delete
]}>
diff --git a/src/components/functions/modals/ShowDataModal.js b/src/components/functions/modals/ShowDataModal.js
index b9280574..b4c31784 100644
--- a/src/components/functions/modals/ShowDataModal.js
+++ b/src/components/functions/modals/ShowDataModal.js
@@ -1,5 +1,6 @@
import React from "react";
-import { Row, Col, Modal, Button, Icon, Tooltip } from 'antd';
+import { Row, Col, Modal, Button, Tooltip } from 'antd';
+import {EditTwoTone} from '@ant-design/icons';
const ShowDataSeriesModal = (props) => {
let i = 0;
@@ -12,8 +13,8 @@ const ShowDataSeriesModal = (props) => {
props.setModalVisible(props.name, false);
props.showRenameModal(props.dataSeriesName);
}}>
-
-
+
+
@@ -38,7 +39,7 @@ const ShowDataSeriesModal = (props) => {
}
>
-
+
{"x"}
{props.xList.map(x => (
diff --git a/src/components/functions/utils/SearchBox.js b/src/components/functions/utils/SearchBox.js
index 6bd40220..4de6bd2c 100644
--- a/src/components/functions/utils/SearchBox.js
+++ b/src/components/functions/utils/SearchBox.js
@@ -1,6 +1,6 @@
import React from "react";
import {Link, Redirect} from 'react-router-dom';
-import {AutoComplete, Button, Icon, Input} from 'antd';
+import {AutoComplete, Button, Input} from 'antd';
export default class SearchBox extends React.Component {
state = {
@@ -39,15 +39,12 @@ export default class SearchBox extends React.Component {
filterOption={(inputValue, option) =>
option.props.text.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
placeholder="Search functions"
- optionLabelProp="text"
>
-
-
-
- )}
- />
+
+ Search
+
+ }/>
);
}
diff --git a/src/components/layouts/MainPage.js b/src/components/layouts/MainPage.js
index ad4aeaa5..3226d2f4 100644
--- a/src/components/layouts/MainPage.js
+++ b/src/components/layouts/MainPage.js
@@ -6,11 +6,8 @@ import FunctionsView from '../layouts/FunctionsView.js';
import SearchBox from "../functions/utils/SearchBox";
import Layout from "antd/es/layout/layout";
import Row from "antd/es/row/index";
-import Col from "react-bootstrap/es/Col";
-import ListGroup from "react-bootstrap/es/ListGroup";
-import ListGroupItem from "react-bootstrap/es/ListGroupItem";
-import Route from "react-router-dom/es/Route";
-import Link from "react-router-dom/es/Link";
+import {Col, ListGroup, ListGroupItem} from "react-bootstrap";
+import {Route, Link} from "react-router-dom";
import packageJson from '../../../package.json';
const { Header, Content, Footer } = Layout;
@@ -75,14 +72,14 @@ class MainPage extends React.Component {
this.state.introText = confData.introText;
this.state.dictionariesPaths = confData.dictionaries;
- let bundleAnalyzeReportOnlyAtWebDev = packageJson.homepage.indexOf("web_dev") === -1 ? "" : {"See the bundle.js analyze"}
;
+ let bundleAnalyzeReportOnlyAtWebDev = packageJson.homepage.indexOf("web_dev") === -1 ? "" : {"See the bundle.js analyze"}
;
this.state.footer =
;
@@ -108,16 +105,16 @@ class MainPage extends React.Component {
this.setState({
rows:
(
-
+
{this.state.introText}
-
+
-
+
{categoriesForColumns.map((colums, index) => (
{colums.map(category => (
@@ -158,7 +155,7 @@ class MainPage extends React.Component {
{/*LOGO*/}
-
+
diff --git a/webpack.config.js b/webpack.config.js
index d278e914..8f450a8a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,64 +1,46 @@
-const HtmlWebPackPlugin = require("html-webpack-plugin");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const path = require('path');
-const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
+const path = require("path");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-var Visualizer = require('webpack-visualizer-plugin');
-const htmlPlugin = new HtmlWebPackPlugin({
- template: "./src/index.html",
- filename: "./index.html"
-});
-const copyStatic = new CopyWebpackPlugin([
- {
- from: 'src/static/',
- to: "static/"
- }
-]);
-const copyWasm = new CopyWebpackPlugin([
- {
- from: 'src/libat.wasm',
- to: ""
- }
-]);
module.exports = {
entry: ['@babel/polyfill', './src/index.js'],
- node: {
- fs: 'empty'
- },
- target: 'web',
output: {
- path: path.join(__dirname, "dist"),
+ path: path.resolve(process.cwd(), 'dist'),
filename: "bundle.js"
},
-
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
- use: {
- loader: "babel-loader"
- }
+ use: ["babel-loader"]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
- test: /\.(png|jpg|gif)$/,
- use: [
- {
- loader: 'file-loader',
- options: {}
- }
- ]
+ test: /\.(png|jpg|gif|ico)$/,
+ loader: 'file-loader',
},
]
},
- plugins: [htmlPlugin, copyStatic, copyWasm, new BundleAnalyzerPlugin({"openAnalyzer":false, "analyzerMode":"static"}),
- new webpack.DefinePlugin({
- 'process.env.NODE_ENV': JSON.stringify('production')
- }), new Visualizer({"filename":"report.html"})]
+ plugins: [
+ new CleanWebpackPlugin({
+ cleanStaleWebpackAssets: false,
+ }),
+ new HtmlWebpackPlugin({
+ template: path.resolve(__dirname, "src", "index.html")
+ }),
+ new CopyPlugin({
+ patterns: [
+ { from: "src/static" , to : "static"},
+ { from: "src/libat.wasm"},
+ ]
+ }),
+ new BundleAnalyzerPlugin({"openAnalyzer":false, "analyzerMode":"static"})
+ ]
};
\ No newline at end of file