diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 0afdf17651a7c4eb5835e4c66adbcfcb6c9ad7e4..d2d87353e0d82fdb945ad2a89f10577f32cdeafb 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -37,7 +37,7 @@ jsbuild:
artifacts:
expire_in: 1 week
paths:
- - uhepp_org/uhepp_vault/static/uhepp-js/main.js*
+ - uhepp_org/uhepp_vault/static/react/main.js*
build:
stage: build
diff --git a/uhepp-js/src/common.scss b/uhepp-js/src/common.scss
index 93c4b1c7a72602ac2fa3e7d2a16fd445736e30e9..ec3109d9c86bcd1858dd55caa983d50fe0133286 100644
--- a/uhepp-js/src/common.scss
+++ b/uhepp-js/src/common.scss
@@ -1 +1,10 @@
-@import "~bootstrap/scss/bootstrap";
\ No newline at end of file
+
+$theme-colors: (
+ "primary": #1f8aba,
+);
+
+@import "~bootstrap/scss/bootstrap";
+
+a:hover {
+ text-decoration: none;
+}
diff --git a/uhepp-js/webpack.config.js b/uhepp-js/webpack.config.js
index f55ca34f2b92386a672fa4b2faef0fb4243fb7a6..4a050e1a946fef6c241edcfd9c49a6d7adf28660 100644
--- a/uhepp-js/webpack.config.js
+++ b/uhepp-js/webpack.config.js
@@ -19,15 +19,27 @@ module.exports = {
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
- filename: '[name].[contenthash].css',
- chunkFilename: '[id].[contenthash].css',
+ filename: '[name].css',
+ chunkFilename: '[id].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
],
output: {
filename: '[name].js',
library: 'uhepp',
- path: path.resolve(__dirname, '../uhepp_org/uhepp_vault/static/uhepp-js')
+ path: path.resolve(__dirname, '../uhepp_org/uhepp_vault/static/react')
+ },
+ optimization: {
+ runtimeChunk: 'single',
+ splitChunks: {
+ cacheGroups: {
+ vendor: {
+ test: /[\\/]node_modules[\\/]/,
+ name: 'vendors',
+ chunks: 'all'
+ }
+ }
+ }
},
module: {
rules: [
diff --git a/uhepp_org/uhepp_vault/templates/uhepp_vault/base.html b/uhepp_org/uhepp_vault/templates/uhepp_vault/base.html
index ceee2495f9fb6db2a10962da395e77832ec88458..8ceda476d5b6c91444b845265dc2877980cb30e9 100644
--- a/uhepp_org/uhepp_vault/templates/uhepp_vault/base.html
+++ b/uhepp_org/uhepp_vault/templates/uhepp_vault/base.html
@@ -1,6 +1,7 @@
<!doctype html>
<html lang="en">
{% load svg %}
+{% load static %}
{% load pygmentify_tags %}
<head>
<meta charset="utf-8">
@@ -8,10 +9,8 @@
<meta name="author" content="Frank Sauerburger" />
<meta name="description" content="Universal HEP Plot storage -- uhepp" />
<link rel="canonical" href="https://uhepp.org/" />
+ <link rel="stylesheet" href="{% static 'react/main.css' %}">
<link rel="stylesheet" href="{% pygmentify_css %}">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<title>uhepp hub</title>
<style>
.navbar-brand svg {
@@ -79,5 +78,10 @@
{% endblock %}
</div>
+<script src="{% static 'react/runtime.js' %}"></script>
+<script src="{% static 'react/vendors.js' %}"></script>
+<script src="{% static 'react/main.js' %}"></script>
+{% block loadscript %}
+{% endblock %}
</body>
</html>
diff --git a/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html b/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html
index d861503a782f7b55521d346296f5185ef7c2dacb..7c26e6746c4cb52aa7e284084a04bae5c9735345 100644
--- a/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html
+++ b/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html
@@ -12,20 +12,7 @@ back to collection
<div id="app-root">
Loading...
</div>
-<script src="/static/uhepp-js/main.js"></script>
{{ plot.uhepp|json_script:"plot-data" }}
-<script>
-uhepp.fe.ReactDOM.render(
- uhepp.fe.React.createElement(uhepp.fe.Graph, {
- width: "555",
- height: "400",
- uhepp: JSON.parse(document.getElementById('plot-data').textContent)
- }),
- document.getElementById('app-root')
-);
-</script>
-
-<!-- <textarea cols="100" rows="10" readonly>{{ plot.uhepp }}</textarea> -->
<p>
<a class="btn btn-primary" href="{% url 'uhepp_vault:plot-download' plot.uuid %}">Download JSON</a>
@@ -53,3 +40,16 @@ hist.push({{ plot.collection.pk }})</pre>
{% endpygmentify %}
{% endblock %}
+
+{% block loadscript %}
+<script>
+uhepp.fe.ReactDOM.render(
+ uhepp.fe.React.createElement(uhepp.fe.Graph, {
+ width: "555",
+ height: "400",
+ uhepp: JSON.parse(document.getElementById('plot-data').textContent)
+ }),
+ document.getElementById('app-root')
+);
+</script>
+{% endblock %}