diff --git a/app/components/compare-reasons.jsx b/app/components/compare-reasons.jsx
deleted file mode 100644
index b0d4cf0f0..000000000
--- a/app/components/compare-reasons.jsx
+++ /dev/null
@@ -1,88 +0,0 @@
-// https://github.com/EnCiv/civil-pursuit/issues/77
-
-'use strict'
-import React, { useEffect, useState } from 'react'
-import { createUseStyles } from 'react-jss'
-import PairCompare from './pair-compare'
-import { H, Level } from 'react-accessible-headings'
-
-function CompareReasons(props) {
-  const { pointList = [], side = '', onDone = () => {}, className, ...otherProps } = props
-  const classes = useStyles()
-  const [completedPoints, setCompletedPoints] = useState(new Set())
-  const [percentDone, setPercentDone] = useState(0)
-
-  useEffect(() => {
-    if (completedPoints.size === pointList.length) {
-      onDone({ valid: true, value: percentDone })
-    } else {
-      onDone({ valid: false, value: percentDone })
-    }
-  }, [completedPoints, percentDone])
-
-  useEffect(() => {
-    if (pointList.length === 0) setPercentDone(100)
-    else {
-      setPercentDone(Number(((completedPoints.size / pointList.length) * 100).toFixed(2)))
-    }
-  }, [completedPoints, pointList])
-
-  const handlePairCompare = ({ valid, value }, idx) => {
-    setCompletedPoints(prevPoints => {
-      const updatedPoints = new Set(prevPoints)
-      if (valid) {
-        updatedPoints.add(idx)
-      } else {
-        updatedPoints.delete(idx)
-      }
-      return updatedPoints
-    })
-  }
-
-  return (
-    <div className={classes.container} {...otherProps}>
-      {pointList.map((headlinePoint, idx) => (
-        <div key={idx} className={classes.headlinePoint}>
-          <H className={classes.headlineTitle}>Please choose the most convincing explanation for...</H>
-          <H className={classes.headlineSubject}>{headlinePoint.subject}</H>
-          <Level>
-            <PairCompare
-              className={classes.pairCompare}
-              pointList={side === 'most' ? headlinePoint.reasonPoints?.most : headlinePoint.reasonPoints?.least}
-              onDone={value => handlePairCompare(value, idx)}
-            />
-          </Level>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-const useStyles = createUseStyles(theme => ({
-  container: {
-    fontFamily: theme.font.fontFamily,
-  },
-  headlinePoint: {
-    borderTop: '0.0625rem solid #000000',
-    marginBottom: '4rem',
-    paddingTop: '2rem',
-    '&:first-child': {
-      borderTop: 'none',
-    },
-  },
-  headlineTitle: {
-    fontWeight: '600',
-    fontSize: '1.5rem',
-    lineHeight: '2rem',
-  },
-  headlineSubject: {
-    fontWeight: '300',
-    fontSize: '2.25rem',
-    lineHeight: '2.9375rem',
-  },
-  pairCompare: {
-    marginTop: '1rem',
-  },
-}))
-
-export default CompareReasons
diff --git a/app/components/deliberation-context.js b/app/components/deliberation-context.js
index 61e6a393d..b58f3ad81 100644
--- a/app/components/deliberation-context.js
+++ b/app/components/deliberation-context.js
@@ -1,5 +1,6 @@
 import React, { createContext, useCallback, useState, useRef } from 'react'
-import { merge } from 'lodash'
+import setOrDeleteByMutatePath from '../lib/set-or-delete-by-mutate-path'
+
 export const DeliberationContext = createContext({})
 export default DeliberationContext
 
@@ -12,19 +13,9 @@ export function DeliberationContextProvider(props) {
   const upsert = useCallback(
     obj => {
       setData(data => {
-        // if something changes in a top level prop, the top level ref has to be changed so it will cause a rerender
-        const newData = { ...data }
-        Object.keys(obj).forEach(key => {
-          if (typeof obj[key] !== 'object') {
-            newData[key] = obj[key]
-          } else {
-            const newProp = Array.isArray(obj[key]) ? [] : {}
-            merge(newProp, data[key], obj[key])
-            newData[key] = newProp
-          }
-        })
-        deriveReducedPointList(newData, local)
-        return newData // spread because we need to return a new reference
+        let newData = setOrDeleteByMutatePath(data, obj)
+        newData = deriveReducedPointList(newData, local)
+        return newData // is a new ref is there were changes above, or may be the original ref if no changes
       })
     },
     [setData]
@@ -53,10 +44,7 @@ export function deriveReducedPointList(data, local) {
   const { pointById, groupIdsLists } = data
   if (!pointById || !groupIdsLists) return data
   if (local.pointById === pointById && local.groupIdsList === groupIdsLists) return data // nothing to update
-  const reducedPointTable = Object.entries(pointById).reduce(
-    (reducedPointTable, [id, point]) => ((reducedPointTable[id] = { point }), reducedPointTable),
-    {}
-  )
+  const reducedPointTable = Object.entries(pointById).reduce((reducedPointTable, [id, point]) => ((reducedPointTable[id] = { point }), reducedPointTable), {})
   let updated = false
   for (const [firstId, ...groupIds] of groupIdsLists) {
     reducedPointTable[firstId].group = groupIds.map(id => reducedPointTable[id].point)
@@ -66,17 +54,15 @@ export function deriveReducedPointList(data, local) {
   // then copy them over so they are unchanged
   for (const pointWithGroup of data.reducedPointList) {
     const ptid = pointWithGroup.point._id
-    if (
-      reducedPointTable[ptid]?.point === pointWithGroup.point &&
-      aEqual(reducedPointTable[ptid]?.group, pointWithGroup.group)
-    )
-      reducedPointTable[ptid] = pointWithGroup // if contentss are unchanged - unchange the ref
+    if (reducedPointTable[ptid]?.point === pointWithGroup.point && aEqual(reducedPointTable[ptid]?.group, pointWithGroup.group)) reducedPointTable[ptid] = pointWithGroup // if contentss are unchanged - unchange the ref
     else updated = true
   }
   const newReducedPointList = Object.values(reducedPointTable)
   local.pointById = pointById
   local.groupIdsList = groupIdsLists
-  if (!(newReducedPointList.length === data.reducedPointList.length && !updated))
+  if (!(newReducedPointList.length === data.reducedPointList.length && !updated)) {
     data.reducedPointList = newReducedPointList
+    return { ...data }
+  }
   return data
 }
diff --git a/app/components/pair-compare.jsx b/app/components/pair-compare.jsx
index 9b648c9ea..e3b112bcd 100644
--- a/app/components/pair-compare.jsx
+++ b/app/components/pair-compare.jsx
@@ -1,170 +1,143 @@
 // https://github.com/EnCiv/civil-pursuit/issues/53
+// https://github.com/EnCiv/civil-pursuit/issues/200
 
 'use strict'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Point from './point'
 import { createUseStyles } from 'react-jss'
 import { SecondaryButton } from './button.jsx'
+import ObjectId from 'bson-objectid'
+import cx from 'classnames'
 
 function PairCompare(props) {
-  const { pointList = [], onDone = () => {}, mainPoint = { subject: '', description: '' }, ...otherProps } = props
+  const { whyRankList = [], onDone = () => {}, mainPoint = { subject: '', description: '' }, discussionId, round, ...otherProps } = props
 
   // idxLeft and idxRight can swap places at any point - they are simply pointers to the current two <Point/> elements
   const [idxLeft, setIdxLeft] = useState(0)
   const [idxRight, setIdxRight] = useState(1)
-
-  const isInitialRender = useRef(true)
-
-  const visibleRightPointRef = useRef(null)
-  const visibleLeftPointRef = useRef(null)
-  const hiddenLeftPointRef = useRef(null)
-  const hiddenRightPointRef = useRef(null)
-
-  const [pointsIdxCounter, setPointsIdxCounter] = useState(1)
-  const [selectedPoint, setSelectedPoint] = useState(null)
+  const [nextLeftPoint, setNextLeftPoint] = useState(null)
+  const [nextRightPoint, setNextRightPoint] = useState(null)
   const [isRightTransitioning, setIsRightTransitioning] = useState(false)
   const [isLeftTransitioning, setIsLeftTransitioning] = useState(false)
   const classes = useStyles()
-
-  useEffect(() => {
-    if (isSelectionComplete()) {
-      setSelectedPoint(pointList[idxLeft] ? pointList[idxLeft] : pointList[idxRight])
-    }
-  }, [pointsIdxCounter])
-
+  const [ranksByParentId, neverSetRanksByParentId] = useState(whyRankList.reduce((ranksByParentId, whyRank) => (whyRank.rank && (ranksByParentId[whyRank.rank.parentId] = whyRank.rank), ranksByParentId), {}))
+  // if all points are ranked, show the (first) one ranked most important, go to start over state
+  // otherwise compare the list
   useEffect(() => {
-    if (isInitialRender.current) {
-      isInitialRender.current = false
-      return
-    }
-
-    if (selectedPoint) {
-      onDone({ valid: true, value: selectedPoint })
-    } else {
-      onDone({ valid: false, value: null })
+    let selectedIdx
+    let updated = 0
+    whyRankList.forEach((whyRank, i) => {
+      if (whyRank.rank && ranksByParentId[whyRank.rank.parentId] !== whyRank.rank) {
+        updated++
+        ranksByParentId[whyRank.rank.parentId] = whyRank.rank
+        if (whyRank.rank.category === 'most') selectedIdx = i
+      }
+    })
+    const ranks = Object.values(ranksByParentId)
+    if (updated && ranks.length === whyRankList.length && ranks.length > 0 && ranks.every(rank => rank.category)) {
+      // skip if an update from above after the user has completed ranking - likely this is the initial render
+      setIdxLeft(selectedIdx ?? whyRankList.length) // idx could be 0
+      setIdxRight(whyRankList.length)
+      setTimeout(() => onDone({ valid: true, value: undefined }))
     }
-  }, [selectedPoint])
+  }, [whyRankList])
+
+  // send up the rank, and track it locally
+  function rankIdxCategory(idx, category) {
+    if (idx >= whyRankList.length) return // if only one to rank, this could be out of bounds
+    const value = ranksByParentId[whyRankList[idx]._id]
+      ? { ...ranksByParentId[whyRankList[idx]._id], category }
+      : {
+          _id: ObjectId().toString(),
+          category,
+          parentId: whyRankList[idx].why._id,
+          stage: 'why',
+          discussionId,
+          round,
+        }
+    ranksByParentId[value.parentId] = value
+    const ranks = Object.values(ranksByParentId)
+    const valid = ranks.length === whyRankList.length && ranks.every(rank => rank.category)
+    setTimeout(() => onDone({ valid, value }))
+  }
 
   const handleLeftPointClick = () => {
-    // prevent transitions from firing on last comparison
-    if (idxRight >= pointList.length - 1 || idxLeft >= pointList.length - 1) {
-      if (idxLeft >= idxRight) {
-        setIdxRight(idxLeft + 1)
-      } else {
-        setIdxRight(idxRight + 1)
-      }
-      setPointsIdxCounter(pointsIdxCounter + 1)
+    rankIdxCategory(idxRight, 'neutral')
+    if (Math.max(idxLeft, idxRight) + 1 >= whyRankList.length) {
+      // they've all been ranked
+      rankIdxCategory(idxLeft, 'most')
+      setIdxRight(whyRankList.length)
       return
     }
-
+    const nextRightIdx = Math.min(idxLeft >= idxRight ? idxLeft + 1 : idxRight + 1, whyRankList.length)
     setIsLeftTransitioning(true)
-    const visiblePointRight = visibleRightPointRef.current
-    const hiddenPointRight = hiddenRightPointRef.current
-
-    Object.assign(visiblePointRight.style, {
-      position: 'relative',
-      transform: 'translateX(200%)',
-      transition: 'transform 0.5s linear',
-    })
-    Object.assign(hiddenPointRight.style, {
-      position: 'absolute',
-      transform: 'translateY(8.25rem)',
-      transition: 'transform 0.5s linear',
-    })
+    setNextRightPoint(whyRankList[nextRightIdx].why)
 
     setTimeout(() => {
       setIsLeftTransitioning(false)
-      if (idxLeft >= idxRight) {
-        setIdxRight(idxLeft + 1)
-      } else {
-        setIdxRight(idxRight + 1)
-      }
-
-      setPointsIdxCounter(pointsIdxCounter + 1)
-
-      Object.assign(visiblePointRight.style, { position: '', transition: 'none', transform: '' })
-      Object.assign(hiddenPointRight.style, { position: '', transition: 'none', transform: '' })
+      setNextRightPoint(null)
+      setIdxRight(nextRightIdx)
     }, 500)
   }
 
   const handleRightPointClick = () => {
-    // prevent transitions from firing on last comparison
-    if (idxRight >= pointList.length - 1 || idxLeft >= pointList.length - 1) {
-      if (idxLeft >= idxRight) {
-        setIdxLeft(idxLeft + 1)
-      } else {
-        setIdxLeft(idxRight + 1)
-      }
-      setPointsIdxCounter(pointsIdxCounter + 1)
+    rankIdxCategory(idxLeft, 'neutral')
+    if (Math.max(idxLeft, idxRight) + 1 >= whyRankList.length) {
+      // they've all been ranked
+      rankIdxCategory(idxRight, 'most')
+      setIdxLeft(whyRankList.length)
       return
     }
-
+    const nextLeftIdx = Math.min(idxLeft >= idxRight ? idxLeft + 1 : idxRight + 1, whyRankList.length)
+    setNextLeftPoint(whyRankList[nextLeftIdx].why)
     setIsRightTransitioning(true)
-    const visiblePointLeft = visibleLeftPointRef.current
-    const hiddenPointLeft = hiddenLeftPointRef.current
-
-    Object.assign(visiblePointLeft.style, {
-      position: 'relative',
-      transform: 'translateX(-200%)',
-      transition: 'transform 0.5s linear',
-    })
-    Object.assign(hiddenPointLeft.style, {
-      position: 'absolute',
-      transform: 'translateY(8.25rem)',
-      transition: 'transform 0.5s linear',
-    })
 
     setTimeout(() => {
       setIsRightTransitioning(false)
-      if (idxLeft >= idxRight) {
-        setIdxLeft(idxLeft + 1)
-      } else {
-        setIdxLeft(idxRight + 1)
-      }
-
-      setPointsIdxCounter(pointsIdxCounter + 1)
-
-      Object.assign(visiblePointLeft.style, { position: '', transition: 'none', transform: '' })
-      Object.assign(hiddenPointLeft.style, { position: '', transition: 'none', transform: '' })
+      setNextLeftPoint(null)
+      setIdxLeft(nextLeftIdx)
     }, 500)
   }
 
   const handleNeitherButton = () => {
-    if (selectedPoint) return
+    rankIdxCategory(idxLeft, 'neutral')
+    rankIdxCategory(idxRight, 'neutral')
 
     if (idxLeft >= idxRight) {
-      setIdxRight(idxLeft + 1)
-      setIdxLeft(idxLeft + 2)
+      setIdxRight(Math.min(idxLeft + 1, whyRankList.length))
+      setIdxLeft(Math.min(idxLeft + 2, whyRankList.length))
     } else {
-      setIdxLeft(idxRight + 1)
-      setIdxRight(idxRight + 2)
+      setIdxLeft(Math.min(idxRight + 1, whyRankList.length))
+      setIdxRight(Math.min(idxRight + 2, whyRankList.length))
     }
-
-    setPointsIdxCounter(pointsIdxCounter + 2)
   }
 
   const handleStartOverButton = () => {
+    Object.values(ranksByParentId).forEach(rank => (rank.category = undefined)) // reset the categories so we can start again
     onDone({ valid: false, value: null })
     setIdxRight(1)
     setIdxLeft(0)
-    setPointsIdxCounter(1)
-    setSelectedPoint(null)
   }
 
-  const isSelectionComplete = () => {
-    return pointsIdxCounter >= pointList.length
+  const handleYes = () => {
+    if (idxLeft < whyRankList.length) {
+      rankIdxCategory(idxLeft, 'most')
+    } else if (idxRight < whyRankList.length) {
+      rankIdxCategory(idxRight, 'most')
+    }
+  }
+  const handleNo = () => {
+    if (idxLeft < whyRankList.length) {
+      rankIdxCategory(idxLeft, 'neutral')
+    } else if (idxRight < whyRankList.length) {
+      rankIdxCategory(idxRight, 'neutral')
+    }
   }
 
-  const nextIndex = idxLeft > idxRight ? idxLeft + 1 : idxRight + 1
-  const hiddenEmptyLeftPoint = <Point ref={hiddenLeftPointRef} className={classes.emptyPoint} />
-  const hiddenTransitioningLeftPoint = (
-    <Point ref={hiddenLeftPointRef} className={classes.emptyPoint} point={pointList[nextIndex]} />
-  )
-  const hiddenEmptyRightPoint = <Point ref={hiddenRightPointRef} className={classes.emptyPoint} />
-  const hiddenTransitioningRightPoint = (
-    <Point ref={hiddenRightPointRef} className={classes.emptyPoint} point={pointList[nextIndex]} />
-  )
-
+  const pointsIdxCounter = Math.max(idxLeft, idxRight)
+  const isSelectionComplete = pointsIdxCounter >= whyRankList.length
+  const ranks = isSelectionComplete && Object.values(ranksByParentId) // isSelectionComple here so we don't do work if not needed
+  const allRanked = isSelectionComplete && ranks.length === whyRankList.length && ranks.every(rank => rank.category) // isSelectionComple here so we don't do work if not needed
   return (
     <div className={classes.container} {...otherProps}>
       <div className={classes.mainPointContainer}>
@@ -172,55 +145,38 @@ function PairCompare(props) {
         <div className={classes.mainPointDescription}>{mainPoint.description}</div>
       </div>
 
-      <span className={isSelectionComplete() ? classes.statusBadgeComplete : classes.statusBadge}>{`${
-        pointsIdxCounter <= pointList.length ? pointsIdxCounter : pointList.length
-      } out of ${pointList.length}`}</span>
+      <span className={isSelectionComplete ? classes.statusBadgeComplete : classes.statusBadge}>{`${pointsIdxCounter <= whyRankList.length ? pointsIdxCounter : whyRankList.length} out of ${whyRankList.length}`}</span>
 
       <div className={classes.lowerContainer}>
         <div className={classes.hiddenPointContainer}>
-          {pointsIdxCounter < pointList.length && (
-            <div className={classes.hiddenPoint}>
-              {isRightTransitioning ? hiddenTransitioningLeftPoint : hiddenEmptyLeftPoint}
-            </div>
-          )}
-          {pointsIdxCounter < pointList.length && (
-            <div className={classes.hiddenPoint}>
-              {isLeftTransitioning ? hiddenTransitioningRightPoint : hiddenEmptyRightPoint}
-            </div>
-          )}
+          <div className={cx(classes.hiddenPoint, pointsIdxCounter >= whyRankList.length - 1 && classes.hidden)}>
+            <Point className={cx(classes.emptyPoint, isRightTransitioning && classes.transitioningDown)} point={nextLeftPoint} />
+          </div>
+          <div className={cx(classes.hiddenPoint, pointsIdxCounter >= whyRankList.length - 1 && classes.hidden)}>
+            <Point className={cx(classes.emptyPoint, isLeftTransitioning && classes.transitioningDown)} point={nextRightPoint} />
+          </div>
         </div>
-
         <div className={classes.visiblePointsContainer}>
-          {idxLeft < pointList.length && (
-            <button
-              className={classes.visiblePoint}
-              ref={visibleLeftPointRef}
-              onClick={handleLeftPointClick}
-              tabIndex={0}
-              title={`Choose as more important: ${pointList[idxLeft]?.subject}`}
-            >
-              {<Point point={pointList[idxLeft]} />}
+          {idxLeft < whyRankList.length && (
+            <button className={cx(classes.visiblePoint, isRightTransitioning && classes.transitioningLeft)} onClick={handleLeftPointClick} tabIndex={0} title={`Choose as more important: ${whyRankList[idxLeft]?.why.subject}`}>
+              {<Point point={whyRankList[idxLeft].why} />}
             </button>
           )}
-          {idxRight < pointList.length && (
-            <button
-              className={classes.visiblePoint}
-              ref={visibleRightPointRef}
-              onClick={handleRightPointClick}
-              tabIndex={0}
-              title={`Choose as more important: ${pointList[idxRight]?.subject}`}
-            >
-              {<Point point={pointList[idxRight]} />}
+          {idxRight < whyRankList.length && (
+            <button className={cx(classes.visiblePoint, isLeftTransitioning && classes.transitioningRight)} onClick={handleRightPointClick} tabIndex={0} title={`Choose as more important: ${whyRankList[idxRight]?.why.subject}`}>
+              {<Point point={whyRankList[idxRight].why} />}
             </button>
           )}
         </div>
-        <div className={classes.buttonsContainer}>
-          {!isSelectionComplete() ? (
-            <SecondaryButton onDone={handleNeitherButton}>Neither</SecondaryButton>
-          ) : (
-            <SecondaryButton onDone={handleStartOverButton}>Start Over</SecondaryButton>
-          )}
-        </div>
+        {!isSelectionComplete || allRanked ? (
+          <div className={classes.buttonsContainer}>{!isSelectionComplete ? <SecondaryButton onDone={handleNeitherButton}>Neither</SecondaryButton> : <SecondaryButton onDone={handleStartOverButton}>Start Over</SecondaryButton>}</div>
+        ) : (
+          <div className={classes.buttonsContainer}>
+            <SecondaryButton onDone={handleYes}>Yes</SecondaryButton>
+            <div style={{ width: '1rem', display: 'inline' }} />
+            <SecondaryButton onDone={handleNo}>No</SecondaryButton>
+          </div>
+        )}
       </div>
     </div>
   )
@@ -261,6 +217,9 @@ const useStyles = createUseStyles(theme => ({
     marginBottom: '1rem',
     clipPath: 'xywh(0 0 100% 500%)',
   },
+  hidden: {
+    display: 'none',
+  },
   hiddenPoint: {
     width: '30%',
   },
@@ -294,6 +253,21 @@ const useStyles = createUseStyles(theme => ({
     justifyContent: 'center',
     margin: '2rem auto',
   },
+  transitioningDown: {
+    position: 'absolute',
+    transform: 'translateY(8.25rem)',
+    transition: 'transform 0.5s linear',
+  },
+  transitioningLeft: {
+    position: 'relative',
+    transform: 'translateX(-200%)',
+    transition: 'transform 0.5s linear',
+  },
+  transitioningRight: {
+    position: 'relative',
+    transform: 'translateX(200%)',
+    transition: 'transform 0.5s linear',
+  },
 }))
 
 const sharedStatusBadgeStyle = () => ({
diff --git a/app/components/ranking.jsx b/app/components/ranking.jsx
index 75e85c326..34ae389b6 100644
--- a/app/components/ranking.jsx
+++ b/app/components/ranking.jsx
@@ -14,22 +14,19 @@ const selectedOption = (
 const unselectedOption = <rect x="1" y="1" width="22" height="22" rx="11" stroke="#06335C" strokeWidth="2" />
 
 export default function Ranking(props) {
-  //Isolate props and set initial state
   const { disabled, defaultValue, className, onDone, ...otherProps } = props
   let [response, setResponse] = useState(responseOptions.includes(defaultValue) ? defaultValue : '')
   useEffect(() => {
-    if (defaultValue) {
-      if (!responseOptions.includes(defaultValue)) {
-        setResponse(undefined)
-        onDone && onDone({ valid: false, value: '' })
-      } else {
-        setResponse(defaultValue)
-        onDone && onDone({ valid: true, value: defaultValue })
-      }
+    if (!defaultValue && !response) return // do not call onDone if initally empty, or if change to empty from above when it's already empty
+    if (responseOptions.includes(defaultValue)) {
+      setResponse(defaultValue)
+      onDone && onDone({ valid: true, value: defaultValue })
+    } else {
+      setResponse('')
+      onDone && onDone({ valid: false, value: '' })
     }
   }, [defaultValue])
 
-  //Introduce component styling
   const styleClasses = rankingStyleClasses(props)
 
   const onSelectionChange = e => {
@@ -38,23 +35,17 @@ export default function Ranking(props) {
     }
     setResponse(e.target.value)
     if (!onDone) {
-      return console.warn(
-        `Unhandled rank selection: ${e.target.value}. Please pass a handler function via the onDone prop.`
-      )
+      return console.warn(`Unhandled rank selection: ${e.target.value}. Please pass a handler function via the onDone prop.`)
     } else onDone({ valid: true, value: e.target.value })
    
   }
   return (
-    <div
-      data-value={response}
-      className={cx(className, styleClasses.group, disabled && styleClasses.disabled)}
-      {...otherProps}
-    >
+    <div data-value={response} className={cx(className, styleClasses.group, disabled && styleClasses.disabled)} {...otherProps}>
       {responseOptions.map(option => {
         return (
           <label key={option}>
             <input
-              disabled={disabled || false}
+              disabled={disabled || false} /**/
               checked={response === option}
               type="radio"
               value={option}
@@ -63,12 +54,7 @@ export default function Ranking(props) {
               onChange={onSelectionChange}
             ></input>
             <span className={cx(styleClasses.option)}>
-              <svg
-                className={cx(styleClasses.optionIcon)}
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
+              <svg className={cx(styleClasses.optionIcon)} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 {response === option ? selectedOption : unselectedOption}
               </svg>
               {option}
diff --git a/app/components/steps/__tests__/compare-whys.js b/app/components/steps/__tests__/compare-whys.js
new file mode 100644
index 000000000..bf889bdbb
--- /dev/null
+++ b/app/components/steps/__tests__/compare-whys.js
@@ -0,0 +1,152 @@
+// https://github.com/EnCiv/civil-pursuit/issues/215
+import { derivePointWithWhyRankListLisyByCategory } from '../compare-whys'
+jest.mock('react', () => {
+  const obj = {}
+  return {
+    // every call to useRef in this file will use the state from the first call plus updates along the way
+    // the real React code throws because it's not inside a render
+    useRef: jest.fn(val => (typeof obj.current === 'undefined' && (obj.current = val), obj)),
+    // mocking these so it will build - they aren't used
+    createElement: jest.fn(),
+    createContext: jest.fn(),
+    forwardRef: jest.fn(),
+    useEffect: jest.fn(),
+    useState: jest.fn(),
+    default: jest.fn(),
+  }
+})
+// mock these so it will build - they aren't used
+jest.mock('react-jss', () => {
+  return {
+    createUseStyles: jest.fn(),
+  }
+})
+// Button uses this one
+jest.mock('@codastic/react-positioning-portal', () => {
+  return {
+    PositioningPortal: jest.fn(),
+  }
+})
+// Points and others use LEVEL and H from here
+jest.mock('react-accessible-headings', () => {
+  return {
+    H: jest.fn(),
+    Level: jest.fn(),
+  }
+})
+const data = {}
+describe('test derivePoinMostsLeastsRankList', () => {
+  test('no data yields no chanage', () => {
+    const { pointWithWhyRankListList } = derivePointWithWhyRankListLisyByCategory(data, 'most')
+    expect(pointWithWhyRankListList).toBe(undefined)
+  })
+  test('can insert initial data', () => {
+    data.reducedPointList = [{ point: { _id: '1', subject: '1', description: '1' } }, { point: { _id: '2', subject: '2', description: '2' } }, { point: { _id: '3', subject: '3', description: '3' } }]
+    data.preRankByParentId = { 1: { _id: 51, stage: 'pre', category: 'most', parentId: '1' }, 2: { _id: 53, stage: 'pre', category: 'most', parentId: '2' }, 3: { _id: 53, stage: 'pre', category: 'most', parentId: '3' } }
+    const { pointWithWhyRankListList } = derivePointWithWhyRankListLisyByCategory(data, 'most')
+    expect(pointWithWhyRankListList).toMatchObject([
+      { point: { _id: '1', subject: '1', description: '1' }, whyRankList: [] },
+      { point: { _id: '2', subject: '2', description: '2' }, whyRankList: [] },
+      { point: { _id: '3', subject: '3', description: '3' }, whyRankList: [] },
+    ])
+  })
+  test("ref doesn't change if data doesn't change", () => {
+    const { pointWithWhyRankListList } = derivePointWithWhyRankListLisyByCategory(data, 'most')
+    const newRef = derivePointWithWhyRankListLisyByCategory(data, 'most').pointWithWhyRankListList
+    expect(newRef).toBe(pointWithWhyRankListList)
+  })
+  test('ref does change if a point changes', () => {
+    const pointWithWhyRankListList = derivePointWithWhyRankListLisyByCategory(data)
+    data.reducedPointList[1] = { point: { ...data.reducedPointList[1].point } }
+    data.reducedPointList = [...data.reducedPointList]
+    const newRef = derivePointWithWhyRankListLisyByCategory(data, 'most')
+    expect(newRef).not.toBe(pointWithWhyRankListList)
+    expect(newRef).toEqual(pointWithWhyRankListList)
+  })
+  test('works with random ranked whys', () => {
+    data.randomWhyById = {
+      4: { _id: '4', subject: '1.4 random most', description: '1.4 random most', parentId: '1', category: 'most' },
+      5: { _id: '5', subject: '1.5 random least', description: '1.5 random least', parentId: '1', category: 'most' },
+      6: { _id: '6', subject: '2.6 random most', description: '2.6 random most', parentId: '2', category: 'most' },
+      7: { _id: '7', subject: '2.7 random least', description: '2.7 random least', parentId: '2', category: 'most' },
+    }
+    const { pointWithWhyRankListList } = derivePointWithWhyRankListLisyByCategory(data, 'most')
+    const calculatedReviewPoints = data.reducedPointList.map(({ point }) => {
+      // if there are no mosts or leasts, the entry should not be present
+      const mosts = Object.values(data.randomWhyById).filter(why => why.parentId === point._id && why.category === 'most')
+      const result = { point }
+      if (mosts.length)
+        result.whyRankList = mosts.map(why => ({
+          why,
+        }))
+      return result
+    })
+    expect(pointWithWhyRankListList).toMatchObject(calculatedReviewPoints)
+  })
+  test("ref doesn't change if point and random whys doesn't change", () => {
+    const { pointWithWhyRankListList } = derivePointWithWhyRankListLisyByCategory(data, 'most')
+    const newRef = derivePointWithWhyRankListLisyByCategory(data, 'most').pointWithWhyRankListList
+    expect(newRef).toBe(pointWithWhyRankListList)
+  })
+  test('ref does change if a point changes when there are whys', () => {
+    const { pointWithWhyRankListList } = derivePointWithWhyRankListLisyByCategory(data, 'most')
+    data.reducedPointList[1] = { point: { ...data.reducedPointList[1].point } }
+    data.reducedPointList = [...data.reducedPointList]
+    const newRef = derivePointWithWhyRankListLisyByCategory(data, 'most').pointWithWhyRankListList
+    expect(newRef).not.toBe(pointWithWhyRankListList)
+    expect(newRef).toEqual(pointWithWhyRankListList)
+  })
+  test('ref does change if a why is changed', () => {
+    const { pointWithWhyRankListList } = derivePointWithWhyRankListLisyByCategory(data, 'most')
+    const item1 = pointWithWhyRankListList[1]
+    data.randomWhyById['6'] = { ...data.randomWhyById['6'] }
+    data.randomWhyById = { ...data.randomWhyById }
+    const newRef = derivePointWithWhyRankListLisyByCategory(data, 'most').pointWithWhyRankListList
+    expect(newRef).not.toBe(pointWithWhyRankListList)
+    expect(newRef).toEqual(pointWithWhyRankListList)
+    expect(newRef[1]).toEqual(item1)
+  })
+  test('works with ranks added', () => {
+    data.whyRankByParentId = {
+      4: { _id: '8', category: 'most', parentId: '4', stage: 'why' },
+      5: { _id: '9', category: 'neutral', parentId: '5', stage: 'why' },
+      6: { _id: '10', category: 'neutral', parentId: '6', stage: 'why' },
+    }
+    const { pointWithWhyRankListList } = derivePointWithWhyRankListLisyByCategory(data, 'most')
+    expect(pointWithWhyRankListList).toMatchObject([
+      {
+        point: { _id: '1', subject: '1', description: '1' },
+        whyRankList: [
+          {
+            why: { _id: '4', subject: '1.4 random most', description: '1.4 random most', parentId: '1', category: 'most' },
+            rank: { _id: '8', category: 'most', parentId: '4', stage: 'why' },
+          },
+          {
+            why: { _id: '5', subject: '1.5 random least', description: '1.5 random least', parentId: '1', category: 'most' },
+            rank: { _id: '9', category: 'neutral', parentId: '5', stage: 'why' },
+          },
+        ],
+      },
+      {
+        point: {
+          _id: '2',
+          subject: '2',
+          description: '2',
+        },
+        whyRankList: [
+          {
+            why: { _id: '6', subject: '2.6 random most', description: '2.6 random most', parentId: '2', category: 'most' },
+            rank: { _id: '10', category: 'neutral', parentId: '6', stage: 'why' },
+          },
+          {
+            why: { _id: '7', subject: '2.7 random least', description: '2.7 random least', parentId: '2', category: 'most' },
+          },
+        ],
+      },
+      {
+        point: { _id: '3', subject: '3', description: '3' },
+        whyRankList: [],
+      },
+    ])
+  })
+})
diff --git a/app/components/steps/compare-whys.js b/app/components/steps/compare-whys.js
new file mode 100644
index 000000000..804d07705
--- /dev/null
+++ b/app/components/steps/compare-whys.js
@@ -0,0 +1,177 @@
+// https://github.com/EnCiv/civil-pursuit/issues/77
+// https://github.com/EnCiv/civil-pursuit/issues/200
+
+'use strict'
+import React, { useEffect, useState, useRef, useContext, useCallback } from 'react'
+import { createUseStyles } from 'react-jss'
+import PairCompare from '../pair-compare'
+import { H, Level } from 'react-accessible-headings'
+
+import DeliberationContext from '../deliberation-context'
+
+export default function CompareWhysStep(props) {
+  const { onDone, category } = props
+  const { data, upsert } = useContext(DeliberationContext)
+  const args = { ...derivePointWithWhyRankListLisyByCategory(data, category) }
+  const handleOnDone = ({ valid, value, delta }) => {
+    if (delta) {
+      upsert({ whyRankByParentId: { [delta.parentId]: delta } })
+      window.socket.emit('upsert-rank', delta)
+    }
+    onDone({ valid, value })
+  }
+  // fetch previous data
+  if (typeof window !== 'undefined')
+    useState(() => {
+      // on the browser, do this once and only once when this component is first rendered
+      const { discussionId, round, reducedPointList, preRankByParentId } = data
+      const { mostIds, leastIds } = Object.values(preRankByParentId ?? {}).reduce(
+        ({ mostIds, leastIds }, rank) => {
+          if (rank.category === 'most') mostIds.push(rank.parentId)
+          else if (rank.category === 'least') leastIds.push(rank.parentId)
+          return { mostIds, leastIds }
+        },
+        { mostIds: [], leastIds: [] }
+      )
+      window.socket.emit('get-why-ranks-and-points', discussionId, round, mostIds, leastIds, result => {
+        if (!result) return // there was an error
+        const { ranks, whys } = result
+        //if (!ranks.length && !whys.length) return // nothing to do
+        const whyRankByParentId = ranks.reduce((preRankByParentId, rank) => ((preRankByParentId[rank.parentId] = rank), preRankByParentId), {})
+        const randomWhyById = whys.reduce((randomWhyById, point) => ((randomWhyById[point._id] = point), randomWhyById), {})
+        upsert({ preRankByParentId, whyRankByParentId, randomWhyById })
+      })
+    })
+  return <CompareWhys {...props} {...args} round={data.round} discussionId={data.discussionId} onDone={handleOnDone} />
+}
+
+// pointWithWhyRankListList = [{point: {}, whyRankList: [why:{}, rank:{}]]
+export function CompareWhys(props) {
+  const { pointWithWhyRankListList = [], side = '', onDone = () => {}, className, discussionId, round, ...otherProps } = props
+  const classes = useStyles()
+  // completedByPointId does not effect rendering, so no need to set state, just mutate.
+  const [completedByPointId] = useState(
+    pointWithWhyRankListList.reduce((completedByPointId, pointWithWhyRankList) => {
+      completedByPointId[pointWithWhyRankList.point._id] = false
+      return completedByPointId
+    }, {})
+  )
+
+  useEffect(() => {
+    // if new points get added, mark them as incomplete
+    for (const pointWithWhyRankList of pointWithWhyRankListList) {
+      if (typeof completedByPointId[pointWithWhyRankList.point._id] === 'undefined') completedByPointId[pointWithWhyRankList.point._id] = false
+    }
+  }, [pointWithWhyRankListList])
+
+  const handlePairCompare = ({ valid, value }, _id) => {
+    if (valid) completedByPointId[_id] = true
+    else completedByPointId[_id] = false
+    const [done, total] = Object.values(completedByPointId).reduce(
+      ([done, total], completed) => {
+        if (completed) done++
+        total++
+        return [done, total]
+      },
+      [0, 0]
+    )
+    const percentDone = done / total
+    onDone({ valid: percentDone >= 1, value: percentDone, delta: value })
+  }
+  return (
+    <div className={classes.container} {...otherProps}>
+      {pointWithWhyRankListList.map(({ point, whyRankList }) => (
+        <div key={point._id} className={classes.headlinePoint}>
+          <H className={classes.headlineTitle}>Please choose the most convincing explanation for...</H>
+          <H className={classes.headlineSubject}>{point.subject}</H>
+          <Level>
+            <PairCompare round={round} discussionId={discussionId} className={classes.pairCompare} whyRankList={whyRankList} onDone={value => handlePairCompare(value, point._id)} />
+          </Level>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const useStyles = createUseStyles(theme => ({
+  container: {
+    fontFamily: theme.font.fontFamily,
+  },
+  headlinePoint: {
+    borderTop: '0.0625rem solid #000000',
+    marginBottom: '4rem',
+    paddingTop: '2rem',
+    '&:first-child': {
+      borderTop: 'none',
+    },
+  },
+  headlineTitle: {
+    fontWeight: '600',
+    fontSize: '1.5rem',
+    lineHeight: '2rem',
+  },
+  headlineSubject: {
+    fontWeight: '300',
+    fontSize: '2.25rem',
+    lineHeight: '2.9375rem',
+  },
+  pairCompare: {
+    marginTop: '1rem',
+  },
+}))
+
+// pointWithWhyRankByWhyIdByPointId={id: {point, whyRankByWhyId: {id: {why, rank}}}}
+
+export function derivePointWithWhyRankListLisyByCategory(data, category) {
+  // pointWithWhyRankListList shouldn't default to [], it should be undefined until data is fetched from the server. But then, [] is ok
+  const local = useRef({ pointWithWhyRankListList: undefined, pointWithWhyRankByWhyIdByPointId: {} }).current
+  const { reducedPointList, preRankByParentId = {}, randomWhyById, whyRankByParentId } = data
+  const { pointWithWhyRankListList, pointWithWhyRankByWhyIdByPointId } = local
+  let updatedPoints = {}
+  if (local.reducedPointList !== reducedPointList) {
+    for (const pointGroup of reducedPointList) {
+      if (preRankByParentId[pointGroup.point._id]?.category !== category) continue
+      if (!pointWithWhyRankByWhyIdByPointId[pointGroup.point._id]?.point !== pointGroup.point) {
+        if (!pointWithWhyRankByWhyIdByPointId[pointGroup.point._id]) pointWithWhyRankByWhyIdByPointId[pointGroup.point._id] = { whyRankByWhyId: {} }
+        pointWithWhyRankByWhyIdByPointId[pointGroup.point._id].point = pointGroup.point
+        updatedPoints[pointGroup.point._id] = true
+      }
+    }
+    local.reducedPointList = reducedPointList
+  }
+  if (local.randomWhyById !== randomWhyById || local.whyRankByParentId !== whyRankByParentId) {
+    for (const why of Object.values(randomWhyById)) {
+      if (why.category !== category) continue
+      if (!pointWithWhyRankByWhyIdByPointId[why.parentId]) continue // a why's parent not here
+      if (pointWithWhyRankByWhyIdByPointId[why.parentId]?.whyRankByWhyId[why._id]?.why !== why) {
+        pointWithWhyRankByWhyIdByPointId[why.parentId].whyRankByWhyId[why._id] = {
+          why,
+          rank: whyRankByParentId?.[why._id],
+        }
+        updatedPoints[why.parentId] = true
+      } else if (pointWithWhyRankByWhyIdByPointId[why.parentId].whyRankByWhyId[why._id].rank !== whyRankByParentId?.[why._id]) {
+        pointWithWhyRankByWhyIdByPointId[why.parentId].whyRankByWhyId[why._id].rank = whyRankByParentId[why._id]
+        updatedPoints[why.parentId] = true
+      }
+    }
+    local.randomWhyById = randomWhyById
+    local.whyRankByParentId = whyRankByParentId
+  }
+  //const newPointWithWhyRankListList=Object.values(pointWithWhyRankByWhyIdByPointId).map(pointWithWhyRankByParentId=>({point: pointWithWhyRankByParentId.point, whyRankList: Object.values(pointWithWhyRankByParentId.whyRankByParentId)}))
+  const newPointWithWhyRankListList = []
+  let updated = false
+  for (const pointWithWhyRankList of pointWithWhyRankListList ?? []) {
+    const pointId = pointWithWhyRankList.point._id
+    if (updatedPoints[pointId]) {
+      newPointWithWhyRankListList.push({ point: pointWithWhyRankByWhyIdByPointId[pointId].point, whyRankList: Object.values(pointWithWhyRankByWhyIdByPointId[pointId].whyRankByWhyId) })
+      updated = true
+    } else newPointWithWhyRankListList.push(pointWithWhyRankList)
+    delete updatedPoints[pointId]
+  }
+  for (const pointId of Object.keys(updatedPoints)) {
+    newPointWithWhyRankListList.push({ point: pointWithWhyRankByWhyIdByPointId[pointId].point, whyRankList: Object.values(pointWithWhyRankByWhyIdByPointId[pointId].whyRankByWhyId) })
+    updated = true
+  }
+  if (updated) local.pointWithWhyRankListList = newPointWithWhyRankListList
+  return { pointWithWhyRankListList: local.pointWithWhyRankListList }
+}
diff --git a/app/components/steps/rerank.js b/app/components/steps/rerank.js
index b3e9f77a7..a134c7b80 100644
--- a/app/components/steps/rerank.js
+++ b/app/components/steps/rerank.js
@@ -34,10 +34,7 @@ export default function RerankStep(props) {
           if (!result) return // there was an error
           const [ranks, whys] = result
           //if (!ranks.length && !whys.length) return // nothing to do
-          const postRankByParentId = ranks.reduce(
-            (postRankByParentId, rank) => ((postRankByParentId[rank.parentId] = rank), postRankByParentId),
-            {}
-          )
+          const postRankByParentId = ranks.reduce((postRankByParentId, rank) => ((postRankByParentId[rank.parentId] = rank), postRankByParentId), {})
           const topWhyById = whys.reduce((topWhyById, point) => ((topWhyById[point._id] = point), topWhyById), {})
           upsert({ postRankByParentId, topWhyById })
         }
@@ -92,6 +89,8 @@ export function Rerank(props) {
     }
     if (updated) {
       setRankByParentId(newRankByParentId)
+      const percentDone = Object.keys(newRankByParentId).length / reviewPoints.length
+      onDone({ valid: percentDone >= 1, value: percentDone })
     }
     // if an item in the updated reviewPoints does not have a rank doc where it previously did, the rank doc will remain.
     // deleting a rank is not a use case
@@ -120,8 +119,7 @@ export function Rerank(props) {
           rankByParentId[point._id] = rank // mutate the state don't call the set function
           percentDone = Object.keys(rankByParentId).length / reviewPoints.length
         } else {
-          percentDone = Object.keys(rankByParentId).length / reviewPoints.length
-          rank = rankByParentId[point._id]
+          // don't call onDone, the data is already there
         }
       } else {
         rank = {
@@ -223,19 +221,14 @@ export function derivePointMostsLeastsRankList(data) {
           updated = true
         } // else no need to update
       } else {
-        if (!reviewPointsById[whyPoint.parentId][category + 's'])
-          reviewPointsById[whyPoint.parentId][category + 's'] = []
+        if (!reviewPointsById[whyPoint.parentId][category + 's']) reviewPointsById[whyPoint.parentId][category + 's'] = []
         reviewPointsById[whyPoint.parentId][category + 's'].push(whyPoint)
         if (!categoiesToUpdateByParentId[whyPoint.parentId]) categoiesToUpdateByParentId[whyPoint.parentId] = []
         categoiesToUpdateByParentId[whyPoint.parentId].push(category)
         updated = true
       }
     }
-    Object.entries(categoiesToUpdateByParentId).forEach(([parentId, categories]) =>
-      categories.forEach(
-        category => (reviewPointsById[parentId][category + 's'] = [...reviewPointsById[parentId][category + 's']])
-      )
-    )
+    Object.entries(categoiesToUpdateByParentId).forEach(([parentId, categories]) => categories.forEach(category => (reviewPointsById[parentId][category + 's'] = [...reviewPointsById[parentId][category + 's']])))
   }
   if (local.postRankByParentId !== postRankByParentId) {
     for (const rank of Object.values(postRankByParentId)) {
diff --git a/app/components/tournament.js b/app/components/tournament.js
index 09a7e13ab..a09ef9816 100644
--- a/app/components/tournament.js
+++ b/app/components/tournament.js
@@ -12,7 +12,7 @@ import GroupingStep from './grouping-step'
 import RankStep from './rank-step'
 import ReviewPointList from './steps/rerank'
 import WhyStep from './why-step'
-import CompareReasons from './compare-reasons'
+import CompareReasons from './steps/compare-whys'
 import Intermission from './intermission'
 
 const WebComponents = {
diff --git a/app/lib/__tests__/set-or-delete-by-mutate-path.js b/app/lib/__tests__/set-or-delete-by-mutate-path.js
new file mode 100644
index 000000000..3c606ede6
--- /dev/null
+++ b/app/lib/__tests__/set-or-delete-by-mutate-path.js
@@ -0,0 +1,233 @@
+import setOrDeleteByMutatePath from '../set-or-delete-by-mutate-path'
+
+describe('test setOrDeleteByMutatePath', () => {
+  test('a simple object', () => {
+    const messages = []
+    const dst = { a: 1 }
+    const result = setOrDeleteByMutatePath(dst, { a: 2 }, messages)
+    expect(result).toEqual({ a: 2 })
+    expect(result).not.toBe(dst)
+    expect(messages).toMatchObject([
+      //
+      'a: changing 1 to 2',
+      'returning mutated copy',
+    ])
+  })
+  test('set an object', () => {
+    const messages = []
+    const dst = {
+      a: {
+        b: 1, // don't pretty this into one line
+      },
+    }
+    const result = setOrDeleteByMutatePath(dst, { a: { b: 2 } }, messages)
+    expect(result).toMatchObject({ a: { b: 2 } })
+    expect(result).not.toBe(dst)
+    expect(result.a).not.toBe(dst.a)
+    expect(messages).toMatchObject([
+      //
+      'a.b: changing 1 to 2',
+      'mutating a',
+      'returning mutated copy',
+    ])
+  })
+  test("set doesn't really change anything", () => {
+    const messages = []
+    const dst = {
+      a: {
+        b: 1, // don't pretty this into one line
+      },
+    }
+    const result = setOrDeleteByMutatePath(dst, { a: { b: 1 } }, messages)
+    expect(result).toMatchObject({ a: { b: 1 } })
+    expect(result).toBe(dst)
+    expect(result.a).toBe(dst.a)
+    expect(messages).toMatchObject([])
+  })
+  test('set some stuff but leave others alone', () => {
+    const messages = []
+    const dst = {
+      a: {
+        b: 1, // don't pretty this into one line
+        c: 2,
+        d: 3,
+      },
+      f: {
+        g: 4,
+      },
+    }
+    const result = setOrDeleteByMutatePath(dst, { a: { b: 2 } }, messages)
+    expect(result).toMatchObject({ a: { b: 2, c: 2, d: 3 }, f: { g: 4 } })
+    expect(result).not.toBe(dst)
+    expect(result.a).not.toBe(dst.a)
+    expect(result.f).toBe(dst.f)
+    expect(result.f.g).toBe(dst.f.g)
+    expect(messages).toMatchObject([
+      //
+      'a.b: changing 1 to 2',
+      'mutating a',
+      'returning mutated copy',
+    ])
+  })
+  test('can set and delete things', () => {
+    const messages = []
+    const dst = {
+      a: {
+        b: 1, // don't pretty this into one line
+        c: 2,
+        d: 3,
+      },
+      f: {
+        g: 4,
+      },
+    }
+    const result = setOrDeleteByMutatePath(dst, { a: { b: 2, c: undefined }, f: undefined }, messages)
+    expect(result).toMatchObject({ a: { b: 2, d: 3 } })
+    expect(result).not.toBe(dst)
+    expect(result.a).not.toBe(dst.a)
+    expect(messages).toMatchObject([
+      //
+      'a.b: changing 1 to 2',
+      'deleting a.c: 2',
+      'mutating a',
+      'deleting f: {"g":4}',
+      'returning mutated copy',
+    ])
+  })
+  test('can set and delete things deeply', () => {
+    const messages = []
+    const dst = {
+      z: {
+        a: {
+          b: 1, // don't pretty this into one line
+          c: 2,
+          d: 3,
+        },
+        f: {
+          g: 4,
+        },
+      },
+    }
+    const result = setOrDeleteByMutatePath(dst, { z: { a: { b: 2, c: undefined }, f: undefined } }, messages)
+    expect(result).toMatchObject({ z: { a: { b: 2, d: 3 } } })
+    expect(result).not.toBe(dst)
+    expect(result.z).not.toBe(dst.z)
+    expect(result.z.a).not.toBe(dst.z.a)
+    expect(messages).toMatchObject([
+      //
+      'z.a.b: changing 1 to 2',
+      'deleting z.a.c: 2',
+      'mutating z.a',
+      'deleting z.f: {"g":4}',
+      'mutating z',
+      'returning mutated copy',
+    ])
+  })
+  test('it can change arrays', () => {
+    const messages = []
+    const dst = ['1', '2', '3', '4']
+    const result = setOrDeleteByMutatePath(dst, ['0'], messages)
+    expect(result).toMatchObject(['0'])
+    expect(result).not.toBe(dst)
+    expect(messages).toMatchObject([
+      //
+      '[0]: changing "1" to "0"',
+      'deleting [1]: "2"',
+      'deleting [2]: "3"',
+      'deleting [3]: "4"',
+      'returning mutated copy',
+    ])
+  })
+  test('it can change deep in arrays', () => {
+    const messages = []
+    const dst = [{ a: 1 }, { b: 2 }, { c: { d: 7 } }]
+    const result = setOrDeleteByMutatePath(dst, [{ a: 1 }, { b: 2 }, { c: { f: 8 } }], messages)
+    expect(result).toMatchObject([{ a: 1 }, { b: 2 }, { c: { d: 7, f: 8 } }])
+    expect(result).not.toBe(dst)
+    expect(result[0]).toBe(dst[0])
+    expect(result[1]).toBe(dst[1])
+    expect(result[2]).not.toBe(dst[2])
+    expect(messages).toMatchObject([
+      //don't pretty this into one line
+      '[2].c.f: changing not-present to 8',
+      'mutating [2].c',
+      'mutating [2]',
+      'returning mutated copy',
+    ])
+  })
+})
+
+// these were generated by chatgpt, with modifications to the expected messages to make them work
+describe('setOrDeleteByMutatePath from chatGPT', () => {
+  test('returns the same object if no changes are made', () => {
+    const dst = { a: 1, b: { c: 2 } }
+    const src = { a: 1, b: { c: 2 } }
+    const messages = []
+    const result = setOrDeleteByMutatePath(dst, src, messages)
+
+    expect(result).toBe(dst)
+    expect(messages).toHaveLength(0)
+  })
+
+  test('returns a new object when changes are made', () => {
+    const dst = { a: 1, b: { c: 2 } }
+    const src = { a: 2, b: { c: 3 } }
+    const messages = []
+    const result = setOrDeleteByMutatePath(dst, src, messages)
+
+    expect(result).not.toBe(dst)
+    expect(result).toEqual(src)
+    expect(result.b).not.toBe(dst.b)
+    expect(messages).toEqual(['a: changing 1 to 2', 'b.c: changing 2 to 3', 'mutating b', 'returning mutated copy'])
+  })
+
+  test('deletes properties set to undefined in src', () => {
+    const dst = { a: 1, b: { c: 2, d: 4 } }
+    const src = { a: 1, b: { c: undefined } }
+    const messages = []
+    const result = setOrDeleteByMutatePath(dst, src, messages)
+
+    expect(result).not.toBe(dst)
+    expect(result).toEqual({ a: 1, b: { d: 4 } })
+    expect(result.b).not.toBe(dst.b)
+    expect(messages).toEqual(['deleting b.c: 2', 'mutating b', 'returning mutated copy'])
+  })
+
+  test('handles arrays correctly', () => {
+    const dst = { a: [1, 2, 3] }
+    const src = { a: [1, 4, 3] }
+    const messages = []
+    const result = setOrDeleteByMutatePath(dst, src, messages)
+
+    expect(result).not.toBe(dst)
+    expect(result).toEqual({ a: [1, 4, 3] })
+    expect(result.a).not.toBe(dst.a)
+    expect(messages).toEqual(['a[1]: changing 2 to 4', 'mutating a', 'returning mutated copy'])
+  })
+
+  test('keeps references for unchanged nested objects', () => {
+    const nested = { c: 3 }
+    const dst = { a: 1, b: nested }
+    const src = { a: 1, b: nested }
+    const messages = []
+    const result = setOrDeleteByMutatePath(dst, src, messages)
+
+    expect(result).toBe(dst)
+    expect(result.b).toBe(nested)
+    expect(messages).toHaveLength(0)
+  })
+
+  test('recursively handles nested objects with changes', () => {
+    const dst = { a: { b: { c: 2, unchanged: { x: 10 } } } }
+    const src = { a: { b: { c: 3, d: 4, unchanged: { x: 10 } } } }
+    const messages = []
+    const result = setOrDeleteByMutatePath(dst, src, messages)
+
+    expect(result).not.toBe(dst)
+    expect(result.a).not.toBe(dst.a)
+    expect(result.a.b).not.toBe(dst.a.b)
+    expect(result.a.b.unchanged).toBe(dst.a.b.unchanged)
+    expect(result).toEqual({ a: { b: { c: 3, d: 4, unchanged: { x: 10 } } } })
+    expect(messages).toEqual(['a.b.c: changing 2 to 3', 'a.b.d: changing not-present to 4', 'mutating a.b', 'mutating a', 'returning mutated copy'])
+  })
+})
diff --git a/app/lib/set-or-delete-by-mutate-path.js b/app/lib/set-or-delete-by-mutate-path.js
new file mode 100644
index 000000000..d465c55c2
--- /dev/null
+++ b/app/lib/set-or-delete-by-mutate-path.js
@@ -0,0 +1,124 @@
+const cloneDeep = require('lodash/cloneDeep')
+
+/**
+setOrDeleteByMutatePath(dst, src, messages, keyPath)
+
+ dst: the object that src will be upserted into
+ src: the object that is to be upserted into dst
+
+optional: 
+ messages: and array of strings detailing the changes. If undefined, no messages are generated. Mostly messages are for debugging and inspecting.
+ keyPath: the object path in messages will be prefixed with keyPath, which could be the name of the dst variable for example
+
+returns 
+  dst if no real changes, or a new object, if changes were made
+
+This function is applied recursively, so any sub-object that has changes in it will also be a new object, 
+but sub-objects with no changes will keep the same object ref.
+
+This is userful when react is rendering from a complex object that is handled by multiple react components,
+only the components where there have been changes will see new props and rerender. Components that render
+sub-objects that have not changed, will not rerender. For example if react is rendering a list, and only one
+item in the list has chanaged, only the one item should rerender.
+
+This works with plain objects and arrays. Has not been tested with maps or sets.
+
+Also, if a property in src is present and set to undefined, like {a: {b: undefined}}, then the property (like a.b) in the dst will be deleted
+
+Sub-objects in src will be cloned so nothing in src will be referced after use
+
+Sub-objects of dst will be referenced directly if they have not changed, 
+
+ */
+
+function sameKeys(dstKeys, srcKeys) {
+  // keys are from an array so they are in order
+  if (dstKeys.length !== srcKeys.length) return false
+  for (let i = 0; i < dstKeys.length; i++) {
+    if (dstKeys[i] !== srcKeys[i]) {
+      return false
+    }
+  }
+  return true
+}
+
+function stringify(obj, key) {
+  const value = obj[key]
+  if (typeof value === 'undefined' && !Object.keys(obj).includes(key)) return 'not-present'
+  if (typeof value === 'function') return (value.name || 'unnamed') + '()'
+  // ??? it would be better to use util.inspect but that doesn't work on browser. Tried loupe but have trouble with require/import in node 16
+  return JSON.stringify(value)
+}
+
+function setOrDeleteKeyWithMessages(dst, src, messages, keyPath, key) {
+  if (typeof dst[key] === 'object' && typeof src[key] === 'object' && dst[key] !== null && src[key] !== null) {
+    const wasUpdated = setOrDeleteByMutatePath(dst[key], src[key], messages, keyPath)
+    if (wasUpdated !== dst[key]) {
+      return wasUpdated
+    }
+  } else {
+    if (typeof src[key] === 'object' && src[key] !== null) {
+      if (messages) messages.push(`${keyPath}: changing ${stringify(dst, key)} to ${stringify(src, key)}`)
+      return src[key]
+    } else if (dst[key] !== src[key]) {
+      if (messages) messages.push(`${keyPath}: changing ${stringify(dst, key)} to ${stringify(src, key)}`)
+      return src[key]
+    }
+  }
+  return dst[key]
+}
+
+export default function setOrDeleteByMutatePath(dst, src, messages, keyPath) {
+  let updated = 0
+  if (typeof dst === 'object' && typeof src === 'object' && dst !== null && src !== null) {
+    const dstKeys = Object.keys(dst)
+    const srcKeys = Object.keys(src)
+    if (Array.isArray(dst) && Array.isArray(src)) {
+      const newDst = []
+      for (const key of srcKeys) {
+        newDst[key] = setOrDeleteKeyWithMessages(dst, src, messages, `${keyPath ? keyPath : ''}[${key}]`, key)
+        if (newDst[key] !== dst[key]) ++updated
+      }
+      if (!sameKeys(dstKeys, srcKeys)) {
+        for (const key of dstKeys) {
+          if (srcKeys.includes(key)) continue
+          else {
+            if (messages) messages.push(`deleting ${keyPath ? keyPath : ''}[${key}]: ${stringify(dst, key)}`)
+            ++updated
+          }
+        }
+      }
+      if (updated) {
+        if (messages) messages.push(`${keyPath ? 'mutating ' + keyPath : 'returning mutated copy'}`)
+        return newDst
+      }
+    } else {
+      const newDst = {}
+      for (const key of srcKeys) {
+        if (typeof src[key] === 'undefined') {
+          if (messages) messages.push(`deleting ${keyPath ? keyPath + '.' : ''}${key}: ${stringify(dst, key)}`)
+          //delete dst[key]
+          ++updated
+        } else {
+          newDst[key] = setOrDeleteKeyWithMessages(dst, src, messages, (keyPath ? keyPath + '.' : '') + key, key)
+          if (newDst[key] !== dst[key]) ++updated
+        }
+      }
+      if (!sameKeys(dstKeys, srcKeys)) {
+        for (const key of dstKeys) {
+          if (srcKeys.includes(key)) continue
+          else {
+            newDst[key] = dst[key]
+          }
+        }
+      }
+      if (updated) {
+        if (messages) messages.push(`${keyPath ? 'mutating ' + keyPath : 'returning mutated copy'}`)
+        return newDst
+      }
+    }
+  } else {
+    if (messages) messages.push(`${keyPath ? keyPath + ': c' : 'C'}an not change type ${typeof dst} to ${typeof src}`)
+  }
+  return dst
+}
diff --git a/stories/common.js b/stories/common.js
index 359cfb3d3..a47924764 100644
--- a/stories/common.js
+++ b/stories/common.js
@@ -2,6 +2,7 @@
 
 import React, { useState, useCallback, useContext } from 'react'
 import { DeliberationContext, DeliberationContextProvider } from '../app/components/deliberation-context'
+import { fn } from '@storybook/test'
 
 export const socketEmitDecorator = Story => {
   useState(() => {
@@ -114,22 +115,31 @@ export function RenderStory(props) {
 }
 
 export function onDoneDecorator(Story, context) {
-  const [result, setResult] = useState({ count: 0 })
-  const onDone = useCallback(res => {
-    setResult({ count: result.count + 1, onDoneResult: res })
+  // attach an onDone argument that functions like mock.fn but also set's state to cause a rerender
+  const [count, setCount] = useState(0)
+  useState(() => {
+    // do this once, immediately
+    const mockFn = fn()
+    const onDone = (...args) => {
+      const result = mockFn(...args)
+      setCount(count => count + 1)
+      return result
+    }
+    Object.assign(onDone, mockFn)
+    onDone.mock = mockFn.mock // most important part wasn't picked up by assign
+    onDone.mockFn = mockFn // might be handy someday
+    context.args.onDone = onDone
   })
-  context.args.onDone = onDone
   return (
     <>
       <Story />
-
-      {result.count ? (
+      {count ? (
         <div style={{ width: '100%', border: 'solid 1px black', marginTop: '1rem', marginBottom: '1rem' }}>
           <div>
             {' '}
             onDone:{' '}
             <span title="onDoneResult" id="onDoneResult" style={{ whiteSpace: 'pre-wrap' }}>
-              {JSON.stringify(result, null, 4)}
+              {JSON.stringify({ count, onDoneResult: context.args.onDone.mock.calls.at(-1)[0] }, null, 4)}
             </span>
           </div>
         </div>
diff --git a/stories/compare-reasons.stories.jsx b/stories/compare-reasons.stories.jsx
index 4127f8782..bff114ffb 100644
--- a/stories/compare-reasons.stories.jsx
+++ b/stories/compare-reasons.stories.jsx
@@ -1,96 +1,300 @@
-import CompareReasons from '../app/components/compare-reasons'
-import { onDoneDecorator, onDoneResult } from './common'
-import { within, userEvent } from '@storybook/test'
+// https://github.com/EnCiv/civil-pursuit/issues/200
+import React, { useState } from 'react'
+import CompareWhysStep, { CompareWhys } from '../app/components/steps/compare-whys'
+import { asyncSleep, onDoneDecorator, socketEmitDecorator, DeliberationContextDecorator, deliberationContextData } from './common'
+import { within, userEvent, waitFor } from '@storybook/test'
 import expect from 'expect'
 
-export default {
-  component: CompareReasons,
-  args: {},
-  decorators: [onDoneDecorator],
-}
-
-const pointOne = { subject: 'Point 1', description: 'This is the first point' }
-const pointTwo = { subject: 'Point 2', description: 'This is the second point' }
-const pointThree = { subject: 'Point 3', description: 'This is the third point' }
-const pointFour = { subject: 'Point 4', description: 'This is the fourth point' }
-const pointFive = { subject: 'Point 5', description: 'This is the fifth point' }
-const pointSix = { subject: 'Point 6', description: 'This is the sixth point' }
-const pointSeven = { subject: 'Point 7', description: 'This is the seventh point' }
-const pointEight = { subject: 'Point 8', description: 'This is the eighth point' }
-const pointNine = { subject: 'Point 9', description: 'This is the ninth point' }
-const pointTen = { subject: 'Point 10', description: 'This is the tenth point' }
+export default { component: CompareWhys, args: {}, decorators: [onDoneDecorator] }
 
-const pointEleven = { subject: 'Point 11', description: 'This is the eleventh point' }
-const pointTwelve = { subject: 'Point 12', description: 'This is the twelfth point' }
-const pointThirteen = { subject: 'Point 13', description: 'This is the thirteenth point' }
-const pointFourteen = { subject: 'Point 14', description: 'This is the fourteenth point' }
-const pointFifteen = { subject: 'Point 15', description: 'This is the fifteenth point' }
-const pointSixteen = { subject: 'Point 16', description: 'This is the sixteenth point' }
-const pointSeventeen = { subject: 'Point 17', description: 'This is the seventeenth point' }
-const pointEighteen = { subject: 'Point 18', description: 'This is the eighteenth point' }
+const round = 1
+const discussionId = '1001'
 
-const pointList = [
+const pointWithWhyRankListList = [
+  {
+    point: { _id: '1', subject: 'subject 1', description: 'describe 1' },
+    whyRankList: [
+      { why: { _id: '2', subject: '1 is less than 2', description: '2 is why because', parentId: '1', category: 'most' } },
+      { why: { _id: '3', subject: '1 is less than 3', description: '3 is why because', parentId: '1', category: 'most' } },
+      { why: { _id: '4', subject: '1 is less than 4', description: '4 is why because', parentId: '1', category: 'most' } },
+      { why: { _id: '5', subject: '1 is less than 5', description: '5 is why because', parentId: '1', category: 'most' } },
+      { why: { _id: '6', subject: '1 is less than 6', description: '6 is why because', parentId: '1', category: 'most' } },
+    ],
+  },
   {
-    subject: 'Headline Issue #1',
-    description: 'Description for Headline Issue #1',
-    reasonPoints: {
-      most: [pointOne, pointTwo, pointThree, pointFour, pointFive],
-      least: [pointSix, pointSeven, pointEight, pointNine, pointTen],
-    },
+    point: { _id: '21', subject: 'subject 20', description: 'describe 20' },
+    whyRankList: [
+      { why: { _id: '22', subject: '21 is greater than 2', description: '2 is why because', parentId: '21', category: 'most' } },
+      { why: { _id: '23', subject: '21 is greater than 3', description: '3 is why because', parentId: '21', category: 'most' } },
+      { why: { _id: '24', subject: '21 is greater than 4', description: '4 is why because', parentId: '21', category: 'most' } },
+      { why: { _id: '25', subject: '21 is greater than 5', description: '5 is why because', parentId: '21', category: 'most' } },
+      { why: { _id: '26', subject: '21 is greater than 6', description: '6 is why because', parentId: '21', category: 'most' } },
+    ],
   },
   {
-    subject: 'Headline Issue #2',
-    description: 'Description for Headline Issue #2',
-    reasonPoints: {
-      most: [pointEleven, pointTwelve],
-      least: [pointThirteen, pointFourteen],
-    },
+    point: { _id: '31', subject: 'subject 30', description: 'describe 30' },
+    whyRankList: [
+      { why: { _id: '32', subject: '30 is greater than 2', description: '2 is why because', parentId: '31', category: 'most' } },
+      { why: { _id: '33', subject: '30 is greater than 3', description: '3 is why because', parentId: '31', category: 'most' } },
+      { why: { _id: '34', subject: '30 is greater than 4', description: '4 is why because', parentId: '31', category: 'most' } },
+      { why: { _id: '35', subject: '20 is greater than 5', description: '5 is why because', parentId: '31', category: 'most' } },
+      { why: { _id: '36', subject: '20 is greater than 6', description: '6 is why because', parentId: '31', category: 'most' } },
+    ],
   },
   {
-    subject: 'Headline Issue #3',
-    description: 'Description for Headline Issue #3',
-    reasonPoints: {
-      most: [pointFifteen, pointSixteen],
-      least: [pointSeventeen, pointEighteen],
-    },
+    point: { _id: '41', subject: 'subject 40', description: 'describe 40' },
+    whyRankList: [
+      { why: { _id: '42', subject: '40 is greater than 2', description: '2 is why because', parentId: '41', category: 'least' } },
+      { why: { _id: '43', subject: '40 is greater than 3', description: '3 is why because', parentId: '41', category: 'least' } },
+      { why: { _id: '44', subject: '40 is greater than 4', description: '4 is why because', parentId: '41', category: 'least' } },
+      { why: { _id: '45', subject: '40 is greater than 5', description: '5 is why because', parentId: '41', category: 'least' } },
+      { why: { _id: '46', subject: '40 is greater than 6', description: '6 is why because', parentId: '41', category: 'least' } },
+    ],
   },
 ]
 
-export const threePointLists = {
-  args: {
-    pointList,
-    side: 'most',
+const pointWithWhyRankListListWithRanks = [
+  {
+    point: { _id: '1', subject: 'subject 1', description: 'describe 1' },
+    whyRankList: [
+      { why: { _id: '2', subject: '1 is less than 2', description: '2 is why because', parentId: '1', category: 'most' }, rank: { _id: '60', stage: 'why', category: 'most', parentId: '2' } },
+      { why: { _id: '3', subject: '1 is less than 3', description: '3 is why because', parentId: '1', category: 'most' }, rank: { _id: '61', stage: 'why', category: 'neutral', parentId: '3' } },
+      { why: { _id: '4', subject: '1 is less than 4', description: '4 is why because', parentId: '1', category: 'most' }, rank: { _id: '62', stage: 'why', category: 'neutral', parentId: '4' } },
+      { why: { _id: '5', subject: '1 is less than 5', description: '5 is why because', parentId: '1', category: 'most' }, rank: { _id: '63', stage: 'why', category: 'neutral', parentId: '5' } },
+      { why: { _id: '6', subject: '1 is less than 6', description: '6 is why because', parentId: '1', category: 'most' }, rank: { _id: '64', stage: 'why', category: 'neutral', parentId: '6' } },
+    ],
+  },
+  {
+    point: { _id: '21', subject: 'subject 20', description: 'describe 20' },
+    whyRankList: [
+      { why: { _id: '22', subject: '21 is greater than 2', description: '2 is why because', parentId: '21', category: 'most' } },
+      { why: { _id: '23', subject: '21 is greater than 3', description: '3 is why because', parentId: '21', category: 'most' } },
+      { why: { _id: '24', subject: '21 is greater than 4', description: '4 is why because', parentId: '21', category: 'most' } },
+      { why: { _id: '25', subject: '21 is greater than 5', description: '5 is why because', parentId: '21', category: 'most' } },
+      { why: { _id: '26', subject: '21 is greater than 6', description: '6 is why because', parentId: '21', category: 'most' } },
+    ],
+  },
+  {
+    point: { _id: '31', subject: 'subject 30', description: 'describe 30' },
+    whyRankList: [
+      { why: { _id: '32', subject: '30 is greater than 2', description: '2 is why because', parentId: '31', category: 'most' } },
+      { why: { _id: '33', subject: '30 is greater than 3', description: '3 is why because', parentId: '31', category: 'most' } },
+      { why: { _id: '34', subject: '30 is greater than 4', description: '4 is why because', parentId: '31', category: 'most' } },
+      { why: { _id: '35', subject: '30 is greater than 5', description: '5 is why because', parentId: '31', category: 'most' } },
+      { why: { _id: '36', subject: '30 is greater than 6', description: '6 is why because', parentId: '31', category: 'most' } },
+    ],
+  },
+  {
+    point: { _id: '41', subject: 'subject 40', description: 'describe 40' },
+    whyRankList: [
+      { why: { _id: '42', subject: '40 is greater than 2', description: '2 is why because', parentId: '41', category: 'least' } },
+      { why: { _id: '43', subject: '40 is greater than 3', description: '3 is why because', parentId: '41', category: 'least' } },
+      { why: { _id: '44', subject: '40 is greater than 4', description: '4 is why because', parentId: '41', category: 'least' } },
+      { why: { _id: '45', subject: '40 is greater than 5', description: '5 is why because', parentId: '41', category: 'least' } },
+      { why: { _id: '46', subject: '40 is greater than 6', description: '6 is why because', parentId: '41', category: 'least' } },
+    ],
   },
+]
+
+const preRankByParentId = {
+  1: { _id: '51', stage: 'pre', category: 'most', parentId: '1' },
+  21: { _id: '52', stage: 'pre', category: 'most', parentId: '21' },
+  31: { _id: '53', stage: 'pre', category: 'most', parentId: '31' },
+  41: { _id: '54', stage: 'pre', category: 'least', parentId: '41' },
 }
 
-export const emptyPointList = {
-  args: {
-    pointList: [],
+export const threePointLists = { args: { pointWithWhyRankListList, side: 'most' } }
+
+export const emptyPointList = { args: { pointWithWhyRankListList: [] } }
+
+export const emptyArgs = { args: {} }
+
+export const withFirstItemRanked = { args: { pointWithWhyRankListList: pointWithWhyRankListListWithRanks, side: 'most' } }
+
+export const twoPointListsPlayThrough = {
+  args: { pointWithWhyRankListList: [pointWithWhyRankListList[0], pointWithWhyRankListList[1]], side: 'least' },
+  play: async ({ canvasElement, args }) => {
+    const { onDone } = args
+    const canvas = within(canvasElement)
+    const one = canvas.getByText('1 is less than 2')
+    await userEvent.click(one)
+    await asyncSleep(500) // allow transitions on the component to complete
+    await waitFor(() => {
+      expect(onDone.mock.calls[0][0]).toMatchObject({ valid: false, value: 0, delta: { category: 'neutral', stage: 'why', parentId: '3' } })
+    })
+    await userEvent.click(one)
+    await asyncSleep(500)
+    await waitFor(() => {
+      expect(onDone.mock.calls[1][0]).toMatchObject({ valid: false, value: 0, delta: { category: 'neutral', stage: 'why', parentId: '4' } })
+    })
+    await userEvent.click(one)
+    await asyncSleep(500)
+    await waitFor(() => {
+      expect(onDone.mock.calls[2][0]).toMatchObject({ valid: false, value: 0, delta: { category: 'neutral', stage: 'why', parentId: '5' } })
+    })
+    userEvent.click(one)
+    await asyncSleep(500)
+    await waitFor(() => {
+      expect(onDone.mock.calls[3][0]).toMatchObject({ valid: false, value: 0, delta: { category: 'neutral', stage: 'why', parentId: '6' } })
+      expect(onDone.mock.calls[4][0]).toMatchObject({ valid: false, value: 0.5, delta: { category: 'most', stage: 'why', parentId: '2' } })
+    })
+    const two = canvas.getByText('21 is greater than 2')
+    await userEvent.click(two)
+    await asyncSleep(500)
+    await userEvent.click(two)
+    await asyncSleep(500)
+    await userEvent.click(two)
+    await asyncSleep(500)
+    await userEvent.click(two)
+    await waitFor(() => {
+      expect(onDone.mock.calls[5][0]).toMatchObject({ valid: false, value: 0.5, delta: { category: 'neutral', stage: 'why', parentId: '23' } })
+      expect(onDone.mock.calls[6][0]).toMatchObject({ valid: false, value: 0.5, delta: { category: 'neutral', stage: 'why', parentId: '24' } })
+      expect(onDone.mock.calls[7][0]).toMatchObject({ valid: false, value: 0.5, delta: { category: 'neutral', stage: 'why', parentId: '25' } })
+      expect(onDone.mock.calls[8][0]).toMatchObject({ valid: false, value: 0.5, delta: { category: 'neutral', stage: 'why', parentId: '26' } })
+      expect(onDone.mock.calls[9][0]).toMatchObject({ valid: true, value: 1, delta: { category: 'most', stage: 'why', parentId: '22' } })
+    })
   },
 }
 
-export const emptyArgs = {
-  args: {},
+// rip pointWithWhyRankListList into the separate objects that go into the context
+function getStepArgsFrom(pointWithWhyRankListList) {
+  const cn = {
+    ...pointWithWhyRankListList.reduce(
+      (cn, rp) => {
+        cn.defaultValue.reducedPointList.push({ point: rp.point })
+        for (const whyRank of rp.whyRankList) {
+          if (whyRank.why) cn.apiResult.whys.push(whyRank.why)
+          if (whyRank.rank) cn.apiResult.ranks.push(whyRank.rank)
+        }
+        return cn
+      },
+      { defaultValue: { reducedPointList: [], preRankByParentId, round, discussionId }, apiResult: { whys: [], ranks: [] } }
+    ),
+  }
+  return cn
 }
 
-export const twoPointListsPlayThrough = {
-  args: {
-    pointList: pointList.slice(1, 3),
-    side: 'least',
-  },
-  play: async ({ canvasElement }) => {
+// sets up the socket api mocks and renders the component
+const StepTemplate = args => {
+  // topWhyById and preRankByParentId are taken from args to uses by the api call
+  const { defaultValue, apiResult, ...otherArgs } = args
+  useState(() => {
+    // execute this code once, before the component is initally rendered
+    // the api call will provide the new data for this step
+    window.socket._socketEmitHandlers['get-why-ranks-and-points'] = (discussionId, round, mostIds, leastIds, cb) => {
+      window.socket._socketEmitHandlerResults['get-why-ranks-and-points'].push([discussionId, round, mostIds, leastIds])
+      setTimeout(() => {
+        cb(apiResult)
+      })
+    }
+    window.socket._socketEmitHandlerResults['get-why-ranks-and-points'] = []
+    window.socket._socketEmitHandlers['upsert-rank'] = (rank, cb) => {
+      window.socket._socketEmitHandlerResults['upsert-rank'].push(rank)
+      cb && cb()
+    }
+    window.socket._socketEmitHandlerResults['upsert-rank'] = []
+  })
+  return <CompareWhysStep {...otherArgs} />
+}
+export const BeginStepMost = {
+  args: { ...getStepArgsFrom(pointWithWhyRankListList), category: 'most' },
+  decorators: [DeliberationContextDecorator, socketEmitDecorator],
+  render: props => <StepTemplate {...props} />,
+}
+
+export const BeginStepLeast = {
+  args: { ...getStepArgsFrom(pointWithWhyRankListList), category: 'least' },
+  decorators: [DeliberationContextDecorator, socketEmitDecorator],
+  render: props => <StepTemplate {...props} />,
+}
+
+export const FirstMostFetchFromApi = {
+  args: { ...getStepArgsFrom(pointWithWhyRankListListWithRanks), category: 'most' },
+  decorators: [DeliberationContextDecorator, socketEmitDecorator],
+  render: props => <StepTemplate {...props} />,
+  play: async ({ canvasElement, args }) => {
+    const { onDone } = args
     const canvas = within(canvasElement)
-    const pointThirteen = canvas.getByText('Point 13')
-    const pointSeventeen = canvas.getByText('Point 17')
+    await waitFor(() => {
+      expect(onDone.mock.calls[0][0]).toMatchObject({ valid: false, value: 1 / 3 })
+    })
+  },
+}
 
-    await userEvent.click(pointThirteen)
-    await userEvent.click(pointSeventeen)
-    expect(onDoneResult(canvas)).toMatchObject({
-      count: 5,
-      onDoneResult: {
-        valid: true,
-        value: 100,
-      },
+export const FirstMostFetchFromApiTheUserCompletes = {
+  args: { ...getStepArgsFrom(pointWithWhyRankListListWithRanks), category: 'most' },
+  decorators: [DeliberationContextDecorator, socketEmitDecorator],
+  render: props => <StepTemplate {...props} />,
+  play: async ({ canvasElement, args }) => {
+    const { onDone } = args
+    const canvas = within(canvasElement)
+    await asyncSleep(500)
+    await waitFor(() => {
+      expect(onDone.mock.calls[0][0]).toMatchObject({ valid: false, value: 1 / 3 })
+    })
+    const one = canvas.getByText('21 is greater than 2')
+    await userEvent.click(one)
+    await asyncSleep(500) // allow transitions on the component to complete
+    await waitFor(() => {
+      expect(onDone.mock.calls[1][0]).toMatchObject({ valid: false, value: 1 / 3 })
+    })
+    await userEvent.click(one)
+    await asyncSleep(500)
+    await waitFor(() => {
+      expect(onDone.mock.calls[2][0]).toMatchObject({ valid: false, value: 1 / 3 })
+    })
+    await userEvent.click(one)
+    await asyncSleep(500)
+    await waitFor(() => {
+      expect(onDone.mock.calls[3][0]).toMatchObject({ valid: false, value: 1 / 3 })
+    })
+    userEvent.click(one)
+    await asyncSleep(500)
+    await waitFor(() => {
+      expect(onDone.mock.calls[4][0]).toMatchObject({ valid: false, value: 1 / 3 })
+      expect(onDone.mock.calls[5][0]).toMatchObject({ valid: false, value: 2 / 3 })
+      expect(onDone.mock.calls.length).toBe(6)
+    })
+    const two = canvas.getByText('30 is greater than 2')
+    await userEvent.click(two)
+    await asyncSleep(500)
+    await userEvent.click(two)
+    await asyncSleep(500)
+    await userEvent.click(two)
+    await asyncSleep(500)
+    await userEvent.click(two)
+    await waitFor(() => {
+      expect(window.socket._socketEmitHandlerResults['upsert-rank'][5]).toMatchObject({
+        // id will be random so ignored
+        category: 'neutral',
+        parentId: '33',
+        stage: 'why',
+        discussionId: '1001',
+        round: 1,
+      })
+      expect(onDone.mock.calls[7][0]).toMatchObject({ valid: false, value: 2 / 3 })
+      expect(onDone.mock.calls[8][0]).toMatchObject({ valid: false, value: 2 / 3 })
+      expect(onDone.mock.calls[9][0]).toMatchObject({ valid: false, value: 2 / 3 })
+      expect(onDone.mock.calls[10][0]).toMatchObject({ valid: true, value: 1 })
+      expect(deliberationContextData(canvas)).toMatchObject({
+        whyRankByParentId: {
+          2: { _id: '60', stage: 'why', category: 'most', parentId: '2' },
+          3: { _id: '61', stage: 'why', category: 'neutral', parentId: '3' },
+          4: { _id: '62', stage: 'why', category: 'neutral', parentId: '4' },
+          5: { _id: '63', stage: 'why', category: 'neutral', parentId: '5' },
+          6: { _id: '64', stage: 'why', category: 'neutral', parentId: '6' },
+          22: { category: 'most', parentId: '22', stage: 'why', discussionId: '1001', round: 1 },
+          23: { category: 'neutral', parentId: '23', stage: 'why', discussionId: '1001', round: 1 },
+          24: { category: 'neutral', parentId: '24', stage: 'why', discussionId: '1001', round: 1 },
+          25: { category: 'neutral', parentId: '25', stage: 'why', discussionId: '1001', round: 1 },
+          26: { category: 'neutral', parentId: '26', stage: 'why', round: 1 },
+          32: { category: 'most', parentId: '32', stage: 'why', discussionId: '1001', round: 1 },
+          33: { category: 'neutral', parentId: '33', stage: 'why', discussionId: '1001', round: 1 },
+          34: { category: 'neutral', parentId: '34', stage: 'why', discussionId: '1001', round: 1 },
+          35: { category: 'neutral', parentId: '35', stage: 'why', discussionId: '1001', round: 1 },
+          36: { category: 'neutral', parentId: '36', stage: 'why', discussionId: '1001', round: 1 },
+        },
+      })
     })
   },
 }
diff --git a/stories/pair-compare.stories.jsx b/stories/pair-compare.stories.jsx
index 9ed83d063..e86ca4d2e 100644
--- a/stories/pair-compare.stories.jsx
+++ b/stories/pair-compare.stories.jsx
@@ -1,6 +1,6 @@
 import PairCompare from '../app/components/pair-compare'
-import { onDoneDecorator, onDoneResult } from './common'
-import { within, userEvent } from '@storybook/test'
+import { onDoneDecorator, onDoneResult, asyncSleep } from './common'
+import { within, userEvent, waitFor } from '@storybook/test'
 import expect from 'expect'
 import React from 'react'
 
@@ -10,20 +10,40 @@ export default {
   decorators: [onDoneDecorator],
 }
 
-const pointOne = { subject: 'Point 1', description: 'This is the first point' }
-const pointTwo = { subject: 'Point 2', description: 'This is the second point' }
-const pointThree = { subject: 'Point 3', description: 'This is the third point' }
-const pointFour = { subject: 'Point 4', description: 'This is the fourth point' }
-const pointFive = { subject: 'Point 5', description: 'This is the fifth point' }
-const pointSix = { subject: 'Point 6', description: 'This is the sixth point' }
+const whyRankList = [
+  { why: { _id: '1', subject: 'Point 1', description: 'This is the first point' } },
+  { why: { _id: '2', subject: 'Point 2', description: 'This is the second point' } },
+  { why: { _id: '3', subject: 'Point 3', description: 'This is the third point' } },
+  { why: { _id: '4', subject: 'Point 4', description: 'This is the fourth point' } },
+  { why: { _id: '5', subject: 'Point 5', description: 'This is the fifth point' } },
+  { why: { _id: '6', subject: 'Point 6', description: 'This is the sixth point' } },
+]
 
+const rankedWhyRankList = [
+  { why: { _id: '1', subject: 'Point 1', description: 'This is the first point' }, rank: { _id: '11', parentId: '1', stage: 'why', category: 'most' } },
+  { why: { _id: '2', subject: 'Point 2', description: 'This is the second point' }, rank: { _id: '12', parentId: '2', stage: 'why', category: 'neutral' } },
+  { why: { _id: '3', subject: 'Point 3', description: 'This is the third point' }, rank: { _id: '13', parentId: '3', stage: 'why', category: 'neutral' } },
+  { why: { _id: '4', subject: 'Point 4', description: 'This is the fourth point' }, rank: { _id: '14', parentId: '4', stage: 'why', category: 'neutral' } },
+  { why: { _id: '5', subject: 'Point 5', description: 'This is the fifth point' }, rank: { _id: '15', parentId: '5', stage: 'why', category: 'neutral' } },
+  { why: { _id: '6', subject: 'Point 6', description: 'This is the sixth point' }, rank: { _id: '16', parentId: '6', stage: 'why', category: 'neutral' } },
+]
 export const sixPoints = {
   args: {
     mainPoint: {
       subject: 'Global Warming',
       description: 'Climate change and global warming',
     },
-    pointList: [pointOne, pointTwo, pointThree, pointFour, pointFive, pointSix],
+    whyRankList,
+  },
+}
+
+export const sixPointsRanked = {
+  args: {
+    mainPoint: {
+      subject: 'Global Warming',
+      description: 'Climate change and global warming',
+    },
+    whyRankList: rankedWhyRankList,
   },
 }
 
@@ -37,23 +57,149 @@ export const empty = {
   pointList: [],
 }
 
-export const onePoint = {
+export const onePointCanBeYesStartOverNo = {
   args: {
     mainPoint: {
       subject: 'Global Warming',
       description: 'Climate change and global warming',
     },
-    pointList: [pointOne],
+    whyRankList: [whyRankList[0]],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const Yes = canvas.getByText('Yes')
+    await userEvent.click(Yes)
+    await waitFor(() => {
+      expect(onDoneResult(canvas)).toMatchObject({
+        count: 1,
+        onDoneResult: {
+          valid: true,
+          value: {
+            // _id will be auto generated
+            category: 'most',
+            parentId: '1',
+            stage: 'why',
+          },
+        },
+      })
+    })
+    const StartOver = canvas.getByText('Start Over')
+    await userEvent.click(StartOver)
+    await waitFor(() => {
+      expect(onDoneResult(canvas)).toMatchObject({
+        count: 2,
+        onDoneResult: {
+          valid: false,
+          value: null,
+        },
+      })
+    })
+    const No = canvas.getByText('No')
+    await userEvent.click(No)
+    await waitFor(() => {
+      expect(onDoneResult(canvas)).toMatchObject({
+        count: 3,
+        onDoneResult: {
+          valid: true,
+          value: {
+            // _id will be auto generated
+            category: 'neutral',
+            parentId: '1',
+            stage: 'why',
+          },
+        },
+      })
+    })
   },
 }
 
+export const onePointRankedGetsOnDone = {
+  args: {
+    mainPoint: {
+      subject: 'Global Warming',
+      description: 'Climate change and global warming',
+    },
+    whyRankList: [rankedWhyRankList[0]],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitFor(() => {
+      expect(onDoneResult(canvas)).toMatchObject({
+        count: 1,
+        onDoneResult: {
+          valid: true,
+        },
+      })
+    })
+  },
+}
 export const twoPoints = {
   args: {
     mainPoint: {
       subject: 'Global Warming',
       description: 'Climate change and global warming',
     },
-    pointList: [pointOne, pointTwo],
+    whyRankList: [whyRankList[0], whyRankList[1]],
+  },
+}
+
+export const UserChoosesNoPoint = {
+  args: {
+    mainPoint: {
+      subject: 'Global Warming',
+      description: 'Climate change and global warming',
+    },
+    whyRankList: [whyRankList[0], whyRankList[1], whyRankList[2]],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const Neither = canvas.getByText('Neither')
+    // don't await users event so not to miss the onDone calls from the same event
+    userEvent.click(Neither)
+    await waitFor(() => {
+      expect(onDoneResult(canvas)).toMatchObject({
+        count: 1,
+        onDoneResult: {
+          valid: false,
+          value: {
+            // _id will be auto generated
+            category: 'neutral',
+            parentId: '1',
+            stage: 'why',
+          },
+        },
+      })
+    })
+    await waitFor(() => {
+      expect(onDoneResult(canvas)).toMatchObject({
+        count: 2,
+        onDoneResult: {
+          valid: false,
+          value: {
+            // _id will be auto generated
+            category: 'neutral',
+            parentId: '2',
+            stage: 'why',
+          },
+        },
+      })
+    })
+    const No = canvas.getByText('No')
+    await userEvent.click(No)
+    await waitFor(() => {
+      expect(onDoneResult(canvas)).toMatchObject({
+        count: 3,
+        onDoneResult: {
+          valid: true,
+          value: {
+            // _id will be auto generated
+            category: 'neutral',
+            parentId: '3',
+            stage: 'why',
+          },
+        },
+      })
+    })
   },
 }
 
@@ -63,35 +209,74 @@ export const onDoneTest = {
       subject: 'Global Warming',
       description: 'Climate change and global warming',
     },
-    pointList: [pointOne, pointTwo, pointThree, pointFour],
+    whyRankList: [whyRankList[0], whyRankList[1], whyRankList[2], whyRankList[3]],
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     const Point1 = canvas.getByText('Point 1')
     await userEvent.click(Point1)
-
-    setTimeout(() => {
-      // wait for transition to occur
-      const Point3 = canvas.getByText('Point 3')
-      userEvent.click(Point3)
-    }, 500)
-
-    setTimeout(() => {
-      const Point4 = canvas.getByText('Point 4')
-      userEvent.click(Point4)
-    }, 1300)
-
-    setTimeout(() => {
+    await waitFor(() => {
       expect(onDoneResult(canvas)).toMatchObject({
         count: 1,
+        onDoneResult: {
+          valid: false,
+          value: {
+            // _id will be auto generated
+            category: 'neutral',
+            parentId: '2',
+            stage: 'why',
+          },
+        },
+      })
+    })
+    await asyncSleep(500)
+    const Point3 = canvas.getByText('Point 3')
+    await userEvent.click(Point3)
+    await waitFor(() => {
+      expect(onDoneResult(canvas)).toMatchObject({
+        count: 2,
+        onDoneResult: {
+          valid: false,
+          value: {
+            // _id will be auto generated
+            category: 'neutral',
+            parentId: '1',
+            stage: 'why',
+          },
+        },
+      })
+    })
+    await asyncSleep(500)
+    const Point4 = canvas.getByText('Point 4')
+    /* don't await - there are two onDone updates in succession and if we await the user event we miss the first one */
+    userEvent.click(Point4)
+    await waitFor(() => {
+      expect(onDoneResult(canvas)).toMatchObject({
+        count: 3,
+        onDoneResult: {
+          valid: false,
+          value: {
+            // _id will be auto generated
+            category: 'neutral',
+            parentId: '3',
+            stage: 'why',
+          },
+        },
+      })
+    })
+    await waitFor(() => {
+      expect(onDoneResult(canvas)).toMatchObject({
+        count: 4,
         onDoneResult: {
           valid: true,
           value: {
-            description: 'This is the fourth point',
-            subject: 'Point 4',
+            // _id will be auto generated
+            category: 'most',
+            parentId: '4',
+            stage: 'why',
           },
         },
       })
-    }, 1500)
+    })
   },
 }
diff --git a/stories/rerank-step.stories.js b/stories/rerank-step.stories.js
index ed644a1fa..fab8cdfef 100644
--- a/stories/rerank-step.stories.js
+++ b/stories/rerank-step.stories.js
@@ -5,13 +5,7 @@ import React, { useContext, useState } from 'react'
 import DeliberationContext from '../app/components/deliberation-context'
 import RerankStep, { Rerank } from '../app/components/steps/rerank'
 
-import {
-  onDoneDecorator,
-  onDoneResult,
-  DeliberationContextDecorator,
-  deliberationContextData,
-  socketEmitDecorator,
-} from './common'
+import { onDoneDecorator, onDoneResult, DeliberationContextDecorator, deliberationContextData, socketEmitDecorator, asyncSleep } from './common'
 import { within, userEvent, expect, waitFor } from '@storybook/test'
 import { cloneDeep } from 'lodash'
 
@@ -211,19 +205,21 @@ export const onDoneIsCalledAfterUserChangesRank = {
     discussionId,
     round,
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement)
+    const { onDone } = args
+    expect(onDone.mock.calls[0][0]).toMatchObject({
+      valid: false,
+      value: 1 / 3,
+    })
     const categories = canvas.getAllByText('Neutral')
     await userEvent.click(categories[0])
 
     await waitFor(() => {
-      expect(onDoneResult(canvas)).toMatchObject({
-        count: 2,
-        onDoneResult: {
-          valid: false,
-          value: 0.3333333333333333,
-          delta: { ...rank1postMost, category: 'neutral' },
-        },
+      expect(onDone.mock.calls[1][0]).toMatchObject({
+        valid: false,
+        value: 1 / 3,
+        delta: { ...rank1postMost, category: 'neutral' },
       })
     })
   },
@@ -264,25 +260,23 @@ export const rerankStepWithPartialDataAndUserUpdate = {
   args: { ...getRerankArgsFrom(mergeRanksIntoReviewPoints(reviewPoints, [rank1postMost])) },
   decorators: [DeliberationContextDecorator, socketEmitDecorator],
   render: rerankStepTemplate,
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement)
+    const { onDone } = args
     await waitFor(() => {
-      expect(onDoneResult(canvas)).toMatchObject({
-        count: 2,
-        onDoneResult: {
-          valid: false,
-          value: 0.3333333333333333,
-        },
+      expect(onDone.mock.calls[0][0]).toMatchObject({
+        valid: false,
+        value: 0,
       })
-      expect(window.socket._socketEmitHandlerResults['get-user-post-ranks-and-top-ranked-whys']).toEqual([
-        discussionId,
-        round,
-        ['1', '2', '3'],
-      ])
+      expect(window.socket._socketEmitHandlerResults['get-user-post-ranks-and-top-ranked-whys']).toEqual([discussionId, round, ['1', '2', '3']])
     })
     const categories = canvas.getAllByText('Neutral')
     await userEvent.click(categories[0])
     await waitFor(() => {
+      expect(onDone.mock.calls[1][0]).toMatchObject({
+        valid: false,
+        value: 1 / 3,
+      })
       expect(window.socket._socketEmitHandlerResults['upsert-rank']).toEqual({
         _id: '201',
         stage: 'post',
@@ -318,15 +312,13 @@ export const rerankStepWithTopDownUpdate = {
     })
     return rerankStepTemplate(args)
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement)
+    const { onDone } = args
     await waitFor(() => {
-      expect(onDoneResult(canvas)).toMatchObject({
-        count: 2,
-        onDoneResult: {
-          valid: false,
-          value: 0.3333333333333333,
-        },
+      expect(onDone.mock.calls[0][0]).toMatchObject({
+        valid: false,
+        value: 0,
       })
     })
     await waitFor(() => {
@@ -342,14 +334,16 @@ export const rerankStepWithTopDownUpdate = {
           },
         },
       })
+      expect(onDone.mock.calls[1][0]).toMatchObject({
+        valid: false,
+        value: 1 / 3,
+      })
     })
+    await asyncSleep(1000)
     await waitFor(() => {
-      expect(onDoneResult(canvas)).toMatchObject({
-        count: 3,
-        onDoneResult: {
-          valid: false,
-          value: 0.6666666666666666,
-        },
+      expect(onDone.mock.calls[2][0]).toMatchObject({
+        valid: false,
+        value: 0.6666666666666666,
       })
     })
     await waitFor(() => {