         <ActionButton onClick={@nextSubject} text="Next Page" />
 
     if @state.loading
-      # console.log "loading..."
       markingSurfaceContent = <LoadingIndicator />
     else
       markingSurfaceContent =
         <svg
           className = "subject-viewer-svg"
-          width = {@state.imageWidth}
-          height = {@state.imageHeight}
+          width = {@props.subject.width}
+          height = {@props.subject.height}
           viewBox = {viewBox}
           data-tool = {@props.selectedDrawingTool?.type} >
           <rect
             ref = "sizeRect"
-            width = {@state.imageWidth}
-            height = {@state.imageHeight} />
+            width = {@props.subject.width}
+            height = {@props.subject.height} />
           <MouseHandler
             onStart = {@handleInitStart}
             onDrag  = {@handleInitDrag}


  componentDidMount: ->
    console.log "____>>componen DID mount"
    @setView 0, 0, @state.imageWidth, @state.imageHeight
    @loadImage @props.subject.location.standard
    window.addEventListener "resize", this.updateDimensions


            inst    = "marking surface">
            <SVGImage
              src = {@props.subject.location.standard}
              width = {@props.subject.width}
              height = {@props.subject.height} />
          </MouseHandler>

          { # HIGHLIGHT SUBJECT FOR TRANSCRIPTION
