Merge remote-tracking branch 'origin/580-phylo-params-display-improvements' into dev

dist/styles/bootstrap-darkster.css

@@ -11998,6 +11998,19 @@ select.form-control {
 .phylo-details-tab__counter__value {
   font-weight: bold;
 }
+.phylo-details-tab__params {
+  margin: 16px 20px;
+}
+.phylo-details-tab__params__item {
+  margin-left: 16px;
+  list-style: initial;
+}
+.phylo-details-tab__params__label {
+  font-weight: bold;
+}
+.phylo-details-tab__params__value {
+  margin-left: 16px;
+}
 .phylo-details-tab__delimiter {
   margin: 16px 20px;
 }

dist/styles/bootstrap-default.css

@@ -11802,6 +11802,19 @@ select.form-control {
 .phylo-details-tab__counter__value {
   font-weight: bold;
 }
+.phylo-details-tab__params {
+  margin: 16px 20px;
+}
+.phylo-details-tab__params__item {
+  margin-left: 16px;
+  list-style: initial;
+}
+.phylo-details-tab__params__label {
+  font-weight: bold;
+}
+.phylo-details-tab__params__value {
+  margin-left: 16px;
+}
 .phylo-details-tab__delimiter {
   margin: 16px 20px;
 }

dist/styles/bootstrap-greyson.css

@@ -11652,6 +11652,19 @@ select.form-control {
 .phylo-details-tab__counter__value {
   font-weight: bold;
 }
+.phylo-details-tab__params {
+  margin: 16px 20px;
+}
+.phylo-details-tab__params__item {
+  margin-left: 16px;
+  list-style: initial;
+}
+.phylo-details-tab__params__label {
+  font-weight: bold;
+}
+.phylo-details-tab__params__value {
+  margin-left: 16px;
+}
 .phylo-details-tab__delimiter {
   margin: 16px 20px;
 }

dist/styles/bootstrap-herbie.css

@@ -11873,6 +11873,19 @@ select.form-control {
 .phylo-details-tab__counter__value {
   font-weight: bold;
 }
+.phylo-details-tab__params {
+  margin: 16px 20px;
+}
+.phylo-details-tab__params__item {
+  margin-left: 16px;
+  list-style: initial;
+}
+.phylo-details-tab__params__label {
+  font-weight: bold;
+}
+.phylo-details-tab__params__value {
+  margin-left: 16px;
+}
 .phylo-details-tab__delimiter {
   margin: 16px 20px;
 }

dist/styles/bootstrap-monotony.css

@@ -11946,6 +11946,19 @@ select.form-control {
 .phylo-details-tab__counter__value {
   font-weight: bold;
 }
+.phylo-details-tab__params {
+  margin: 16px 20px;
+}
+.phylo-details-tab__params__item {
+  margin-left: 16px;
+  list-style: initial;
+}
+.phylo-details-tab__params__label {
+  font-weight: bold;
+}
+.phylo-details-tab__params__value {
+  margin-left: 16px;
+}
 .phylo-details-tab__delimiter {
   margin: 16px 20px;
 }

src/Gargantext/Components/PhyloExplorer/Sidebar/DetailsTab.purs

@@ -75,8 +75,8 @@ detailsTabCpt = here.component "" cpt where
         -- Phylo params
         H.ul
         { className: "phylo-details-tab__counter" }
-        [ detailsTimeUnit c.timeUnit
-        , detailsParams c.levelOfObservation "Level of observation"
+        [ detailsParams c.levelOfObservation "Level of observation"
+        , detailsTimeUnit c.timeUnit
         , detailsClique c.clique 
         , detailsParams c.proximity "Proximity"
         , detailsParams c.synchrony "Synchrony"
@@ -104,27 +104,118 @@ detailsCount value label =
 
 detailsParams :: forall a. (Show a) => a -> String -> R.Element
 detailsParams value label = 
-  H.li {} [ H.text $ label <> ": " <> show value ]
+  H.li 
+  { className: "phylo-details-tab__params__item"} 
+  [
+    H.span 
+    { className: "phylo-details-tab__params__label"} 
+    [ 
+      H.text $ label <> ":"
+    ]
+  ,
+    H.span
+    { className: "phylo-details-tab__params__value"}
+    [ H.text $ show value]
+  ]
 
 detailsClique :: Cluster -> R.Element
 detailsClique c =
-  H.li {} [ H.text $ "Cluster algo: " <> parseClique c]
+  R.fragment [
+    H.li 
+    { className: "phylo-details-tab__params__item"} 
+    [ H.span 
+      { className: "phylo-details-tab__params__label"} 
+      [ H.text "Topic detection strategy" ]
+    ]
+  ,
+    H.ul 
+    { className: "phylo-details-tab__counter" } 
+    (parseClique c)
+  ]  
   where
-    parseClique (Fis { _fis_support, _fis_size }) = "FIS. Support: " <> show _fis_support <> ". Size: " <> show _fis_size
+    parseClique :: Cluster -> Array R.Element
+    parseClique (Fis { _fis_support, _fis_size }) =
+      [
+          detailsParams "Fis" "Algorithm"
+        ,
+          detailsParams _fis_support "Support"
+        ,
+          detailsParams _fis_size "Size"
+      ]
     parseClique (MaxClique { _mcl_size, _mcl_threshold, _mcl_filter}) =
-      "MaxClique. Size: " <> show _mcl_size <> ". Threshhold: " <> show _mcl_threshold <> ". Filter: " <> _mcl_filter
+      [ 
+        detailsParams "MaxClique" "Algorithm"
+      ,
+        detailsParams _mcl_size "Size"
+      ,
+        detailsParams _mcl_threshold "Threshold"
+      ,
+        detailsParams _mcl_filter "Filter"
+      ]
 
 detailsTimeUnit :: TimeUnit -> R.Element
 detailsTimeUnit t =
-  H.li {} [ H.text $ "Time unit: " <> parseTimeUnit t]
+  R.fragment [
+    H.li 
+    { className: "phylo-details-tab__params__item" }
+    [ H.span 
+      { className: "phylo-details-tab__params__label" }
+      [ H.text "Inter-temporal Matching" ]
+    ]
+  ,
+    H.ul 
+    { className: "phylo-details-tab__counter" } 
+    (parseTimeUnit t)
+  ]
   where
-    parseTimeUnit (Epoch {_epoch_period, _epoch_step, _epoch_matchingFrame}) = 
-      "Epoch. Period: " <> show _epoch_period <> ". Step: " <> show _epoch_step <>". Matching frame: " <> show _epoch_matchingFrame
+    parseTimeUnit :: TimeUnit -> Array R.Element
+    parseTimeUnit (Epoch {_epoch_period, _epoch_step, _epoch_matchingFrame}) =
+      [
+        detailsParams "Epoch" "Time unit"
+      ,
+        detailsParams _epoch_period "Period"
+      ,
+        detailsParams _epoch_step "Step"
+      ,
+        detailsParams _epoch_matchingFrame "Matching frame"
+      ] 
     parseTimeUnit (Year {_year_period, _year_step, _year_matchingFrame}) = 
-      "Year. Period: " <> show _year_period <> ". Step: " <> show _year_step <>". Matching frame: " <> show _year_matchingFrame
+      [
+        detailsParams "Year" "Time unit"
+      ,
+        detailsParams _year_period "Period"
+      ,
+        detailsParams _year_step "Step"
+      ,
+        detailsParams _year_matchingFrame "Matching frame"
+      ]
     parseTimeUnit (Month {_month_period, _month_step, _month_matchingFrame}) = 
-      "Month. Period: " <> show _month_period <> ". Step: " <> show _month_step <>". Matching frame: " <> show _month_matchingFrame
-    parseTimeUnit (Week {_week_period, _week_step, _week_matchingFrame}) = 
-      "Week. Period: " <> show _week_period <> ". Step: " <> show _week_step <>". Matching frame: " <> show _week_matchingFrame
+      [
+        detailsParams "Month" "Time unit"
+      ,
+        detailsParams _month_period "Period"
+      ,
+        detailsParams _month_step "Step"
+      ,
+        detailsParams _month_matchingFrame "Matching frame"
+      ]
+    parseTimeUnit (Week {_week_period, _week_step, _week_matchingFrame}) =
+      [
+        detailsParams "Week" "Time unit"
+      ,
+        detailsParams _week_period "Period"
+      ,
+        detailsParams _week_step "Step"
+      ,
+        detailsParams _week_matchingFrame "Matching frame"
+      ] 
     parseTimeUnit (Day {_day_period, _day_step, _day_matchingFrame}) = 
-      "Day. Period: " <> show _day_period <> ". Step: " <> show _day_step <>". Matching frame: " <> show _day_matchingFrame
+      [
+        detailsParams "Day" "Time unit"
+      ,
+        detailsParams _day_period "Period"
+      ,
+        detailsParams _day_step "Step"
+      ,
+        detailsParams _day_matchingFrame "Matching frame"
+      ]

src/sass/_legacy/_phylo.scss

@@ -586,6 +586,23 @@ $decreasing-color: #11638F;
     }
   }
 
+  &__params {
+    margin: $margin-y $margin-x;
+
+    &__item {
+      margin-left: space-x(2);
+      list-style: initial;
+    }
+
+    &__label {
+      font-weight: bold;
+    }
+
+    &__value {
+      margin-left: space-x(2);
+    }
+  }
+
   &__delimiter {
     margin: $margin-y $margin-x;
   }