Autocomplete / Async Retrieval for regionClsList

[stajahlee]

I need to do something like:

<ReactImageAnnotate
    .......
    .......
    regionClsList={input => this.getClasses(input)}
/>

where given the input typed into the select 'value container' I can perform an api call filtered on the input (our potential items that need to be available to that dropdown is a very, very large list)

Is this possible at the moment?

[seveibar]

This isn't possible at the moment. But it's a good idea, so I'm guessing you have a really big list of classes?

[stajahlee]

@seveibar yes - we have over 33K devices (all of our images will be of these various devices) to filter down from with an api call
your tool is really fantastic with great features we like, such as zoom, but we have to find a solution to the list filtering (something like mui autocomplete from their labs section instead of react-select) ...
if we go down this route we may have to fork and then could make a PR to see if you'd like our contribution (team hasn't decided just yet)

[seveibar]

I think you might be interested in what @ThibautGeriz is working on here: #32

Basically you could have a custom form with autocomplete. If it works for you, I can probably accelerate the merging process on that PR. Let me know

[stajahlee]

That's awesome - I will pull it down and try this out today to see if we can work with this. I see that you merged the branch (but not released just yet) - that's fantastic. Thanks for letting me know! I'll keep an eye out on the released build too to see if I can install from npm. :)

[seveibar]

Hey @stajahlee, I've merged the RegionEditLabel override into react-image-annotate and published it after some fixes. You can try it out in version 0.2.5.

Here's an example that produces the following screenshots (also can be seen in src/Annotator/index.story.js)

const MyComponent = () => {
    const images = [
      exampleImage,
      "https://loremflickr.com/100/100/cars?lock=1",
      "https://loremflickr.com/100/100/cars?lock=2"
    ]

    const NewRegionEditLabel = ({
      region,
      editing,
      onDelete,
      onChange,
      onClose,
      onOpen
    }) => {
      return (
        <div style={{ backgroundColor: "white" }}>
          I'm the closed part
          <div style={{ display: editing ? "block" : "none" }}>
            I'm the part that shows when it's being edited!
            <button onClick={() => onDelete(region)}>Delete This Region</button>
            <button
              onClick={() => onChange({ ...region, cls: "awesome-value" })}
            >
              Set Classification to "awesome-value"
            </button>
            <button onClick={() => onClose(region)}>Close the edit mode</button>
          </div>
        </div>
      )
    }

    return (
      <Annotator
        onExit={actionAddon("onExit")}
        labelImages
        selectedImage={images[0]}
        RegionEditLabel={NewRegionEditLabel}
        images={[
          {
            src: exampleImage,
            name: "Seve's Desk"
          },
          {
            src: images[1],
            name: "Frame 0036"
          },
          {
            src: images[2],
            name: "Frame 0037"
          }
        ]}
      />
    )
}

[stajahlee]

@seveibar Thank you so much for releasing this - it is exactly what we need for this concern and my api call is working swimmingly. Unfortunately I have a new error when clicking the Settings button (in the Header). It crashes the application with the error:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

I can make a new issue for this unless it is existing behavior you are aware of (for my case I really would love to just have all of the Header Buttons be optional with a prop to the Annotate component like you have for enabledTools. We don't really need to allow our users to have these additional settings or fullscreen option.

[seveibar]

Let's split this into two issues, both of which can be solved:

1. Optional Header Buttons <- Want to make it :)?
2. Issue w/ Settings button (see below)

Now there are a couple reasons why the error in (2) might be happening. Keep in mind, it doesn't seem to reproduce on the demo playground. To fix this I'd need a sample github repository that shows the issue (that should then be posted as a new issue). I'm hoping you have two versions of react. Run npm ls react and see if any of the versions don't match. If they don't match, the fix is usually just updating react or using "resolutions" if you have yarn.

[stajahlee]

I do see

├── react@16.12.0 
└─┬ react-image-annotate@0.2.5
  └─┬ material-survey@1.0.34
    └── react@16.13.1 

when I run this command.

UPDATE:
I changed our react to 16.13.1 and it fixed that error!
There is another: Uncaught RangeError: Maximum call stack size exceeded. at HTMLDocument.contain (TrapFocus.js:69) but it isn't crashing the app.

[stajahlee]

As for the

1. Optional Header Buttons
   Yes that seems like something I would be able to work on and contribute. :)
   I would have to get a better understanding of the tools here though (storybook / do I see typescript?), where I've never used storybook, just straight react js so far.

[seveibar]

I'll add some contributing/development info on the wiki tonight :) Yes the main way to run the test the library is with yarn storybook (it runs react storybook). It lets you put in different states of the component and see how they look in a browser.

[seveibar]

Ill close this issue because we solved the original problem, but feel free to open new ones for problems or feature proposals :)

[stajahlee]

Thank you so much for everything! It really is awesome.