put all visual components in one file

visual_components.py

@@ -0,0 +1,60 @@
+import streamlit.components.v1 as components
+import streamlit as st
+import pandas as pd
+
+
+def create_data_input_table(datapoint, col_names):
+    st.subheader("Flagged Transaction:")
+    data = datapoint.iloc[0].tolist()
+    data[7:12] = [bool(value) for value in data[7:12]]
+    df = pd.DataFrame({"Feature name": col_names, "Value": data })
+    st.dataframe(df, hide_index=True, width=450, height=35*len(df)+38)
+
+# Create a function to generate a table
+def create_table(texts, values, title):
+    # TODO: change color dataframe header -> tried many different options but none worked see below
+    # header_style = '''s
+    # <style>
+    #     th{
+    #         background-color: #00052D;
+    #     }
+    # </style>
+    # '''
+    df = pd.DataFrame({"Feature Explanation": texts, 'Value': values})
+    # df = df.style.set_properties(**{
+    #        'selector': 'th',
+    #        'props': [
+    #            ('background-color', 'black'),
+    #            ('color', 'cyan')]
+    #    })
+    # df = df.style.set_properties(**{'background-color': 'black',
+    #                        'color': 'green'})
+
+    st.markdown(f'#### {title}')  # Markdown for styling
+    headers = {
+        'selector': 'th',
+        'props': 'background-color' '#67c5a4'#'background-color: #000066; color: white;'
+        }
+    
+    df = df.style.set_table_styles({
+            ('Feature Explanation', 'Value'): [{'selector': 'th', 'props': 'border-left: 1px solid white'},
+                                    {'selector': 'td', 'props': 'border-left: 1px solid #000066'}]
+        }, axis=0)
+    
+    # df.style.set_table_styles([headers])
+    st.dataframe(df, hide_index=True, width=450)  # Display a simple table
+    # st.markdown(header_style, unsafe_allow_html=True)
+
+def ChangeButtonColour(widget_label, font_color, background_color='transparent'):
+    htmlstr = f"""
+        <script>
+            var elements = window.parent.document.querySelectorAll('button');
+            for (var i = 0; i < elements.length; ++i) {{ 
+                if (elements[i].innerText == '{widget_label}') {{ 
+                    elements[i].style.color ='{font_color}';
+                    elements[i].style.background = '{background_color}'
+                }}
+            }}
+        </script>
+        """
+    components.html(f"{htmlstr}", height=0, width=0)