Annotate image widget

[Vismayak]

**The widget is working but for proper testing it would be good to have a sample extractor for annotating images in pyclowder, I finished the rough draft of it already **

Aim

The aim of this widget is to annotate images using user points to create a polygon around an object, the code could also be reused for other image based tasks like image prompting

How to test

In the front end directory run npm install as we have a couple of new libraries

Run an extractor, locally as in to do the necessary modifications. The extractor should be used on image files. For ease, I created a sample extractor in the pyclowder repo (branch is called sample-image-annotation-extractor). Running the extractor, is the best way to test the widget.

1. Add another parameter in extractor-info.json file,

"parameters": {
    "schema": {
      "Annotations": {
        "type": "string",
        "title": "Annotate image",
        "description": "Annotate image",
        "format": "ImageAnnotator"
      }
    }
  }

2. When you open the extractor, you can see a button that opens a modal
   
   

Clicking on the image should create points that form a polygon around the desired object, add a name to save annotation.

PS I also made some changes regarding the FileSelector Component to make the naming consistent

[longshuicy]

Is this ready to be reviewed? If so could you remove the [WIP]? If not, could you switch it back to draft PR? Thanks!

[Vismayak]

@longshuicy how do you resolve conflicts with package-lock.json, I tried deleting it and npm i but it is not helping, is there a specific way to add new packages? I had to install d3 library to make the widget

[tcnichol]

I'm getting an error message in this extractor when I run it on an image.

024-07-10 16:23:25,157 [Thread-4       ] INFO    : pyclowder.connectors - [668efb5251ab8a71801b8def] : StatusMessage.start: Started processing.
2024-07-10 16:23:25,158 [Thread-4       ] DEBUG   : pyclowder.extractors - default check message : {'host': 'http://localhost:8000', 'secretKey': 'eyJ1c2VyIjoiYUBhLmNvbSIsImtleSI6IkUyN1dUSWdERXIycmpxSzJPNjFfSHcifQ.sUuiutsnuAlNhRRg6dpyneh214Q', 'retry_count': 0, 'resource_type': 'file', 'flags': '', 'filename': '20230614_202933.jpg', 'fileSize': 938600, 'id': '668efb5251ab8a71801b8def', 'datasetId': '6688bb65387012ac7f7fa572', 'job_id': '668efbcd51ab8a71801b8dff', 'parameters': {}, 'routing_key': 'ncsa.image_annotator'}
2024-07-10 16:23:25,194 [Thread-4       ] INFO    : pyclowder.connectors - [668efb5251ab8a71801b8def] : StatusMessage.processing: Downloading file.
2024-07-10 16:23:25,274 [Thread-4       ] INFO    : root - Received parameters
2024-07-10 16:23:25,274 [Thread-4       ] INFO    : pyclowder.connectors - [668efb5251ab8a71801b8def] : StatusMessage.done: Done processing.
Failed to load parameters, it's not compatible with json.loads().
Error:the JSON object must be str, bytes or bytearray, not dict

[tcnichol]

Errors fixed by cleaning old volumes.

[tcnichol]

Here is the metadata I see after running it on an image.

[tcnichol]

If you can fix the merge conflicts I think this one is good to go.