GH-160: Allow dynamic sorting of Decision Tree levels

ui/workflows/C/2/levels/actions.js

@@ -1,10 +1,65 @@
 import { arrayMove } from 'react-sortable-hoc'
+import client from '~/utils/client'
+import { errorHandler } from '~/utils/toast'
 
 export const setFields = fields => ({
   type: 'POSTPROCESSING.SET_FIELDS',
   data: fields,
 })
 
-export const onFieldsSortEnd = (fields, oldIndex, newIndex) => async dispatch => {
+export const onFieldsSortEnd = (
+  fields,
+  thrGridIn,
+  thrGridOut,
+  oldIndex,
+  newIndex
+) => async dispatch => {
   await dispatch(setFields(arrayMove(fields, oldIndex, newIndex)))
+
+  const sortGrid = grid =>
+    oldIndex < newIndex
+      ? grid.map(row =>
+          arrayMove(
+            arrayMove(row, oldIndex * 2 + 1, newIndex * 2 + 2),
+            oldIndex * 2 + 1,
+            newIndex * 2 + 2
+          )
+        )
+      : grid.map(row =>
+          arrayMove(
+            arrayMove(row, oldIndex * 2 + 1, newIndex * 2 + 1),
+            oldIndex * 2 + 2,
+            newIndex * 2 + 2
+          )
+        )
+
+  const newThrGridIn = sortGrid(thrGridIn)
+  await dispatch({
+    type: 'POSTPROCESSING.SET_THRESHOLD_SPLITS',
+    grid: newThrGridIn,
+  })
+
+  const labels = newThrGridIn[0].slice(1).map(cell => cell.value)
+  const records = newThrGridIn
+    .slice(1)
+    .map(row => _.flatMap(row.slice(1), cell => cell.value))
+
+  const minIndex = oldIndex < newIndex ? oldIndex : newIndex
+
+  client
+    .post('/postprocessing/create-wt-matrix', { labels, records })
+    .then(response => {
+      const sortedThrGridOut = sortGrid(thrGridOut)
+      const fullThrGridOut = response.data.matrix
+
+      dispatch({
+        type: 'POSTPROCESSING.SET_WT_MATRIX',
+        grid: sortedThrGridOut.map((row, idx) => {
+          const left = row.slice(0, minIndex * 2 + 1)
+          const right = fullThrGridOut[idx].slice(minIndex * 2)
+          return left.concat(right)
+        }),
+      })
+    })
+    .catch(errorHandler)
 }

ui/workflows/C/2/levels/component.js

@@ -1,6 +1,6 @@
-import React, { Component } from 'react'
+import React from 'react'
 
-import { Grid, Card, Button, Icon, Segment, Item, Input } from 'semantic-ui-react'
+import { Segment } from 'semantic-ui-react'
 
 import { SortableContainer, SortableElement } from 'react-sortable-hoc'
 
@@ -25,12 +25,18 @@ const Levels = props => (
     <SortableList
       items={props.fields}
       onSortEnd={({ oldIndex, newIndex }) =>
-        props.onFieldsSortEnd(props.fields, oldIndex, newIndex)
+        props.onFieldsSortEnd(
+          props.fields,
+          props.thrGridIn,
+          props.thrGridOut,
+          oldIndex,
+          newIndex
+        )
       }
     />
     <small>
-      <b>Note:</b> Modifying the current arrangement will clear the threshold
-      breakpoints in the sheet below.
+      <b>⚠️ Caution:</b> Modifying the current arrangement will partially clear the
+      threshold breakpoints in the sheet below.
     </small>
   </>
 )

ui/workflows/C/2/levels/container.js

@@ -6,11 +6,13 @@ import { onFieldsSortEnd } from './actions'
 
 const mapStateToProps = state => ({
   fields: state.postprocessing.fields,
+  thrGridIn: state.postprocessing.thrGridIn,
+  thrGridOut: state.postprocessing.thrGridOut,
 })
 
 const mapDispatchToProps = dispatch => ({
-  onFieldsSortEnd: (fields, oldIndex, newIndex) =>
-    dispatch(onFieldsSortEnd(fields, oldIndex, newIndex)),
+  onFieldsSortEnd: (fields, thrGridIn, thrGridOut, oldIndex, newIndex) =>
+    dispatch(onFieldsSortEnd(fields, thrGridIn, thrGridOut, oldIndex, newIndex)),
 })
 
 export default connect(

ui/workflows/C/2/sparseBreakpoints/component.js

@@ -8,7 +8,6 @@ import _ from 'lodash'
 
 import client from '~/utils/client'
 import { errorHandler } from '~/utils/toast'
-import { realNumbers } from '~/utils/patterns'
 import { validateThresholdSequence } from './core'
 
 class SparseBreakpoints extends Component {