GithubHelp home page GithubHelp logo

nodejstry's People

Contributors

mayankpunetha007 avatar

Watchers

 avatar  avatar

nodejstry's Issues

Provide Undo feature to User(Pull request for Implementation:In comments)

Provide a undo button in UI that allows the user to go to any previous version of the note.

If we plan on only implementing undo feature and no redo function in the future the following will be a good solution

Outline

  1. When the user is on version 5 and does some changes and moves to version 6.
  2. He will have a UI button to undo and move to version 5 back

There are 2 possibilities here.

The user does some changes and now wants them to be updated will it be as version 6 or version 7?

If we choose to make it version 7 does the undo function require the user to go to version 6 or version 5?

  1. So from the user perspective the best way possible is to have him write it as version 7 since it is actually version 7 , so what if it's derived from version 5 it is the 7th version of the note.

  2. But when he undo's it from 7 he should move to 5 or 6?

  3. A perfect undo will be to move to 5 and not 6

  4. So one solution would be to maintain a table to store all versions of the user's note and also keep track of user history for operations. In this way of implementing most of the work will be done by the querying the DB.

What I mean by keeping track of user history is to store that the user movements like 1->2->3->4->5->6->5->7->5 etc.
This will make it very easy to implement undo feature.

d) In order to make that happen we introduce a concept of an event, each user operation on a note (save update) is an event with a unique event id. So instead of storing the note order we need a way to get event order for a user note. and each event is associated with a versioned note.

So for data modeling changes the data model will now look as follows:

assignment

For migrations of old users:

The database will be migrated by adding a single entry to the event table with their current version and in there Versioned task table there will be a single entry for the current version pulled from the tasks(notes) table.

Junk Data

If we have no plans on a redo function all events after the event in main task table are useless. We can have a corn job to delete these entries

Implementation Details:

  1. Whenever the user adds a note a version 1 is added to the task table. And the corresponding data to versioned task table. Along with an event with the taskId and userId and the parent as the current eventId from which it was derived
  2. On updating notes also an entry is added to the versioned table. and events table are updated with the current event as the parent
  3. On undoing operation just call the check the parent field in current eventID and return the corresponding note After updating task table
  4. For better UI we can also send has undone to the frontend. Now instead of sending tasks id, useID pair event Id, userID will uniquely identify a note.
  5. New undo will be added to frontend that will make the user call to corresponding back-end APIs for undo.

Sample working

Create note(e1) {x : abcd} e1 -> null (parent)
update note(e2) {x: abcde} e1->null, e2->e1
update note( e3) {x: ref} e1 ->null, e2->e1, e3->e2
undo move to e2(e2) {x: abcde} e2->e1, e3->e2
update e2 (e4) {x:asdasd) e4->e2

Clearly, you can see how this functionality can only handle undo operations

Limitations

  1. This may not be the best solution from the data perspective.
  2. Additional Data will be stored in a new table. Insertions will increase for updating and create notes.
  3. And also database call rate is high since on an average there won't be more than 100 edits for a single note a new table may not be worth the overhead.
  4. There is no scope for redo functionality using the same data model

An undo feature is alone insufficient We will obviously want a redo function in the future.

The below solution can be more effective and is scalable to even redo functionality. With an average run time of few ms for up to 10000 edits of a single note. Which seem very less likely

Here is another data model which can handle a more intuitive undo redo function and is also more efficient(fewer DB calls)

untitled diagram 4

The ordered list will store the user operation flow.

Add new task to Tasks

Add details to versioned task
Then again add the entry to the task in the order list.

Update a task

Update entry in order list put the new version on
the order List after programmatically finding the correct location.

Undo

Programmatically find location in order list return the previous entry, if exists
Update tasks versionedTaskId

Redo

Programmatically find location in order list return the next entry, if exists
Update tasks versionedTaskId

Delete

delete all related data from the 2 tables

Make user experience more lively by allowing drag and drop for notes and use web-socket to make sure user instantaneously sees a change in all his devices when he changes from one device

Currently the user has no way to make it possible to order his task list.

The idea is to provide the user with a drag and drop functionality where he can arrange is notes as he likes. And his note arrangement will persist in the database and he sees the UI like it was when he last logged in.

For this to be implemented we need to the following:

  1. Allow user to drag and drop anywhere in the note list
  2. Store and update each note position in the DB so that it persists
  3. The version for note won't be updated for position change since the content hasn't changed
  4. Update Insert notes via WebSocket
  5. Whenever a note is updated or changed broadcast to user's topic details regarding the updated/added or deleted note

I propose the following data model for drag drop

untitled diagram 2

This will let user store the position of every note in the DB

Implementation details

  1. Implement drag and drop in UI
  2. on drag complete Update the position of the note in the backend. If it fails to reset the position and tell the user it failed to update position
  3. Provide web socket end point for the user to update/add/delete a note
  4. This WebSocket broadcasts to the user topic whenever any such change happens
  5. This is a very good UX addon for when the user is logged in from multiple devices

Migrations

For old users the position will be null and current view will be displayed. But they will have the ability to drag and drop their notes. And the new positions will be updated as they use the feature

For the WebSocket technique, there won't be any issues Since all they will see is a more lively UX if they are using from multiple devices.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.