From f46879a0651f1fc58909f2deed1d233afa7c4ed5 Mon Sep 17 00:00:00 2001
From: Vasilis Petrakopoulos <vasilis4998@gmail.com>
Date: Tue, 12 Mar 2024 18:04:11 +0200
Subject: [PATCH] Warning for multiple networks

---
 statsboard/src/App.css |  7 +++++
 statsboard/src/App.js  | 64 +++++++++++++++++++++++-------------------
 2 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/statsboard/src/App.css b/statsboard/src/App.css
index 9c24b49..3db842b 100644
--- a/statsboard/src/App.css
+++ b/statsboard/src/App.css
@@ -36,6 +36,13 @@ h1 {
   margin: 5px 0;
 }
 
+.networks-note {
+  font-size: 12px;
+  color: #CA2400;
+  font-style: italic;
+  margin-top: -5px;
+}
+
 .stations-note {
   font-size: 13px;
   color: #999;
diff --git a/statsboard/src/App.js b/statsboard/src/App.js
index e101260..612f6a9 100644
--- a/statsboard/src/App.js
+++ b/statsboard/src/App.js
@@ -22,6 +22,7 @@ import { makePlotsStation } from './plotsStation.js';
 
 function App() {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [commaNets, setCommaNets] = useState(false);
   const [authTokenFile, setAuthTokenFile] = useState(undefined);
   const [startTime, setStartTime] = useState(new Date().getFullYear()+'-01');
   const [endTime, setEndTime] = useState(undefined);
@@ -310,36 +311,41 @@ function App() {
           )}
           {(level === "network" || level === "station") && (
             <div>
-            <Autocomplete
-              className="autocomplete"
-              sx={{ my: 1, minWidth: 300 }}
-              size="small"
-              freeSolo
-              multiple={isAuthenticated}
-              onInputChange={e => setInputNetwork(e.target.value)}
-              onChange={(e, nv) => {setNetwork(nv); setInputNetwork("");}}
-              options={optionsNet}
-              open={openNet}
-              onOpen={() => setOpenNet(true)}
-              onClose={() => {setOpenNet(false); setBroughtNets(false);}}
-              isOptionEqualToValue={(option, value) => option === value}
-              loading={loadingNet}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  label="Network"
-                  InputProps={{
-                    ...params.InputProps,
-                    endAdornment: (
-                      <Fragment>
-                        {loadingNet ? <CircularProgress color="inherit" size={20} /> : null}
-                        {params.InputProps.endAdornment}
-                      </Fragment>
-                    ),
-                  }}
-                />
+              <Autocomplete
+                className="autocomplete"
+                sx={{ my: 1, minWidth: 300 }}
+                size="small"
+                freeSolo
+                multiple={isAuthenticated}
+                onInputChange={e => {setInputNetwork(e.target.value); e.target.value && (network.length > 0 || e.target.value.includes(',')) ? setCommaNets(true) : setCommaNets(false)}}
+                onChange={(e, nv) => {setNetwork(nv); setInputNetwork(""); nv.length > 1 ? setCommaNets(true) : setCommaNets(false)}}
+                options={optionsNet}
+                open={openNet}
+                onOpen={() => setOpenNet(true)}
+                onClose={() => {setOpenNet(false); setBroughtNets(false);}}
+                isOptionEqualToValue={(option, value) => option === value}
+                loading={loadingNet}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    label="Network"
+                    InputProps={{
+                      ...params.InputProps,
+                      endAdornment: (
+                        <Fragment>
+                          {loadingNet ? <CircularProgress color="inherit" size={20} /> : null}
+                          {params.InputProps.endAdornment}
+                        </Fragment>
+                      ),
+                    }}
+                  />
+                )}
+              />
+              {commaNets && (
+                <div className="networks-note">
+                  Selecting multiple network requires node operator privileges. Make sure your EIDA account is set up accordingly.
+                </div>
               )}
-            />
             </div>
           )}
           {level === "station" && (