Update app.py

app.py

@@ -8,17 +8,20 @@ import pandas as pd
 import streamlit as st
 from huggingface_hub import HfFileSystem
 
+import streamlit.components.v1 as components
 
 @dataclass
 class Field:
     type: str
     title: str
     name: str = None
+    mandatory: bool = True
+    # if value of field is in the list of those values, makes following siblings mandatory
+    following_mandatory_values: list = False
     help: Optional[str] = None
     children: Optional[List['Field']] = None
     other_params: Optional[Dict[str, object]] = field(default_factory=lambda: {})
 
-
 # Function to get user ID from URL
 def get_user_id_from_url():
     user_id = st.query_params.get("user_id", "")
@@ -27,6 +30,10 @@ def get_user_id_from_url():
 HF_TOKEN = os.environ.get("HF_TOKEN_WRITE")
 print("is none?", HF_TOKEN is None)
 hf_fs = HfFileSystem(token=HF_TOKEN)
+
+########################################################################################
+# CHANGE THE FOLLOWING VARIABLES ACCORDING TO YOUR NEEDS
+
 input_repo_path = 'datasets/emvecchi/annotate-pilot'
 output_repo_path = 'datasets/emvecchi/annotate-pilot'
 to_annotate_file_name = 'to_annotate.csv'  # CSV file to annotate
@@ -178,7 +185,9 @@ INPUT_FIELD_DEFAULT_VALUES = {'slider': 0,
                               'select_slider': 0,
                               'multiselect': None}
 SHOW_HELP_ICON = False
+SHOW_VALIDATION_ERROR_MESSAGE = True
 
+########################################################################################
 def read_data(_path):
     with hf_fs.open(input_repo_path + '/' + _path) as f:
         return pd.read_csv(f)
@@ -216,13 +225,42 @@ def display_image(image_path):
 # Function to navigate rows
 def navigate(index_change):
     st.session_state.current_index += index_change
-    print(st.session_state.current_index)
+    # only works consistently if done before rerun
+    js = '''
+    <script>
+        var body = window.parent.document.querySelector(".main");
+        
+        body.scrollTop = 0;
+        window.scrollY = 0;
+    </script>
+    '''
+    st.components.v1.html(js, height=0)
     # https://discuss.streamlit.io/t/click-twice-on-button-for-changing-state/45633/2
+
+    # disable text input enter to submit
+    # https://discuss.streamlit.io/t/text-input-how-to-disable-press-enter-to-apply/14457/6
+    components.html(
+        """
+        <script>
+        const inputs = window.parent.document.querySelectorAll('input');
+        inputs.forEach(input => {
+            input.addEventListener('keydown', function(event) {
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                }
+            });
+        });
+        </script>
+        """,
+        height=0
+    )
+
     st.rerun()
 
 
 def show_field(f: Field, index: int, data_collected):
     if f.type not in INPUT_FIELD_DEFAULT_VALUES.keys():
+        st.session_state.following_mandatory = False
         match f.type:
             case 'input_col':
                 st.write(f.title)
@@ -244,82 +282,111 @@ def show_field(f: Field, index: int, data_collected):
                         show_field(child, index, data_collected)
     else:
         key = f.name + str(index)
-        value = st.session_state.default_values[f.name] = data_collected[f.name] if data_collected else \
-            INPUT_FIELD_DEFAULT_VALUES[f.type]
+        st.session_state.data_inputs_keys.append(f.name)
+        value = st.session_state[key] if key in st.session_state else \
+            (data_collected[f.name] if data_collected else INPUT_FIELD_DEFAULT_VALUES[f.type])
         if not SHOW_HELP_ICON:
             f.title = f'**{f.title}**\n\n{f.help}' if f.help else f.title
-            f.help = None
+
+        validation_error = False
+        if f.mandatory or st.session_state.following_mandatory:
+            # form is not displayed for first time
+            if st.session_state.form_displayed == st.session_state.current_index:
+                if st.session_state[key] == INPUT_FIELD_DEFAULT_VALUES[f.type]:
+                    st.session_state.valid = False
+                    validation_error = True
+                elif f.following_mandatory_values and st.session_state[key] in f.following_mandatory_values:
+                    st.session_state.following_mandatory = True
+            f.title += " :red[* required!]" if (validation_error and not SHOW_VALIDATION_ERROR_MESSAGE) else' :red[*]'
+        f.help = None
+
         match f.type:
             case 'checkbox':
-                st.session_state.data_inputs[f.name] = st.checkbox(f.title,
-                                                                   key=key,
-                                                                   value=value, help=f.help)
+                st.checkbox(f.title,
+                            key=key,
+                            value=value, help=f.help)
             case 'radio':
-                st.session_state.data_inputs[f.name] = st.radio(f.title,
-                                                                 ["not selected","yes","no","other"],
-                                                                 key=key,
-                                                                 help=f.help)
+                st.radio((f.title,
+                            ["not selected","yes","no","other"],
+                            key=key,
+                            help=f.help)
             case 'slider':
-                st.session_state.data_inputs[f.name] = st.slider(f.title,
-                                                                 min_value=0, max_value=6, step=1,
-                                                                 key=key,
-                                                                 value=value, help=f.help)
+                st.slider(f.title,
+                          min_value=0, max_value=6, step=1,
+                          key=key,
+                          value=value, help=f.help)
             case 'select_slider':
                 labels = default_labels if not f.other_params.get('labels') else f.other_params.get('labels')
-                st.session_state.data_inputs[f.name] = st.select_slider(f.title,
-                                                                        options=[0, 20, 40, 60, 80, 100],
-                                                                        format_func=lambda x: labels[x // 20],
-                                                                        key=key,
-                                                                        value=value, help=f.help)
+                st.select_slider(f.title,
+                                 options=[0, 20, 40, 60, 80, 100],
+                                 format_func=lambda x: labels[x // 20],
+                                 key=key,
+                                 value=value, help=f.help)
             case 'multiselect':
                 choices = default_choices if not f.other_params.get('choices') else f.other_params.get('choices')
-                st.session_state.data_inputs[f.name] = st.multiselect(f.title,
-                                                                options = choices,
-                                                                key=key, max_selections=3,
-                                                                help=f.help)
+                st.multiselect(f.title,
+                                options = choices,
+                                key=key, max_selections=3,
+                                help=f.help)
+            case 'likert_radio':
+                labels = default_labels if not f.other_params.get('labels') else f.other_params.get('labels')
+                st.radio(f.title,
+                         options=[0, 1, 2, 3, 4],
+                         format_func=lambda x: labels[x],
+                         key=key,
+                         index=value, help=f.help, horizontal=True)
             case 'text':
-                st.session_state.data_inputs[f.name] = st.text_input(f.title, key=key, value=value)
+                st.text_input(f.title, key=key, value=value)
             case 'textarea':
-                st.session_state.data_inputs[f.name] = st.text_area(f.title, key=key, value=value)
+                st.text_area(f.title, key=key, value=value)
 
+        if validation_error:
+            st.error(f"Mandatory field")
 
 
 def show_fields(fields: List[Field]):
+    st.session_state.valid = True
     index = st.session_state.current_index
     data_collected = read_saved_data()
-    st.session_state.default_values = {}
-    st.session_state.data_inputs = {}
+    st.session_state.data_inputs_keys = []
+    st.session_state.following_mandatory = False
 
     for field in fields:
         show_field(field, index, data_collected)
 
     submitted = st.form_submit_button("Submit")
     if submitted:
-        with st.spinner(text="saving"):
-            save_data({
-                'user_id': st.session_state.user_id,
-                'index': st.session_state.current_index,
-                **(st.session_state.data.iloc[index][COLS_TO_SAVE].to_dict() if index >= 0 else {}),
-                **st.session_state.data_inputs
-            })
-        st.success("Feedback submitted successfully!")
-        navigate(1)
+        if not st.session_state.valid:
+            st.error("Please fill in all mandatory fields")
+            # st.rerun() # filed-out values are not shown otherwise
+        else:
+            with st.spinner(text="saving"):
+                save_data({
+                    'user_id': st.session_state.user_id,
+                    'index': st.session_state.current_index,
+                    **(st.session_state.data.iloc[index][COLS_TO_SAVE].to_dict() if index >= 0 else {}),
+                    **{k: st.session_state[k+str(index)] for k in st.session_state.data_inputs_keys}
+                })
+            st.success("Feedback submitted successfully!")
+            navigate(1)
+
+    st.session_state.form_displayed = st.session_state.current_index
+
 
 st.set_page_config(layout='wide')
 # Title of the app
 st.title("Moderator Intervention Prediction")
 
+
 st.markdown(
     """<style>
 div[data-testid="stMarkdownContainer"] > p {
     font-size: 1rem;
 }
+    section.main > div {max-width:60rem}
     </style>
     """, unsafe_allow_html=True)
 
-#with st.expander(label="Annotation Guidelines", expanded=False):
-#    st.write('some guidelines here')
-
 # Load the data to annotate
 if 'data' not in st.session_state:
     st.session_state.data = read_data(to_annotate_file_name)
@@ -327,26 +394,27 @@ if 'data' not in st.session_state:
 # Initialize the current index
 if 'current_index' not in st.session_state:
     st.session_state.current_index = -3
+    st.session_state.form_displayed = -3
+
 
 def add_validated_submit(fields, message):
+    st.session_state.form_displayed = st.session_state.current_index
     if st.form_submit_button("Submit"):
         if all(not x for x in fields):
             st.error(message)
         else:
             navigate(1)
 
-
 def add_checked_submit():
     check = st.checkbox('I agree', key='consent')
     add_validated_submit([check], "Please agree to give your consent to proceed")
 
 
 def add_annotation_guidelines():
+    st.write(f"username is {st.session_state.user_id}")
     st.markdown(
-        "<details open><summary>Annotation Guidelines</summary>"+guidelines_text+"</details>"
+        "<details open><summary>Annotation Guidelines</summary>" + guidelines_text + "</details>"
         , unsafe_allow_html=True)
-    st.write(f"username is {st.session_state.user_id}")
-
 if st.session_state.current_index == -3:
     with st.form("data_form"):
         st.markdown(consent_text)
@@ -362,49 +430,26 @@ elif st.session_state.current_index == -2:
             st.session_state.user_id = st.text_input('User ID', value=user_id_from_url)
             add_validated_submit([st.session_state.user_id], "Please enter a valid user ID")
 
-
 elif st.session_state.current_index == -1:
     add_annotation_guidelines()
-    with st.form("data_form"):
+    with st.form("intro_form"):
         show_fields(intro_fields)
 
 elif st.session_state.current_index < len(st.session_state.data):
     add_annotation_guidelines()
-    with st.form("data_form"):
+    with st.form("data_form"+str(st.session_state.current_index)):
         show_fields(fields)
 
 else:
-    st.write(f"Thank you for taking part in this study! Code to finish the study: {study_code}")
-
+    st.write(f"Thank you for taking part in this study! [Click here]({redirect_url}) to complete the study.")
 
 # Navigation buttons
 if st.session_state.current_index > 0:
     if st.button("Previous"):
-        with st.spinner(text="in progress"):
-            navigate(-1)
+        navigate(-1)
 if 0 <= st.session_state.current_index < len(st.session_state.data):
     st.write(f"Page {st.session_state.current_index + 1} out of {len(st.session_state.data)}")
 
-
-# disable text input enter to submit
-# https://discuss.streamlit.io/t/text-input-how-to-disable-press-enter-to-apply/14457/6
-import streamlit.components.v1 as components
-
-components.html(
-    """
-    <script>
-    const inputs = window.parent.document.querySelectorAll('input');
-    inputs.forEach(input => {
-        input.addEventListener('keydown', function(event) {
-            if (event.key === 'Enter') {
-                event.preventDefault();
-            }
-        });
-    });
-    </script>
-    """,
-    height=0
-)
 st.markdown(
     """<style>
     div[data-testid="InputInstructions"] {
@@ -412,4 +457,3 @@ st.markdown(
     }
     </style>""", unsafe_allow_html=True
 )
-