       {x, y}
 
   getInitialState: ->
-    # # DEBUG CODE
-    # console.log "PROPS [#{@props.mark.yUpper},#{@props.mark.yLower}]"
-    # console.log "INITIAL (STATE.X, STATE.Y): (#{Math.round @props.mark.x},#{Math.round @props.mark.y})"
     mark: @props.mark
-    centerX: @props.mark.x
-    centerY: @props.mark.y
-    markHeight: @props.defaultMarkHeight
+    markStatus: 'mark'
+    fillColor: @props.fillColor
+    strokeColor: @props.strokeColor
+    strokeWidth: @props.strokeWidth
+
+  getDefaultProps: ->
     fillColor: 'rgba(0,0,0,0.5)'
     strokeColor: 'rgba(0,0,0,0.5)'
     strokeWidth: 6
-    yUpper: @props.mark.yUpper
-    yLower: @props.mark.yLower
-    markHeight: @props.mark.yLower - @props.mark.yUpper
-    markStatus: 'mark'
 
   componentWillReceiveProps: ->
-    @setState
-      key: @props.mark.key
-      yUpper: @props.mark.yUpper
-      yLower: @props.mark.yLower
-      centerX: @props.mark.x
-      centerY: @props.mark.y
-      markHeight: @props.mark.yLower - @props.mark.yUpper
-
+    @setState mark: @props.mark
+  
   onClickMarkButton: ->
     markStatus = @state.markStatus
     console.log 'markStatus is ', markStatus

          y           = 0
          viewBox     = {"0 0 @props.imageWidth @props.imageHeight"}
          width       = {Math.ceil( @props.imageWidth - 2*@state.strokeWidth ) }
          height      = {@state.markHeight}
          fill        = {if @props.selected then "rgba(255,102,0,0.25)" else "rgba(0,0,0,0.5)"}
          stroke      = {@state.strokeColor}
          strokeWidth = {@state.strokeWidth}

            <ResizeButton 
              className = "lowerResize"
              handleResize = {@props.handleLowerResize} 
              transform = {"translate( #{@props.imageWidth/2}, #{ Math.round( markHeight - @props.scrubberHeight/2 ) } )"} 
              scrubberHeight = {@props.scrubberHeight}
              scrubberWidth = {@props.scrubberWidth}
              workflow = {@props.workflow}
