[AB3: Tracing Code] Add Model tracing code

tutorials/ab3TracingCode.md

@@ -273,6 +273,91 @@ Recall from the User Guide that the `edit` command has the format: `edit INDEX [
 {{ dg_ref }} This is a good time to read through the [**_UI component_** section of the DG](https://se-education.org/addressbook-level3/DeveloperGuide.html#ui-component)
 
 
+## Misc: Tracing `Model` execution path
+
+1. In our previous discussions, we've primarily focused on the `Logic` component to understand the general flow of logic when executing commands.
+2. Now, let's delve into how the `EditCommand#execute()` method interacts with the `Model` component.
+3. Let us reproduce the full code of `EditCommand#execute()`
+
+   **`EditCommand#execute()`:**
+   ```java
+   @Override
+       public CommandResult execute(Model model) throws CommandException {
+        requireNonNull(model);
+        List<Person> lastShownList = model.getFilteredPersonList();
+
+        if (index.getZeroBased() >= lastShownList.size()) {
+            throw new CommandException(Messages.MESSAGE_INVALID_PERSON_DISPLAYED_INDEX);
+        }
+
+        Person personToEdit = lastShownList.get(index.getZeroBased());
+        Person editedPerson = createEditedPerson(personToEdit, editPersonDescriptor);
+
+        if (!personToEdit.isSamePerson(editedPerson) && model.hasPerson(editedPerson)) {
+            throw new CommandException(MESSAGE_DUPLICATE_PERSON);
+        }
+
+        model.setPerson(personToEdit, editedPerson);
+        model.updateFilteredPersonList(PREDICATE_SHOW_ALL_PERSONS);
+        return new CommandResult(String.format(MESSAGE_EDIT_PERSON_SUCCESS, Messages.format(editedPerson)));
+    }
+   ```
+4. We hope that you have developed an appreciation for sequence diagrams in understanding high-level overviews of AB3. 
+   Below is a sequence diagram, with some method calls omitted for brevity, illustrating the interactions within the Model component during the execution of an edit command.
+   <puml src="images/tracing/EditSequenceDiagramModelHighLevel.puml"
+   alt="Tracing an `edit` command through the Model component"/>
+5. Let us put a breakpoint at this line which will be the first passing of control to `Model` in `EditCommand#execute()`.
+   ![ModelBreakpoint](images/tracing/ModelBreakpoint.png)
+6. Stepping into the Model component reveals that it returns an `FilteredList<Person>`.
+
+### What is FilteredList<Person>?
+
+
+```java
+    public ModelManager(ReadOnlyAddressBook addressBook, ReadOnlyUserPrefs userPrefs) {
+        requireAllNonNull(addressBook, userPrefs);
+
+        logger.fine("Initializing with address book: " + addressBook + " and user prefs " + userPrefs);
+
+        this.addressBook = new AddressBook(addressBook);
+        this.userPrefs = new UserPrefs(userPrefs);
+        filteredPersons = new FilteredList<>(this.addressBook.getPersonList());
+        }
+```
+
+1. Peeking into the constructor reveals `filteredPersons` is created with a `FilteredList` wrapped around
+   Addressbook's internal list. 
+2. `FilteredList` is a wrapper around an existing list and, as the name suggests, applies a filter to determine which 
+    elements from the original list should be included.
+3. Any modifications to the original list (e.g., adding, removing, or updating elements) will be visible in the FilteredList.
+
+
+### Model's AddressBook
+
+
+1. Continuing on, let us step over until the next `Model` interaction, `model.hasPerson(editedPerson)`.
+
+<img src="images/tracing/modelhasPerson.png" alt="setPredicate" width="600">
+
+2. This reveals our first pass of control to `Addressbook`
+2. Upon further inspection, the `Addressbook` is merely invoking the contains method of its internal list of persons. 
+   [Remember](#what-is-filteredlist), this is the same list that the `ModelManager`'s `FilteredList` wraps around.
+3. Stepping over again brings us to `model.setPerson` which again further calls on `Addressbook` to `setPerson` as it has access to its internal list. 
+
+### Filtering the FilteredPersons
+
+1. Now we should be at `model.updateFilteredPersonList(PREDICATE_SHOW_ALL_PERSONS)`.
+   <img src="images/tracing/setPredicate.png" alt="setPredicate" width="800">
+2. Stepping into this method, we see it calls `filteredPersons.setPredicate(predicate)`.
+3. Predicates enable filtering the list based on specific criteria. _Hint: Another feature uses this too!_
+4. For `EditCommand`, `PREDICATE_SHOW_ALL_PERSONS` is used to clear any existing filters, 
+   ensuring that all persons are displayed.
+5. A `CommandResult` is returned with a message displaying edited `Person`.
+
+<box type="tip" seamless>
+How can you use what you learnt to develop a sort feature?
+</box>
+
 ## Conclusion
 
 In this tutorial, we traced a valid edit command from raw user input to the result being displayed to the user. From this tutorial, you learned more about how the various components work together to produce a response to a user command.

tutorials/images/tracing/EditSequenceDiagramModelHighLevel.puml

@@ -0,0 +1,62 @@
+@startuml
+!include ../style.puml
+skinparam ArrowFontStyle plain
+
+box Logic LOGIC_COLOR_T1
+participant "EditCommand" as EditCommand LOGIC_COLOR
+participant "CommandResult" as CommandResult LOGIC_COLOR
+end box
+
+box Model MODEL_COLOR_T1
+participant "FilteredList<Person>" as ObservableList MODEL_COLOR
+participant "ModelManager" as Model MODEL_COLOR
+end box
+
+--> EditCommand
+activate EditCommand
+
+
+
+EditCommand -> Model : getFilteredPersonList()
+activate Model
+Model --> EditCommand
+deactivate Model
+
+
+EditCommand --> ObservableList : retrieve Person
+activate ObservableList
+ObservableList --> EditCommand : Person
+deactivate ObservableList
+
+EditCommand --> EditCommand : createEditedPerson
+activate EditCommand
+EditCommand --> EditCommand
+deactivate EditCommand
+
+EditCommand --> Model : setPerson
+activate Model
+Model --> EditCommand
+deactivate Model
+
+EditCommand --> Model : updateFilteredPersonList
+activate Model
+Model --> ObservableList : setPredicate
+activate ObservableList
+ObservableList --> Model
+deactivate ObservableList
+Model --> EditCommand
+deactivate Model
+
+
+
+
+create CommandResult
+EditCommand --> CommandResult
+activate CommandResult
+CommandResult --> EditCommand
+deactivate CommandResult
+
+[<-- EditCommand
+deactivate EditCommand
+
+@enduml