Merge pull request #237 from wearepal/2024-tweaks

datasets sorting and grouping, adjustment to previous change regarding visibility of extent button
wearepal · Jan 2, 2024 · 3f4f8df · 3f4f8df
2 parents b163dd3 + dba8bb6
commit 3f4f8df
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 22 deletions.
diff --git a/app/javascript/projects/modelling/components/dataset_component.ts b/app/javascript/projects/modelling/components/dataset_component.ts
@@ -35,6 +35,7 @@ export class PrecompiledModelComponent extends BaseComponent {
     async builder(node: Node) {
 
         this.models = await this.modelSource()
+        this.models.sort((a, b) => a.name.localeCompare(b.name))
 
         node.meta.toolTip = "Load a precompiled dataset. These can be created from the 'Save Dataset' component."
 

diff --git a/app/javascript/projects/modelling/controls/select.tsx b/app/javascript/projects/modelling/controls/select.tsx
@@ -1,3 +1,4 @@
+import { style } from "d3"
 import * as React from "react"
 import { Control, Emitter } from 'rete'
 import { EventsTypes } from "rete/types/events"
@@ -14,6 +15,7 @@ interface SelectControlProps {
 interface SelectControlOptions {
     id: number
     name: string
+    gridtype? : string
 }
 
 const SelectInput = ({ emitter, getId, setId, getOptions, change, label }: SelectControlProps) => {
@@ -29,24 +31,73 @@ const SelectInput = ({ emitter, getId, setId, getOptions, change, label }: Selec
 
         emitter?.trigger("process")
     }
+
+    if(getOptions()[0].gridtype) {
+        const numeric = getOptions().filter(opt => opt.gridtype == "NumericTileGrid")
+        const categorical = getOptions().filter(opt => opt.gridtype == "CategoricalTileGrid")
+        const boolean = getOptions().filter(opt => opt.gridtype == "BooleanTileGrid")
 
-    return (
-        <label style={{ display: "block" }}>
-            {label}
-            <select
-                className="custom-select d-block"
-                style={{ maxWidth: "400px" }}
-                onChange={onChange}
-                value={getId()}
-            >
-                {
-                    getOptions().map(opt =>
-                        <option value={opt.id} key={opt.id}>{opt.name}</option>
-                    )
-                }
-            </select>
-        </label>
-    )
+        return (
+            <label style={{ display: "block" }}>
+                {label}
+                <select
+                    className="custom-select d-block"
+                    style={{ maxWidth: "400px" }}
+                    onChange={onChange}
+                    value={getId()}
+                >
+                    <optgroup label="Numeric">
+                        {
+                            numeric.map(opt =>
+                                <option value={opt.id} key={opt.id}>
+                                    {opt.name}
+                                </option>
+                            )
+                        }
+                    </optgroup>
+                    <optgroup label="Categorical">
+                        {
+                            categorical.map(opt =>
+                                <option value={opt.id} key={opt.id}>
+                                    {opt.name}
+                                </option>
+                            )
+                        }
+                    </optgroup>
+                    <optgroup label="Boolean">
+                        {
+                            boolean.map(opt =>
+                                <option value={opt.id} key={opt.id}>
+                                    {opt.name}
+                                </option>
+                            )
+                        }
+                    </optgroup>
+                </select>
+            </label>
+        )
+
+    }else{
+        return (
+            <label style={{ display: "block" }}>
+                {label}
+                <select
+                    className="custom-select d-block"
+                    style={{ maxWidth: "400px" }}
+                    onChange={onChange}
+                    value={getId()}
+                >
+                    {
+                        getOptions().map(opt =>
+                            <option value={opt.id} key={opt.id}>
+                                {opt.name}
+                            </option>
+                        )
+                    }
+                </select>
+            </label>
+        )
+    }
 
 }
 

diff --git a/app/javascript/projects/toolbar.tsx b/app/javascript/projects/toolbar.tsx
@@ -40,8 +40,9 @@ export const Toolbar = ({ backButtonPath, projectName, hasUnsavedChanges, curren
       </button>
     </div>    
     {
-      currentTab == Tab.MapView  &&
       <div className="btn-group mr-2">
+      {
+        currentTab == Tab.ModelView  &&
         <a onClick={()=> {
               const editUrl = `${window.location}/edit`
               if(hasUnsavedChanges) {
@@ -52,11 +53,12 @@ export const Toolbar = ({ backButtonPath, projectName, hasUnsavedChanges, curren
             }
           }
         >
-          <button className={`btn btn-sm btn-outline-primary`}  onMouseEnter={() => setShowExtent(true)} onMouseLeave={() => setShowExtent(false)}>
-          <i className="fas fa-square" /> Extent
-        </button>
+          <button className={`btn btn-sm btn-outline-primary`}>
+            <i className="fas fa-square" /> Extent
+          </button>
         </a>
-        <div title={`Zoom level = ${zoomLevel}`} className="p-1 " style={{backgroundColor: zoomLevel > 20 ? "green" : (zoomLevel < 20 ? "orange" : "yellow"), fontSize: ".9em"}}>
+      }
+        <div onMouseEnter={() => setShowExtent(true)} onMouseLeave={() => setShowExtent(false)} title={`Zoom level = ${zoomLevel}`} className="p-1 " style={{backgroundColor: zoomLevel > 20 ? "green" : (zoomLevel < 20 ? "orange" : "yellow"), fontSize: ".9em"}}>
           {zoomLevel > 20 ? "High" : (zoomLevel < 20 ? "Low" : "Med")}
         </div>
       </div>