Add Share Link

app/backend/constant.py

@@ -81,3 +81,9 @@ LEADERBOARD_ICON_MAP = {
     "French": "🇫🇷",
 
 }
+
+
+USERNAME = "embedding-benchmark"
+SPACENAME = "ebr"
+# https://{UserName}-{SpaceName}.hf.space/
+BASE_URL = f"https://{USERNAME}-{SPACENAME}.hf.space/"

app/backend/data_engine.py

@@ -20,7 +20,7 @@ COLUMNS_TYPES = ["markdown",
 
                  ]
 
-GIT_URL = "https://raw.githubusercontent.com/embedding-benchmark/ebr/refs/heads/main/results/"
+GIT_URL = "https://raw.githubusercontent.com/embedding-benchmark/rteb/refs/heads/main/results/"
 DATASET_URL = f"{GIT_URL}datasets.json"
 MODEL_URL = f"{GIT_URL}models.json"
 RESULT_URL = f"{GIT_URL}results.json"

app/backend/data_page.py

@@ -6,11 +6,13 @@
 import io
 
 from st_aggrid import AgGrid, JsCode, ColumnsAutoSizeMode
-
 import streamlit as st
+from utils.st_copy_to_clipboard import st_copy_to_clipboard
+from streamlit_theme import st_theme
 
 from app.backend.app_init_func import LEADERBOARD_MAP
-from app.backend.constant import LEADERBOARD_ICON_MAP
+from app.backend.constant import LEADERBOARD_ICON_MAP, BASE_URL
+from app.backend.json_util import compress_msgpack, decompress_msgpack
 
 COLUMNS = ['model_name',
            'embd_dtype', 'embd_dim', 'num_params', 'max_tokens', 'similarity',
@@ -46,7 +48,22 @@ def convert_df_to_csv(df):
     return output.getvalue()
 
 
+def get_column_state():
+    """
+    get column state from url
+    """
+    query_params = st.query_params.get("grid_state", None)
+    if query_params:
+        grid_state = decompress_msgpack(query_params)
+        st.session_state.grid_state = grid_state
+        return True
+    return None
+
+
 def render_page(group_name):
+    grid_state = st.session_state.get("grid_state", {})
+    get_column_state()
+
     # Add theme color and grid styles
     st.title("Retrieval Embedding Benchmark (RTEB)")
     st.markdown("""
@@ -109,7 +126,14 @@ def render_page(group_name):
                 float: right;
     
             }
+            /* Toast On The Top*/
+            div[data-testid="stToastContainer"] {
+                position: fixed !important;
+                z-index: 2147483647 !important;
+            }
+                        
         </style>
+        
     """, unsafe_allow_html=True)
 
     #  logo
@@ -252,6 +276,7 @@ def render_page(group_name):
                 'headerName': 'Number of Parameters',
                 'field': 'num_params',
                 'cellDataType': 'number',
+                "colId": "num_params",
                 'headerStyle': HEADER_STYLE,
                 'cellStyle': CELL_STYLE,
                 'valueFormatter': JsCode(
@@ -263,6 +288,7 @@ def render_page(group_name):
                     return num;
                     }"""
                 ),
+                "width": 120,
                 # 'suppressSizeToFit': True,
             },
             {
@@ -277,6 +303,8 @@ def render_page(group_name):
                'field': column,
                'headerStyle': HEADER_STYLE,
                'cellStyle': CELL_STYLE,
+               "headerTooltip": column if "Average" not in column else column.replace("Average",
+                                                                                      "").strip().capitalize()
                # 'suppressSizeToFit': True
                } for column in column_list if
               column not in (avg_column, "Closed average", "Open average")]
@@ -286,18 +314,20 @@ def render_page(group_name):
             'sortable': True,
             'resizable': True,
             'headerClass': "multi-line-header",
-            'autoHeaderHeight': True
+            'autoHeaderHeight': True,
+            'width': 105
         },
+
         "autoSizeStrategy": {
-            "type": 'fitGridWidth',
-            "defaultMinWidth": 105,
+            "type": 'fitCellContents',
+            "colIds": [column for column in column_list if column not in (avg_column, "Closed average", "Open average")]
         },
         "tooltipShowDelay": 500,
-
+        "initialState": grid_state,
     }
 
     custom_css = {
-
+        # Model Name Cell
         ".a-cell": {
             "display": "inline-block",
             "white-space": "nowrap",
@@ -306,22 +336,65 @@ def render_page(group_name):
             "width": "100%",
             "min-width": "0"
         },
-
+        # Header
         ".multi-line-header": {
             "text-overflow": "clip",
             "overflow": "visible",
             "white-space": "normal",
             "height": "auto",
+            "font-family": 'Arial',
+            "font-size": "14px",
+            "font-weight": "bold",
+            "padding": "10px",
+            "text-align": "left",
+        }
+        ,
+        # Filter Options and Input
+        ".ag-theme-streamlit .ag-popup": {
+            "font-family": 'Arial',
+            "font-size": "14px",
+
+        }
+        , ".ag-picker-field-display": {
+            "font-family": 'Arial',
+            "font-size": "14px",
+
+        },
+        ".ag-input-field-input .ag-text-field-input": {
+            "font-family": 'Arial',
+            "font-size": "14px",
+
         }
 
     }
 
-    AgGrid(
+    grid = AgGrid(
         df,
         enable_enterprise_modules=False,
         gridOptions=grid_options,
         allow_unsafe_jscode=True,
-        columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS,
+        columns_auto_size_mode=ColumnsAutoSizeMode.FIT_ALL_COLUMNS_TO_VIEW,
         theme="streamlit",
-        custom_css=custom_css
+        custom_css=custom_css,
+        update_on=["stateUpdated"],
     )
+
+    @st.dialog("URL")
+    def share_url():
+        state = grid.grid_state
+        if state:
+            share_link = f'{BASE_URL.replace("_", "-")}{group_name}/?grid_state={compress_msgpack(state)}'
+        else:
+            share_link = f'{BASE_URL.replace("_", "-")}{group_name}'
+        st.write(share_link)
+        theme = st_theme()
+        if theme:
+            theme = theme.get("base")
+        else:
+            theme = "light"
+        st_copy_to_clipboard(share_link, before_copy_label='📋Push to copy', after_copy_label='✅Text copied!',theme=theme)
+
+    share_btn = st.button("Share this page", icon=":material/share:")
+
+    if share_btn:
+        share_url()

app/backend/json_util.py

@@ -0,0 +1,15 @@
+import msgpack
+import gzip
+import base64
+
+
+def compress_msgpack(data):
+    packed = msgpack.packb(data)
+    compressed = gzip.compress(packed)
+    return base64.urlsafe_b64encode(compressed).decode('utf-8')
+
+
+def decompress_msgpack(compressed_str):
+    compressed = base64.urlsafe_b64decode(compressed_str)
+    unpacked = gzip.decompress(compressed)
+    return msgpack.unpackb(unpacked, raw=False)

app/ui/pages/english.py

@@ -0,0 +1,3 @@
+from app.backend.data_page import render_page
+
+render_page("english")

app/ui/pages/french.py

@@ -0,0 +1,3 @@
+from app.backend.data_page import render_page
+
+render_page("french")

app/ui/pages/legal.py

@@ -0,0 +1,3 @@
+from app.backend.data_page import render_page
+
+render_page("legal")

requirements.txt

@@ -1,3 +1,6 @@
 streamlit==1.41.1
 streamlit-aggrid==1.0.5
 st-pages==1.0.1
+msgpack==1.1.0
+zstandard==0.23.0
+st-theme==1.2.3

utils/st_copy_to_clipboard/__init__.py

@@ -0,0 +1,66 @@
+from pathlib import Path
+from typing import Optional
+
+import streamlit as st
+import streamlit.components.v1 as components
+
+# Tell streamlit that there is a component called streamlit_copy_to_clipboard,
+# and that the code to display that component is in the "frontend" folder
+frontend_dir = (Path(__file__).parent / "frontend").absolute()
+_component_func = components.declare_component(
+    "streamlit_copy_to_clipboard", path=str(frontend_dir)
+)
+
+
+def st_copy_to_clipboard(
+    text: str,
+    before_copy_label: str = "📋",
+    after_copy_label: str = "✅",
+    show_text: bool = False,
+    key: Optional[str] = None,
+    theme: str = 'light', # default theme is 'light'
+    
+):
+    """
+    Streamlit component to copy text to clipboard.
+
+    Parameters
+    ----------
+    text : str
+        The text to be copied to the clipboard.
+    before_copy_label : str
+        Label of the button before text is copied.
+    after_copy_label : str
+        Label of the button after text is copied.
+    show_text: bool
+        If True, show text right before the button and make it clickable as well
+    key : str or None
+        An optional key that uniquely identifies the component.
+    theme: str
+        Set the current theme for the button.
+    """
+    component_value = _component_func(
+        key=key,
+        text=text,
+        before_copy_label=before_copy_label,
+        after_copy_label=after_copy_label,
+        show_text=show_text,
+        theme=theme,
+    )
+
+    return component_value
+
+
+def main():
+    st.write("## Example")
+    text = st.text_input("Enter text to copy to clipboard", value="Hello World")
+    st_copy_to_clipboard(text)
+    st_copy_to_clipboard(text, before_copy_label='📋Push to copy', after_copy_label='✅Text copied!')
+    st_copy_to_clipboard(text, before_copy_label='Push to copy', after_copy_label='Text copied!', show_text=True)
+    st_copy_to_clipboard(text, before_copy_label='Push to copy', after_copy_label='copied!', show_text=True, theme="dark")
+
+
+
+
+if __name__ == "__main__":
+    main()

utils/st_copy_to_clipboard/frontend/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>st-copy-to-clipboard</title>
+		<script src="./streamlit-component-lib.js"></script>
+		<script src="./main.js"></script>
+		<link rel="stylesheet" href="./style.css" />
+	</head>
+
+	<body>
+		<div id="root">
+			<button id="text-element" class="st-copy-to-clipboard-btn"></button>
+			<button id="copy-button" class="st-copy-to-clipboard-btn">📋</button>
+		</div>
+	</body>
+</html>

utils/st_copy_to_clipboard/frontend/main.js

@@ -0,0 +1,61 @@
+// The `Streamlit` object exists because our html file includes
+// `streamlit-component-lib.js`.
+// If you get an error about "Streamlit" not being defined, that
+// means you're missing that file.
+
+function sendValue(value) {
+	Streamlit.setComponentValue(value);
+}
+
+/**
+ * The component's render function. This will be called immediately after
+ * the component is initially loaded, and then again every time the
+ * component gets new data from Python.
+ */
+function onRender(event) {
+	// Only run the render code the first time the component is loaded.
+	if (!window.rendered) {
+		const { text, before_copy_label, after_copy_label, show_text, theme } = event.detail.args;
+
+		const container = document.querySelector('#container');
+		const button = document.querySelector('#copy-button');
+		const textElement = document.querySelector('#text-element');
+
+		if (theme == 'dark') {
+			button.style.border = '1px solid rgba(250, 250, 250, 0.2)';
+			button.style.color = 'white';
+		}
+
+		button.textContent = before_copy_label; // Set initial label
+
+		// Show text if show_text is true
+		if (show_text) {
+			textElement.textContent = text;
+			textElement.style.display = 'inline';
+		} else {
+			textElement.style.display = 'none';
+		}
+
+		function copyToClipboard() {
+			navigator.clipboard.writeText(text);
+
+			button.textContent = after_copy_label; // Change label after copying
+
+			setTimeout(() => {
+				if (!button) return;
+				button.textContent = before_copy_label; // Revert to original label after 1 second
+			}, 1000);
+		}
+		button.addEventListener('click', copyToClipboard);
+		textElement.addEventListener('click', copyToClipboard);
+
+		window.rendered = true;
+	}
+}
+
+// Render the component whenever python send a "render event"
+Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender);
+// Tell Streamlit that the component is ready to receive events
+Streamlit.setComponentReady();
+// Render with the correct height, if this is a fixed-height component
+Streamlit.setFrameHeight(100);

utils/st_copy_to_clipboard/frontend/streamlit-component-lib.js

@@ -0,0 +1,36 @@
+// Borrowed minimalistic Streamlit API from Thiago
+// https://discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064
+function sendMessageToStreamlitClient(type, data) {
+	console.log(type, data);
+	const outData = Object.assign(
+		{
+			isStreamlitMessage: true,
+			type: type,
+		},
+		data
+	);
+	window.parent.postMessage(outData, '*');
+}
+
+const Streamlit = {
+	setComponentReady: function () {
+		sendMessageToStreamlitClient('streamlit:componentReady', { apiVersion: 1 });
+	},
+	setFrameHeight: function (height) {
+		sendMessageToStreamlitClient('streamlit:setFrameHeight', { height: height });
+	},
+	setComponentValue: function (value) {
+		sendMessageToStreamlitClient('streamlit:setComponentValue', { value: value });
+	},
+	RENDER_EVENT: 'streamlit:render',
+	events: {
+		addEventListener: function (type, callback) {
+			window.addEventListener('message', function (event) {
+				if (event.data.type === type) {
+					event.detail = event.data;
+					callback(event);
+				}
+			});
+		},
+	},
+};

utils/st_copy_to_clipboard/frontend/style.css

@@ -0,0 +1,31 @@
+.st-copy-to-clipboard-btn {
+	display: inline-flex;
+	-moz-box-align: center;
+	align-items: center;
+	-moz-box-pack: center;
+	justify-content: center;
+	font-weight: 400;
+	padding: 0.25rem 0.75rem;
+	border-radius: 0.5rem;
+	min-height: 38.4px;
+	margin: 0px;
+	line-height: 1.6;
+	color: inherit;
+	width: auto;
+	user-select: none;
+	background-color: transparent; /* set bgcolor to transparent to adjust to any theme */
+	border: 1px solid rgba(49, 51, 63, 0.2);
+	cursor: pointer;
+	float: right;
+}
+
+.st-copy-to-clipboard-btn:hover {
+	border-color: rgb(255, 75, 75);
+	color: rgb(255, 75, 75);
+}
+
+.st-copy-to-clipboard-btn:active {
+	border-color: rgb(255, 75, 75);
+	background-color: rgb(255, 75, 75);
+	color: rgb(255, 255, 255);
+}