styling, all tabs, not in app

environment.yml

@@ -18,6 +18,8 @@ dependencies:
   - numpy
   - pip
   - pip:
+    # App library
     - opencv-python # This has no conda options
+    # Dev libraries
     - jupyterlab-code-formatter
     - black

glyptodon/_modidx.py

@@ -7,15 +7,23 @@
                 'lib_path': 'glyptodon'},
   'syms': { 'glyptodon.annotation': { 'glyptodon.annotation.createAnnotationFigure': ( 'annotation.html#createannotationfigure',
                                                                                        'glyptodon/annotation.py'),
+                                      'glyptodon.annotation.createAnnotationInfo': ( 'annotation.html#createannotationinfo',
+                                                                                     'glyptodon/annotation.py'),
+                                      'glyptodon.annotation.createAnnotationLayout': ( 'annotation.html#createannotationlayout',
+                                                                                       'glyptodon/annotation.py'),
                                       'glyptodon.annotation.createAnnotationTextArea': ( 'annotation.html#createannotationtextarea',
                                                                                          'glyptodon/annotation.py'),
+                                      'glyptodon.annotation.createFigureLayout': ( 'annotation.html#createfigurelayout',
+                                                                                   'glyptodon/annotation.py'),
                                       'glyptodon.annotation.createNextTab': ('annotation.html#createnexttab', 'glyptodon/annotation.py'),
                                       'glyptodon.annotation.createPageSelector': ( 'annotation.html#createpageselector',
                                                                                    'glyptodon/annotation.py'),
                                       'glyptodon.annotation.createSaveAnnotation': ( 'annotation.html#createsaveannotation',
                                                                                      'glyptodon/annotation.py'),
                                       'glyptodon.annotation.createSaveShapes': ( 'annotation.html#createsaveshapes',
-                                                                                 'glyptodon/annotation.py')},
+                                                                                 'glyptodon/annotation.py'),
+                                      'glyptodon.annotation.createTextareaLayout': ( 'annotation.html#createtextarealayout',
+                                                                                     'glyptodon/annotation.py')},
             'glyptodon.app': { 'glyptodon.app.exportManuscriptCallback': ('app.html#exportmanuscriptcallback', 'glyptodon/app.py'),
                                'glyptodon.app.finalizeSelectionCallback': ('app.html#finalizeselectioncallback', 'glyptodon/app.py'),
                                'glyptodon.app.lineNumberCallback': ('app.html#linenumbercallback', 'glyptodon/app.py'),

glyptodon/annotation.py

@@ -1,35 +1,61 @@
 # AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/04_annotation.ipynb.
 
 # %% auto 0
-__all__ = ['createAnnotationTextArea', 'createPageSelector', 'createSaveShapes', 'createSaveAnnotation', 'createNextTab',
-           'createAnnotationFigure']
+__all__ = ['createAnnotationInfo', 'createAnnotationTextArea', 'createPageSelector', 'createSaveShapes', 'createSaveAnnotation',
+           'createNextTab', 'createAnnotationFigure', 'createFigureLayout', 'createTextareaLayout',
+           'createAnnotationLayout']
 
 # %% ../nbs/04_annotation.ipynb 5
 from dash import dcc, html
+import dash_bootstrap_components as dbc
 import plotly.express as px
 import cv2
 
 # %% ../nbs/04_annotation.ipynb 7
+def createAnnotationInfo():
+    return dbc.Card(
+        dbc.CardBody(
+            [
+                html.H1("Annotation"),
+                html.P(
+                    "This page allows you to annotate a manuscript page with Lines and Boxes. "
+                    "For each line of a manuscript, draw a line through the text. "
+                    "For each word of a manuscript, draw a box around the word. "
+                    "Once you have drawn all the shapes, click the Save Shapes button. "
+                ),
+                html.Br(),
+                html.P(
+                    "After the shapes have been saved, the text editing pane on the right will allow you to transcribe the manuscript with the annotations. "
+                    "For each line you draw, numbers will appear in the text area. "
+                    "Leaving a space after each line number, write the words corresponding to that line inside the area. "
+                    "Once you have finished the transcription of a page, click the Save Transcription button. "
+                    "You can now select a different page to annotate and transcribe."
+                )
+            ]
+        )
+    )
+
+# %% ../nbs/04_annotation.ipynb 9
 def createAnnotationTextArea():
-    return dcc.Textarea(id="annotation-text-area",value="Enter transcription text here!",style={"width":"100%","height":285})
+    return dbc.Textarea(id="annotation-text-area",value="Enter transcription text here!",style={"width":"100%","height":285})
 
-# %% ../nbs/04_annotation.ipynb 10
+# %% ../nbs/04_annotation.ipynb 12
 def createPageSelector():
     return dcc.Dropdown(id="page-selector")
 
-# %% ../nbs/04_annotation.ipynb 13
+# %% ../nbs/04_annotation.ipynb 15
 def createSaveShapes():
-    return html.Button("Save Shapes", id="save-shapes")
+    return dbc.Button("Save Shapes", color="info", id="save-shapes")
 
-# %% ../nbs/04_annotation.ipynb 15
+# %% ../nbs/04_annotation.ipynb 17
 def createSaveAnnotation():
-    return html.Button("Save Annotation", id="save-annotation")
+    return dbc.Button("Save Transcription", color="info", id="save-annotation")
 
-# %% ../nbs/04_annotation.ipynb 17
+# %% ../nbs/04_annotation.ipynb 19
 def createNextTab():
-    return html.Button("Next Tab", id="next-tab")
+    return dbc.Button("Next Tab", color="primary", id="next-tab")
 
-# %% ../nbs/04_annotation.ipynb 19
+# %% ../nbs/04_annotation.ipynb 21
 def createAnnotationFigure(path):
     img = cv2.imread(path)
     # This reorders the color channels (the first two indices relate to the intensity values of individual colors while the last index indicates what
@@ -40,3 +66,48 @@ def createAnnotationFigure(path):
                   newshape=dict(line_color='grey',
                                 opacity=0.6))
     return fig
+
+# %% ../nbs/04_annotation.ipynb 25
+def createFigureLayout():
+    return dbc.Card(
+        [
+            createPageSelector(),
+            dcc.Graph(
+                id="annotation-figure",
+                config={
+                    "modeBarButtonsToAdd": [
+                        "drawline",
+                        "drawrect",
+                        "eraseshape",
+                    ]
+                },
+            ),
+            createSaveShapes(),
+        ]
+    )
+
+# %% ../nbs/04_annotation.ipynb 28
+def createTextareaLayout():
+    return dbc.Card([createAnnotationTextArea(), createSaveAnnotation()])
+
+# %% ../nbs/04_annotation.ipynb 31
+def createAnnotationLayout():
+    return html.Div(
+        [
+            createAnnotationInfo(),
+            html.Br(),
+            dbc.Card(
+                [
+                    dbc.Container(
+                        dbc.Row(
+                            children=[
+                                dbc.Col(createFigureLayout(), md=7),
+                                dbc.Col(createTextareaLayout(), md=5),
+                            ]
+                        )
+                    ),
+                    createNextTab(),
+                ]
+            ),
+        ]
+    )

glyptodon/app.py

@@ -1,7 +1,7 @@
 # AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/07_app.ipynb.
 
 # %% auto 0
-__all__ = ['selectionKey', 'manuscriptSelect', 'selectionInfo', 'finalizeSelection', 'metadata', 'inputObjects', 'centuries',
+__all__ = ['selectionKey', 'manuscriptSelect', 'selectionInfo', 'finalizeSelection', 'inputObjects', 'centuries',
            'centuriesSlider', 'uploadImages', 'uploadManuscripts', 'informationInfo', 'saveNContinue',
            'annotationTextArea', 'pageSelector', 'saveShapes', 'saveAnnotation', 'nextTab', 'exportInfo', 'exportName',
            'directoryOptions', 'exportButton', 'exportDownload', 'app', 'newManuscript', 'selectedManuscript',
@@ -29,18 +29,20 @@
 selectionInfo = createSelectionInfo()
 finalizeSelection = createFinalizeSelection()
 
+# Global Variables: selectionKey
 
 ###################
 ### INFORMATION ###
 ###################
 # the ids for objects in inputObjects are: "work", "author", "language", "country", "city", "institution"
-metadata, inputObjects = createInputObjects()
+inputObjects = createInputObjects()
 centuries, centuriesSlider = createCenturiesSlider()
 uploadImages, uploadManuscripts = createUploadObjects()
 informationInfo = createInformationInfo()
 # the id for saveNContinue is "save-and-continue"
 saveNContinue = createSaveNContinue()
 
+# Global Variables: centuries
 
 ##################
 ### ANNOTATION ###
@@ -61,7 +63,7 @@
 exportButton = createExportButton()
 exportDownload = createExportDownload()
 
-# %% ../nbs/07_app.ipynb 8
+# %% ../nbs/07_app.ipynb 9
 app = Dash(__name__)
 app.layout = html.Div(
     [
@@ -164,7 +166,7 @@
     ]
 )
 
-# %% ../nbs/07_app.ipynb 10
+# %% ../nbs/07_app.ipynb 11
 newManuscript = False
 selectedManuscript = selectionKey[
     "Stavronikita Monastery Greek handwritten document Collection no.53"
@@ -184,6 +186,7 @@
 )
 def selectManuscript(work):
     global selectedManuscript
+    global selectionKey
     if work == "Create New Manuscript":
         newManuscript = True
         selectedManuscript = None
@@ -214,7 +217,7 @@ def selectManuscript(work):
             ]
         return work, author, language, country, city, institution, centuriesValue, {"display": "none"}
 
-# %% ../nbs/07_app.ipynb 12
+# %% ../nbs/07_app.ipynb 13
 @callback(
     Output("page-selector", "options"),
     Output("page-selector", "value"),
@@ -236,7 +239,7 @@ def finalizeSelectionCallback(clicks):
 
     return dropdownOptions, dropdownOptions[0]["value"], "information"
 
-# %% ../nbs/07_app.ipynb 14
+# %% ../nbs/07_app.ipynb 15
 @callback(
     Output("annotation-figure", "figure"),
     Input("page-selector", "value"),
@@ -291,7 +294,7 @@ def pageSelectorCallback(path):
 
     return fig
 
-# %% ../nbs/07_app.ipynb 16
+# %% ../nbs/07_app.ipynb 17
 @callback(
     Output("dummy-output","children", allow_duplicate=True),
     Input("save-shapes", "n_clicks"),
@@ -357,7 +360,7 @@ def saveShapesCallback(clicks, shapes, path):
     dummy = ["1","2","3"]
     return dummy
 
-# %% ../nbs/07_app.ipynb 18
+# %% ../nbs/07_app.ipynb 19
 @callback(
     Output("annotation-text-area","value"),
     Input("annotation-figure", "relayoutData"),
@@ -392,7 +395,7 @@ def lineNumberCallback(shapes, currentText):
 
     return newValue
 
-# %% ../nbs/07_app.ipynb 20
+# %% ../nbs/07_app.ipynb 21
 @callback(
     Output("dummy-output", "children", allow_duplicate=True),
     Input("save-annotation", "n_clicks"),
@@ -474,7 +477,7 @@ def saveAnnotationCallback(clicks, shapes, path, currentText):
     dummy = ["1", "2", "3"]
     return dummy
 
-# %% ../nbs/07_app.ipynb 22
+# %% ../nbs/07_app.ipynb 23
 @callback(
     Output("tabs-object", "value", allow_duplicate=True),
     Input("save-and-continue", "n_clicks"),
@@ -511,6 +514,7 @@ def saveNContinuteCallback(
     manSelect, # State manuscript-select
 ):
     global selectedManuscript
+    global centuries
     centuriesData = ""
     if centuriesValue[0] == centuriesValue[1]:
         centuriesData = centuries[centuriesValue[0]] + " Century"
@@ -540,7 +544,7 @@ def saveNContinuteCallback(
 
     return "annotation"
 
-# %% ../nbs/07_app.ipynb 24
+# %% ../nbs/07_app.ipynb 25
 @callback(
     Output("tabs-object", "value", allow_duplicate=True),
     Input("next-tab", "n_clicks"),
@@ -549,7 +553,7 @@ def saveNContinuteCallback(
 def nextTabCallback(clicks):
     return "export"
 
-# %% ../nbs/07_app.ipynb 26
+# %% ../nbs/07_app.ipynb 27
 @callback(
     Output("export-download", "data"),
     Input("export-button", "n_clicks"),
@@ -562,6 +566,6 @@ def exportManuscriptCallback(clicks, name, options):
     path = zipManuscript(options, selectedManuscript[0], name)
     return dcc.send_file(path)
 
-# %% ../nbs/07_app.ipynb 28
+# %% ../nbs/07_app.ipynb 29
 if __name__ == "__main__":
     app.run(debug=True)