UniversalDataTool / universal-data-tool

Collaborate & label any type of data, images, text, or documents, in an easy web interface or desktop app.
https://universaldatatool.com
MIT License
1.92k stars 187 forks source link

hideNext, hidePrev, etc doesn't work for every component within UniversalSampleEditor #519

Open tylersuchan opened 2 years ago

tylersuchan commented 2 years ago

The bug: It would appear that the props hideNext, hidePrev, etc only works for the "ImageSegmentation" component. This PR addressed adding the option to add these props within UniversalSampleEditor: https://github.com/UniversalDataTool/universal-data-tool/pull/410 However, the references to the props need to be added for each component in order for it to work, as UniversalSampleEditor renders each component separately based on its interface. If the component is rendered without a reference to these props, the props are labeled as undefined!

Steps to Reproduce? I am trying to use the UniversalSampleEditor to render a VideoSegmentation object. I have no need for the Next/Prev buttons at this time, so I tried passing in the hidePrev & hideNext props to the object, but I found that this doesn't hide the buttons:

return(
        <UniversalSampleEditor
          hideNext
          interface={{ 
            type: 'video_segmentation',
            regionTypesAllowed: ['bounding-box', 'polygon', 'full-segmentation', 'point', 'pixel-mask'],
            multipleRegionLabels: true,
            multipleRegions: true,
            overlappingRegions: true 
          }}
          sample={{ videoUrl: url}}
          onExit={(action) => {
            // Called when user hits "Save", "Next", or "Prev"
          }}
          // when data is saved this is called
          onModifySample={(sampleIndex, newSampleData) => {
            console.log('data: ', sampleIndex)
          }}
        />
      )
    }

Even though hideNext is registered here, it won't matter because VideoSegmentation doesn't pass this prop through to the "Annotator" object within VideoSegmentation.js: https://github.com/UniversalDataTool/universal-data-tool/blob/master/src/components/VideoSegmentation/index.js image

We can verify this by looking at the React devtools: image

MainLayout, a child of Annotator, has a value of "undefined" for these props! image

This is important, as manually changing these fields within the devtools creates the desired effect. image