Add slides for stage 3

Author: siddhantwahal

slides/03_traitsui.md

@@ -5,9 +5,9 @@ jupyter:
       extension: .md
       format_name: markdown
       format_version: '1.3'
-      jupytext_version: 1.14.0
+      jupytext_version: 1.13.7
   kernelspec:
-    display_name: Python 3 (ipykernel)
+    display_name: Python 3
     language: python
     name: python3
 ---
@@ -231,6 +231,44 @@ p.edit_traits()
 <!-- #region slideshow={"slide_type": "slide"} -->
 ## Specifying an editor
 
+- Editors: encapsulate display instructions for a trait type
+    - Hide GUI-toolkit code behind an abstraction layer
+    - All standard traits has a predefined editor that is automatically
+      displayed when the trait is displayed, unless overridden
+<!-- #endregion -->
+
+<!-- #region slideshow={"slide_type": "slide"} -->
+## Examples
+
+This code automatically uses `StrEditor`, the default for `Str` traits:
+<!-- #endregion -->
+
+```python
+class Stringy(HasStrictTraits):
+    characters = Str()
+
+s = Stringy(characters='<b>Stringy characters</b>')
+s.edit_traits(
+    view=View(
+        Item("characters")
+    )
+)
+```
+<!-- #region slideshow={"slide_type": "slide"} -->
+This code uses an HTMLEditor:
+<!-- #endregion -->
+```python
+from traitsui.api import HTMLEditor
+s.edit_traits(
+    view=View(
+        Item("characters", editor=HTMLEditor())
+    )
+)
+```
+
+<!-- #region slideshow={"slide_type": "slide"} -->
+
+## A few useful editors
 - We illustrate the powerful `InstanceEditor` here
 - Consider the following
 
@@ -313,9 +351,136 @@ sam = Person(name='Sam', age=29, bff=frodo)
 sam.edit_traits()
 ```
 
+<!-- #region slideshow={"slide_type": "slide"} -->
+- Another useful editor allows us to interface with `DataFrame`s
+<!-- #endregion -->
+
+```python
+import pandas as pd
+from traits.api import Event, Instance, Int 
+from traitsui.api import ModelView
+from traitsui.ui_editors.data_frame_editor import DataFrameEditor
+
+class FramedData(HasStrictTraits):
+    data = Instance(pd.DataFrame)
+
+    def _data_default(self):
+        return pd.DataFrame([
+            {'A': 5, 'B': 0, 'C': 3, 'D': 3},
+            {'A': 7, 'B': 9, 'C': 3, 'D': 5},
+            {'A': 2, 'B': 4, 'C': 7, 'D': 6}
+        ])
+
+class FramedDataView(ModelView):
+    model = Instance(FramedData)
+
+    view = View(
+        Item("model.data", editor=DataFrameEditor(editable=True))
+    )
+
+FramedDataView(model=FramedData()).edit_traits()
+```
+
+<!-- #region slideshow={"slide_type": "slide"} -->
+## Enter plotting
+- Another useful editor is the `MplFigureEditor`
+- Allows interacting with `matplotlib.figure.Figure` instances
+- Included in the `ets_tutorial` package bundled in this repository
+<!-- #endregion -->
+
+<!-- #region slideshow={"slide_type": "slide"} -->
+Example:
+<!-- #endregion -->
+```python
+from matplotlib.figure import Figure
+import numpy as np
+from skimage.data import chelsea
+from traits.api import Array, HasStrictTraits, Instance
+from traitsui.api import View, Item
+
+from ets_tutorial.util.mpl_figure_editor import MplFigureEditor
+
+class ImageViewer(HasStrictTraits):
+    data = Array()
+
+    figure = Instance(Figure)
+
+    traits_view = View(
+        Item("figure", editor=MplFigureEditor(), show_label=False)
+    )
+
+    def _data_default(self):
+        return chelsea()
+
+    def _figure_default(self):
+        figure = Figure()
+        axes = figure.add_subplot(111)
+        axes.imshow(chelsea())
+        return figure
+
+ImageViewer().edit_traits()
+```
+<!-- #region slideshow={"slide_type": "slide"} -->
+## The ModelView object:
+- We want our science model to be free of UI code
+- But it's still useful for models and views to responde to changes to one
+  another -- `ModelView`s 
+- `ModelView`s also monitor UI toolkit events like window creation,
+  closing, user clicking OK or Cancel buttons
+- Example:
+<!-- #endregion -->
+
+```python
+from traits.api import observe
+class Image(HasStrictTraits):
+    data = Array()
+
+    def _data_default(self):
+        return chelsea()
+
+class ImageView(ModelView):
+    model = Instance(Image)
 
+    figure = Instance(Figure)
+
+    view = View(
+        Item("figure", editor=MplFigureEditor(), show_label=False)
+    )
+
+    @observe("model.data")
+    def build_mpl_figure(self, event):
+        figure = Figure()
+        axes = figure.add_subplot(111)
+        axes.imshow(self.model.data)
+        self.figure = figure
+
+```
+
+```python
+image = Image()
+image_view = ImageView(model=image)
+image_view.edit_traits()
+```
+
+```python
+from skimage.data import astronaut
+image.data = astronaut()
+```
 
 <!-- #region slideshow={"slide_type": "slide"} -->
+## Exercise time!
+- Starting from where we left off in Stage 2.1:
+    - Create a `ModelView` for the `ImageFile` object that displays its filepath
+      (readonly), and the image array in a matplotlib figure
+        - Ensure figure is updated if the `filepath` attribute of `ImageFile` is
+          modified
+    - Create a `ModelView` for the `ImageFolder` object that displays the directory
+      (readonly) and the `DataFrame`
+    - Bonus points:
+        - What mechanism would we use to hide the `DataFrame` if the directory doesn't have any images
+          and instead show a helpful message? 
+        - Hint: keyword arguments for `Item`
+<!-- #endregion -->
 ## Toolkit selection
 
 - TraitsUI supports: Qt or wxPython
@@ -350,3 +515,7 @@ ETSConfig.toolkit = 'qt'
 
 
 <!-- #endregion -->
+
+```python
+
+```