Planning issue: Synchronous Editing

[divyabaid16]

I would like to complete the following task in Synchronous editing as part of my GSoC

• Real-time multi-user image placement
• Low latency API using sockets
• Testing
• Documentations

@ViditChitkara I would like to discuss it with you too. I'm aware about your exams but tagging you here so that you have a look once you're done with your exams.

[divyabaid16]

@jywarren @SidharthBansal @gauravano how do I get the label and edit rights here?
And should we create a different project for Synchronous editing?

[SidharthBansal]

Yeah, It will be great to have a project too. @jywarren please give her rights. i don't have permissions to distribute permissions.

[SidharthBansal]

You can remove FTO from the checklist. FTOs are complimentary.

[divyabaid16]

I have updated it 😄

[SidharthBansal]

• Real-time multi-user image placement
• Low latency API using sockets

Can you please divide this further so that we can have much more modularity in reviewing the tasks?

[SidharthBansal]

Great

…

On Fri, May 17, 2019, 9:53 PM Divya Baid ***@***.***> wrote: I have updated it 😄 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#609?email_source=notifications&email_token=AFAAEQYXREM4DMPILIFG6WLPV3LXHA5CNFSM4HNCYVX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVVG33I#issuecomment-493514221>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFAAEQ2NFNSS6PLKQRGJIMLPV3LXHANCNFSM4HNCYVXQ> .

[grvsachdeva]

Hi @divyabaid16, yes it's better to create a separate project for Synchronous editing. Also, try to label issues of mapknitter now, I think @jywarren added mapknitter to access the list of SoC. Let us know if you're still having problem with editing/labeling issues.

Also, I saw that you have shown interest in Image management in #608. So, would you be working on both Image Management and Synchronous editing in parallel? Thanks!

[divyabaid16]

I think @jywarren added mapknitter to access the list of SoC. Let us know if you're still having problem with editing/labeling issues.

I checked it just now again and I still don't have the privileges.

Also, I saw that you have shown interest in Image management in #608. So, would you be working on both Image Management and Synchronous editing in parallel? Thanks!

I was planning to first finish up with the task of Image Management and then go with Synchronous Editing.
But if needed at a later stage, I may start up with Synchronous Editing early before finishing the Image Management Part.

Thanks!

[grvsachdeva]

As @ViditChitkara has only proposed for Synchronous editing, so maybe we can let him start with it first and you can start with Image management. After completing Image management, you can join Synchronous editing? What do you think @divyabaid16?

[grvsachdeva]

@jywarren the labeling rights are still not in place. Maybe, try changing the access to write type - https://github.com/orgs/publiclab/teams/soc/repositories here? Thanks!

[ViditChitkara]

Hi @divyabaid16 , @gauravano , we may discuss the synchronous editing part here like how shall we approach it. Then we may split the tasks among us. Does that make sense?
Thanks

[divyabaid16]

That's great @ViditChitkara
Thanks!

[ViditChitkara]

Hi @divyabaid16 @jywarren Circling back to this, I think:-

1. We'll be requiring action cable(implemented in plots2) to have real time updation of the image placement on map.
2. Everytime an image is placed or the dimensions are saved for the placed image, all the information related to the image(url, dimensions, position, etc.) will be sent to the action cable server which will be broadcasted to the users connected to a particular room.
3. Hence for this, we'll be needing an API in plots2 project which will receive the image changes in a particular format and will be communicating with action cable.

Thoughts on this? I think we need more detailed steps implementation.
Thanks

[jainaman224]

Looks good to me. 👍

[ViditChitkara]

Left some comments on #685 . Will start with the action cable part on the rails 5 upgrade branch

[jywarren]

Thanks, all! And, perhaps we would need to begin developing some event handlers/listeners for events in Leaflet.DistortableImage, and planning out what those are, like updatePosition, createImage, deleteImage as well as figuring out whether there are image.setPosition() methods so that we can connect those events to ActionCable in JS? https://github.com/publiclab/Leaflet.DistortableImage/

And deciding on the syntax for such updates to be made - some kind of JSON syntax like:

{
  'image_id': 1241251,
  'corners': [
    {...}
  ]
}

Perhaps it could be based around this format, but would we be sending a JSON collection of all updated images, or one at a time? I think all at once, in an array, esp. if multiple images are being moved at once:

https://github.com/publiclab/Leaflet.DistortableImage/blob/d9347144917d60c3cd81694c3f38131dc33f0902/src/DistortableCollection.js#L314-L344

Finally, what are the possible responses: success rejected (meaning another edit happened while this was being transmitted?) etc -- and how do we handle such responses (would reject contain a new image position from the server?)

This all can occupy us quite a bit while Rails 5 and ActionCable come online, and we can develop careful spec (and tests) for these possibilities. How does that sound? And, please feel free to link to relevant sections of your proposals to plan this out. Thanks all!

[ViditChitkara]

Yes, I think we should send json of all images (which are updated at once). We could freeze the image being placed by a particular user in all other systems. Maybe the reject function will tell the browser to freeze editing of that particular image. This way there won't be conflicting versions of an image.

I found an article based on building collaborative editors. However, this is for text only and our requirement is image editing and placements. However the algorithm used here can still be handy. This is based on Operational transformation used by google docs.

So, are we good to go with action cable then? Will make a pr for it. @jywarren @jainaman224 @divyabaid16
Along with the action cable part, I'll start with writing all the events and handlers as well in Leaflet. DistortableImage.

Seems good?

[jywarren]

+1 action cable!

…

On Tue, Jul 2, 2019 at 4:54 PM Vidit ***@***.***> wrote: Yes, I think we should send json of all images (which are updated at once). We could freeze the image being placed by a particular user in all other systems. Maybe the reject function will tell the browser to freeze editing of that particular image. This way there won't be conflicting versions of an image. I found an article <https://blog.aha.io/text-editor/> based on building collaborative editors. However, this is for text only and our requirement is image editing and placements. However the algorithm used here can still be handy. This is based on Operational transformation used by google docs. So, are we good to go with action cable then? Will make a pr for it. @jywarren <https://github.com/jywarren> @jainaman224 <https://github.com/jainaman224> @divyabaid16 <https://github.com/divyabaid16> Along with the action cable part, I'll start with writing all the events and handlers as well in Leaflet. DistortableImage. Seems good? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#609?email_source=notifications&email_token=AAAF6JYSZPFAFRWB3WWZCK3P5O54VA5CNFSM4HNCYVX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZCQP5I#issuecomment-507840501>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6J3NBLOODDPJYI2QKVLP5O54VANCNFSM4HNCYVXQ> .

[ViditChitkara]

Left some comments on #805 . Any help here would be appreciated.