Merge pull request #199 from HSLdevcom/#195_UI_Tweaks

#195: UI tweaks
HSLdevcom · Oct 2, 2023 · bc51515 · bc51515
2 parents e27135b + 521cec1
commit bc51515
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 12 deletions.
diff --git a/src/renderer/components/HelmetProject/HelmetScenario/HelmetScenario.css b/src/renderer/components/HelmetProject/HelmetScenario/HelmetScenario.css
@@ -152,14 +152,17 @@ span.Scenario__inline {
 }
 
 .override-is-default {
-    font-style: italic;
     color: gray;
 }
 
 .inline-element {
     display: inline !important;
 }
 
+.inline-block-element {
+    display: inline-block;
+}
+
 .override-reset-button {
     width: fit-content;
     height: fit-content;
@@ -177,4 +180,11 @@ span.Scenario__inline {
 
 .override-setting-divider {
     margin-top: 20px;
+}
+
+.override-dropdown-icon {
+    margin-left: 1rem;
+    margin-bottom: -1rem;
+    width: 2rem;
+    height: 2rem;
 }
diff --git a/src/renderer/components/HelmetProject/HelmetScenario/HelmetScenario.jsx b/src/renderer/components/HelmetProject/HelmetScenario/HelmetScenario.jsx
@@ -1,12 +1,23 @@
 import React, {useState} from 'react';
 import path from 'path';
+import _ from 'lodash';
 const {dialog} = require('@electron/remote');
 const classNames = require('classnames');
 
 const HelmetScenario = ({projectPath, scenario, updateScenario, closeScenario, existingOtherNames, inheritedGlobalProjectSettings}) => {
 
   const [nameError, setNameError] = useState("");
 
+  const hasOverriddenSettings = (scenario) => {
+    const overriddenSetting = _.find(scenario.overriddenProjectSettings, (setting) => {
+      return setting;
+    })
+    return overriddenSetting !== undefined ? true : false;
+  }
+
+  //Open override settings by default if atleast one of the settings is overridden
+  const [showOverrides, setShowOverrides] = useState(hasOverriddenSettings(scenario));
+
   return (
     <div className="Scenario" key={scenario.id}>
 
@@ -227,8 +238,10 @@ const HelmetScenario = ({projectPath, scenario, updateScenario, closeScenario, e
       </div>
       <hr class="override-setting-divider"/>
           <div>
-            <h4>Skenaariokohtaiset yliajot</h4>
-            <div className="Scenario__section">
+            <h4 className="inline-element">Skenaariokohtaiset yliajot</h4> <div onClick={() => setShowOverrides(!showOverrides)} className="override-dropdown-icon inline-block-element"> { showOverrides ? <ArrowUp/> : <ArrowDown/> } </div>
+            { showOverrides && 
+              <div>
+                <div className="Scenario__section">
               <label className="Scenario__pseudo-label Scenario__pseudo-label--inline project-override-setting">
                 <span className="inline-element override-setting">EMME Python polku</span>
                 { scenario.overriddenProjectSettings.emmePythonPath && 
@@ -392,6 +405,8 @@ const HelmetScenario = ({projectPath, scenario, updateScenario, closeScenario, e
                 />
               </label>
             </div>
+              </div> 
+            }
           </div>
       </div>
     </div>

diff --git a/src/renderer/components/HelmetProject/RunLog/RunLog.jsx b/src/renderer/components/HelmetProject/RunLog/RunLog.jsx
@@ -2,7 +2,6 @@ import React, {useState} from 'react';
 
 const RunLog = ({isScenarioRunning, entries, closeRunLog}) => {
 
-  const [showUIEVENT, setShowUIEVENT] = useState(true);
   const [showINFO, setShowINFO] = useState(true);
   const [showWARN, setShowWARN] = useState(true);
   const [showERROR, setShowERROR] = useState(true);
@@ -19,11 +18,6 @@ const RunLog = ({isScenarioRunning, entries, closeRunLog}) => {
       <div className="Log__header">
 
         <div className="Log__header-controls">
-          <button className={"Log__header-control" + (showUIEVENT ? " Log__header-control--on" : "")}
-                  onClick={(e) => setShowUIEVENT(prevState => !prevState)}
-          >
-            UI-event
-          </button>
           <button className={"Log__header-control" + (showINFO ? " Log__header-control--on" : "")}
                   onClick={(e) => setShowINFO(prevState => !prevState)}
           >
@@ -52,14 +46,14 @@ const RunLog = ({isScenarioRunning, entries, closeRunLog}) => {
         {entries.map((entry) => {
           switch (entry.level) {
             case "UI-event":
-              return showUIEVENT ?
+              return showINFO ?
                 <div className={"Log__entry Log__entry--ui"} key={entry.id}>
                   {`[${entry.level}] ${entry.message}`}
                 </div>
                 :
                 "";
 
-            case "INFO":
+            case "INFO" || "UI-event":
               const d = new Date(entry.time);
               const timestamp = `${('00'+d.getHours()).slice(-2)}:${('00'+d.getMinutes()).slice(-2)}`;
               return showINFO ?

diff --git a/src/renderer/components/HelmetProject/Runtime/RunStatus/RunStatus.jsx b/src/renderer/components/HelmetProject/Runtime/RunStatus/RunStatus.jsx
@@ -96,7 +96,7 @@ const RunStatus = ({isScenarioRunning, statusIterationsTotal, statusIterationsCo
             </button>
             &nbsp;
             <button className="Status__finished-scenario-logfile-link"
-              onClick={() => statusReadyScenariosLogfiles.resultsPath[1] !== undefined ? shell.openPath(statusReadyScenariosLogfiles.resultsPath) : ''}
+              onClick={() => statusReadyScenariosLogfiles.resultsPath[1] !== undefined ? shell.showItemInFolder(statusReadyScenariosLogfiles.resultsPath) : ''}
             >
               Tulokset
             </button>

diff --git a/src/renderer/components/HelmetProject/Runtime/Runtime.jsx b/src/renderer/components/HelmetProject/Runtime/Runtime.jsx
@@ -14,9 +14,16 @@ const Runtime = ({
   const visibleTooltipProperties = [
       'emme_project_file_path',
       'first_scenario_id',
+      'first_matrix_id',
       'forecast_data_folder_path',
       'save_matrices_in_emme',
       'end_assignment_only',
+      'delete_strategy_files',
+      'id',
+      'name',
+      'iterations',
+      'separate_emme_scenarios',
+      'use_fixed_transit_cost',
       'overriddenProjectSettings'
   ];
 
@@ -140,6 +147,7 @@ const Runtime = ({
         {scenarios.map((s) => {
           // Component for the tooltip showing scenario settings
           const tooltipContent = (scenario) => {
+            console.log(scenario);
             const filteredScenarioSettings = _.pickBy(scenario, (settingValue, settingKey) => {
               return visibleTooltipProperties.includes(settingKey);
             })

diff --git a/src/renderer/icons/ArrowDown.jsx b/src/renderer/icons/ArrowDown.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const ArrowDown = () => {
+  return (
+    <svg version="1.1" id="Layer_1" x="0px" y="0px"
+	 viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" space="preserve">
+        <g>
+            <path fill="#007AC9" d="M-0.003,248.028c0,19.488,15.945,35.434,35.434,35.434h212.598
+                c19.489,0,35.434-15.946,35.434-35.434V35.43c0-19.488-15.945-35.432-35.434-35.432H35.431c-19.489,0-35.434,15.944-35.434,35.432
+                V248.028z"/>
+        </g>
+        <g>
+            <path fill="#FFFFFF" d="M56.118,149.487c0,0,77.177,77.182,77.839,77.843c0.731,0.661,3.421,3.221,7.768,3.221
+                c4.348,0,7.106-2.56,7.758-3.212l0.002-0.002l77.848-77.85c4.285-4.285,4.285-11.232,0-15.52
+                c-4.285-4.283-11.234-4.283-15.52,0.002l-59.117,59.118l0.003-129.201c0-6.06-4.913-10.972-10.974-10.972
+                c-6.06,0-10.974,4.912-10.974,10.972v129.201l-59.112-59.118c-4.286-4.285-11.233-4.285-15.519-0.002
+                C51.835,138.255,51.835,145.202,56.118,149.487"/>
+        </g>
+    </svg>
+    )
+}
diff --git a/src/renderer/icons/ArrowUp.jsx b/src/renderer/icons/ArrowUp.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const ArrowUp = () => {
+  return (
+    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+      viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" space="preserve">
+      <g>
+        <path fill="#007AC9" d="M-0.003,248.028c0,19.488,15.945,35.434,35.434,35.434h212.598
+          c19.489,0,35.434-15.946,35.434-35.434V35.43c0-19.488-15.945-35.432-35.434-35.432H35.431c-19.489,0-35.434,15.944-35.434,35.432
+          V248.028z"/>
+      </g>
+      <g>
+        <path fill="#FFFFFF" d="M227.336,133.975c0,0-77.177-77.182-77.839-77.843c-0.731-0.661-3.421-3.221-7.768-3.221
+          c-4.348,0-7.106,2.56-7.758,3.212l-0.002,0.002l-77.848,77.85c-4.285,4.285-4.285,11.232,0,15.52
+          c4.285,4.283,11.234,4.283,15.52-0.002l59.117-59.118l-0.003,129.201c0,6.06,4.913,10.972,10.974,10.972
+          c6.06,0,10.974-4.912,10.974-10.972V90.375l59.112,59.118c4.286,4.285,11.233,4.285,15.519,0.002
+          C231.619,145.207,231.619,138.26,227.336,133.975"/>
+      </g>
+    </svg>
+    )
+}
diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -38,6 +38,8 @@
     <script type="text/babel" src="../enums.js"></script>
     <script type="text/babel" src="./icons/ResetIcon.jsx"></script>
     <script type="text/babel" src="./icons/DocumentationIcon.jsx"></script>
+    <script type="text/babel" src="./icons/ArrowDown.jsx"></script>
+    <script type="text/babel" src="./icons/ArrowUp.jsx"></script>
 </head>
 <body>