Use HashRouter to track variation state

uhepp-js/package.json

@@ -32,7 +32,7 @@
     "react": "^16.8.6",
     "react-bootstrap": "^1.0.0-beta.12",
     "react-dom": "^16.8.6",
-    "react-router-dom": "^5.0.1",
+    "react-router-dom": "^5.2.0",
     "sass-loader": "^7.1.0",
     "webpack": "^4.39.1"
   },

uhepp-js/src/components/UheppHistUI.jsx

 import React, { useState } from "react";
 import UheppHist from "./UheppHist.jsx";
+import {
+  HashRouter as Router,
+  Route,
+  Switch,
+  useLocation,
+  useHistory,
+  useParams
+} from "react-router-dom";
 import { objfilter, objmap } from "../helpers/uhepp.js";
 
 const noVariationUsed = (uhepp) => {
@@ -31,7 +39,7 @@ const varstyle = (updown) => {
 
 const makeVariationStacks = (uhepp, stackId, variation, updown) => {
   const stack = uhepp.stacks[stackId]
-  return  [{
+  return  stack ? [{
             type: "step", 
             content: [{
               style: varstyle(updown),
@@ -40,12 +48,12 @@ const makeVariationStacks = (uhepp, stackId, variation, updown) => {
                 item.yield.map(name => `${name}/${variation}/${updown}`)
               ).flat()
             }]
-          }]
+          }] : []
 }
 
 const makeVariationRatio = (uhepp, stackId, variation, updown) => {
   const stack = uhepp.stacks[stackId]
-  return  [{
+  return  stack ? [{
             type: "step", 
             style: varstyle(updown),
             numerator: stack.content.map(item => 
@@ -54,7 +62,7 @@ const makeVariationRatio = (uhepp, stackId, variation, updown) => {
             denominator: stack.content.map(item => 
                 item.yield.map(name => `${name}`)
               ).flat()
-          }]
+          }] : []
 }
 
 const UheppHistUIWithSyst = ({
@@ -248,21 +256,21 @@ const UheppHistUIWithSyst = ({
   </>
 }
 
-const UheppHistUI = ({width, height, uhepp}) => {
-  const [envId, setEnvId] = useState(0)
-  const [envName, setEnvName] = useState("NOMINAL")
+const UheppHistUIRouted = ({width, height, uhepp}) => {
+
+  const {envName, envId} = Object.assign({envName: "NOMINAL", envId: 0}, useParams())
+  const history = useHistory()
 
   const reset = () => {
-    setEnvId(0)
-    setEnvName("NOMINAL")
+    history.push("/")
   }
   const handleEnvelop = (e) => {
     let variationName = e.target.value
-    setEnvName(variationName)
+    history.push(`/${variationName}/${envId}`)
   }
   const handleEnvStack = (e) => {
     let stackId = parseInt(e.target.value)
-    setEnvId(stackId)
+    history.push(`/${envName}/${stackId}`)
   }
 
   const variations = variationList(uhepp)
@@ -307,4 +315,13 @@ const UheppHistUI = ({width, height, uhepp}) => {
             isVariationReady={isVariationReady}
             variations={variations} />
 }
+
+
+const UheppHistUI = (props) => {
+  return <Router><Switch>
+    <Route path="/:envName/:envStack" render={() => <UheppHistUIRouted {...props} />} />
+    <Route path="/" render={() => <UheppHistUIRouted envName="NOMINAL" envId={0} {...props} />} />
+  </Switch></Router>
+}
+
 export default UheppHistUI;