From 141d5330a788a7bc89197e0d16701ab3a505f7b7 Mon Sep 17 00:00:00 2001
From: pietervdvn <pietervdvn@posteo.net>
Date: Mon, 24 Jan 2022 00:19:01 +0100
Subject: [PATCH] Small tweaks

---
 UI/ImportFlow/PreviewPanel.ts | 88 ++++++++++++++++++++---------------
 1 file changed, 50 insertions(+), 38 deletions(-)

diff --git a/UI/ImportFlow/PreviewPanel.ts b/UI/ImportFlow/PreviewPanel.ts
index 352fda8cd..637648d92 100644
--- a/UI/ImportFlow/PreviewPanel.ts
+++ b/UI/ImportFlow/PreviewPanel.ts
@@ -14,10 +14,10 @@ import CheckBoxes from "../Input/Checkboxes";
 /**
  * Shows the data to import on a map, asks for the correct layer to be selected
  */
-export class PreviewPanel extends Combine implements FlowStep<{ features: { properties: any, geometry: { coordinates: [number, number] } }[] }>{
+export class PreviewPanel extends Combine implements FlowStep<{ features: { properties: any, geometry: { coordinates: [number, number] } }[] }> {
     public readonly IsValid: UIEventSource<boolean>;
-    public readonly Value: UIEventSource< { features: { properties: any, geometry: { coordinates: [number, number] } }[] }>
-    
+    public readonly Value: UIEventSource<{ features: { properties: any, geometry: { coordinates: [number, number] } }[] }>
+
     constructor(
         state: UserRelatedState,
         geojson: { features: { properties: any, geometry: { coordinates: [number, number] } }[] }) {
@@ -29,70 +29,82 @@ export class PreviewPanel extends Combine implements FlowStep<{ features: { prop
         for (const f of geojson.features) {
             Object.keys(f.properties).forEach(key => propertyKeys.add(key))
         }
-        
-        const attributeOverview : BaseUIElement[] = []
+
+        const attributeOverview: BaseUIElement[] = []
 
         const n = geojson.features.length;
         for (const key of Array.from(propertyKeys)) {
-            
+
             const values = Utils.NoNull(geojson.features.map(f => f.properties[key]))
+            console.log("There are ",values.length,"features with attribute",key, "namely",values)
             const allSame = !values.some(v => v !== values[0])
-            if(allSame){
-                attributeOverview.push(new Title(key+"="+values[0]))
-                if(values.length === n){
-                attributeOverview.push(t.allAttributesSame)
-                }else{
-                    attributeOverview.push(t.someHaveSame.Subs({count: values.length, percentage: Math.floor(100 * values.length / n)}))
-                }
+            let countSummary: BaseUIElement
+            if (values.length === n) {
+                countSummary = t.allAttributesSame
+            } else {
+                countSummary = t.someHaveSame.Subs({
+                    count: values.length,
+                    percentage: Math.floor(100 * values.length / n)
+                })
+            }
+            if (allSame) {
+                attributeOverview.push(new Title(key + "=" + values[0]))
+                attributeOverview.push(countSummary)
                 continue
             }
 
             const uniqueCount = new Set(values).size
-            if(uniqueCount !== values.length){
+            if (uniqueCount !== values.length) {
                 attributeOverview.push()
                 // There are some overlapping values: histogram time!
-                let hist : BaseUIElement = new Histogram(
-                    new UIEventSource<string[]>(values),
-                    "Value",
-                    "Occurence",
-                    {
-                        sortMode: "count-rev"
-                    }
-                    
-                )
-                
-                const title = new Title(key+"=*")
-                if(uniqueCount > 15){
-                    hist = new Toggleable(title, 
+                let hist: BaseUIElement =
+                    new Combine([
+                        countSummary,
+                        new Histogram(
+                            new UIEventSource<string[]>(values),
+                            "Value",
+                            "Occurence",
+                            {
+                                sortMode: "count-rev"
+                            })
+                    ]).SetClass("flex flex-col")
+
+
+                const title = new Title(key + "=*")
+                if (uniqueCount > 15) {
+                    hist = new Toggleable(title,
                         hist.SetClass("block")
                     ).Collapse()
-                    
-                }else{
+
+                } else {
                     attributeOverview.push(title)
                 }
-                
+
                 attributeOverview.push(hist)
                 continue
             }
-        
+
             // All values are different, we add a boring (but collapsable) list
             attributeOverview.push(new Toggleable(
-                new Title(key+"=*"),
+                new Title(key + "=*"),
+                new Combine([
+                    countSummary,
                     new List(values)
-            ) )
+                ])
+            ))
 
         }
-        
+
         const confirm = new CheckBoxes([t.inspectLooksCorrect])
-        
+
         super([
-            new Title(t.inspectDataTitle.Subs({count:geojson.features.length })),
+            new Title(t.inspectDataTitle.Subs({count: geojson.features.length})),
             ...attributeOverview,
             confirm
         ]);
 
-        this.Value = new UIEventSource<{features: {properties: any; geometry: {coordinates: [number, number]}}[]}>(geojson)
+        this.Value = new UIEventSource<{ features: { properties: any; geometry: { coordinates: [number, number] } }[] }>(geojson)
         this.IsValid = confirm.GetValue().map(selected => selected.length == 1)
-        
+
     }
 }
\ No newline at end of file