more styling + impact for new dataset

web/dashboard/app.py

@@ -4,6 +4,7 @@
 import pandas as pd
 import panel as pn
 import param
+import pyarrow.dataset as ds
 import ui
 from main_dashboard import MainDashboard
 from odmantic import SyncEngine
@@ -32,7 +33,9 @@ def flatten_dict(d):
 def load_data():
     local_path = os.environ.get("LOCAL_DATA_PATH")
     if local_path is not None and Path(local_path).exists():
-        return pd.read_feather(local_path)
+        # return pd.read_feather(local_path)
+
+        return ds.dataset(local_path, format="parquet").to_table().to_pandas()
     client = MongoClient(os.environ["MONGODB_URI"])
     engine = SyncEngine(client=client, database="osm")
     matches = (
@@ -107,6 +110,8 @@ def get_template(self):
             css_files=[
                 "https://rsms.me/inter/inter.css",
                 "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap",
+                "css/global/vars.css",
+                "css/global/flat.css",
                 "css/global/intro.css",
             ],
         )
@@ -157,20 +162,19 @@ def on_load():
     pn.config.browser_info = True
     pn.config.notifications = True
     raw_data = load_data()
-    raw_data = raw_data[raw_data != 999999]
 
     # Harcoded for now, will be added to the raw data later
     raw_data["metrics"] = "RTransparent"
 
     # Cleanup - might be handlded upstream in the future
-    # raw_countries = raw_data.affiliation_country.unique()
-
     raw_data.affiliation_country = raw_data.affiliation_country.apply(
         lambda cntry: (
             tuple(set(map(str.strip, cntry.split(";")))) if cntry is not None else cntry
         )
     )
 
+    raw_data = raw_data[raw_data.year >= 2000]
+
     pn.state.cache["data"] = raw_data
 
 

web/dashboard/components/select_picker.py

@@ -59,15 +59,18 @@ def filtered_options_did_change(self):
 
     _checkbox_group_css = """
                 <style>
+
+                :host {
+                    width: 100%;
+                }
+
                 input[type="checkbox"]{
                     -webkit-appearance: initial;
                     appearance: initial;
                     width: 20px;
                     height: 20px;
                     border: 2px solid black;
                     position: relative;
-                    margin-left: 10px;
-                    margin-right: 10px;
                     background-color: var(--accent-fill-active);
 
                 }
@@ -116,7 +119,7 @@ def filtered_options_did_change(self):
 
         div.sp_header {
             background-color: var(--bs-form-control-bg);
-            border: 1px solid var(--accent-fill-rest);
+            border: 1px solid var(--border-color);
             border-radius: calc(var(--corner-radius) * 1px);
             color: var(--neutral-foreground-rest);
             font-family: var(--body-font);

web/dashboard/css/filters/textinput.css

@@ -1,8 +1,4 @@
 
-:host(.filters-text-input) {
-    --border-color: rgba(0,0,0, 0.23);
-}
-
 :host(.filters-text-input.pubdate-input) {
     width:45%;
     max-width: 45%;

web/dashboard/css/global/column.css

@@ -0,0 +1,3 @@
+.bk-panel-models-layout-Column .dashboard-column {
+    width: 100%;
+}

web/dashboard/css/global/divider.css

@@ -1,5 +1,5 @@
 :host(.default_divider) {
-  padding: 0em 1em;
+  /* padding: 0em 1em; */
 }
 
 :host(.default_divider) hr {

web/dashboard/css/global/flat.css

@@ -0,0 +1,14 @@
+div.main {
+    padding: 0px !important;
+}
+
+fast-card.pn-wrapper {
+    padding: 0px;
+    border-radius: 0px;
+    background-color:transparent;
+}
+
+div.card-margin {
+    margin: 0px !important;
+    height: 100% !important;
+}

web/dashboard/css/global/select.css

@@ -1,3 +1,15 @@
 .bk-input {
-  border-color: var(--neutral-color) !important;
+  border-color: var(--border-color) !important;
+  height: 40px !important;
+  /* background-color: coral; */
+}
+
+.bk-input-group label {
+
+  color: var(--secondary-text-color);
+  transform: translate(9px, 9px);
+  background: var(--background-color);
+  z-index: 1;
+  padding: 0 4px;
+
 }

web/dashboard/css/global/vars.css

@@ -0,0 +1,3 @@
+:root{
+    --border-color: rgba(0,0,0, 0.23);
+}

web/dashboard/main_dashboard.py

@@ -5,6 +5,7 @@
 import panel as pn
 import param
 from components.select_picker import SelectPicker
+from ui import divider
 
 pn.extension("echarts")
 
@@ -16,8 +17,8 @@
 extraction_tools_params = {
     "RTransparent": {
         "metrics": [
-            "is_data_pred",
-            "is_code_pred",
+            "is_open_data",
+            "is_open_code",
         ],
         "splitting_vars": [
             "None",
@@ -29,17 +30,17 @@
 }
 
 dims_aggregations = {
-    "is_data_pred": ["percent", "count_true"],
-    "is_code_pred": ["percent", "count_true"],
+    "is_open_data": ["percent", "count_true"],
+    "is_open_code": ["percent", "count_true"],
     # "score": ["mean"],
     # "eigenfactor_score": ["mean"],
 }
 
 metrics_titles = {
-    "percent_is_data_pred": "Data Sharing (%)",
-    "percent_is_code_pred": "Code Sharing (%)",
-    "count_true_is_data_pred": "Data Sharing",
-    "count_true_is_code_pred": "Code Sharing",
+    "percent_is_open_data": "Data Sharing (%)",
+    "percent_is_open_code": "Code Sharing (%)",
+    "count_true_is_open_data": "Data Sharing",
+    "count_true_is_open_code": "Code Sharing",
     "mean_score": "Mean Score",
     "mean_eigenfactor_score": "Mean Eigenfactor Score",
 }
@@ -82,7 +83,7 @@ class MainDashboard(param.Parameterized):
 
     # UI elements
     echarts_pane = pn.pane.ECharts(
-        {}, height=640, width=840, renderer="svg", options={"replaceMerge": ["series"]}
+        {}, height=640, width=960, renderer="svg", options={"replaceMerge": ["series"]}
     )
 
     def __init__(self, datasets, **params):
@@ -269,7 +270,7 @@ def country_filter(cell):
         return result
 
     @pn.depends(
-        "splitting_var",
+        # "splitting_var",
         "filter_pubdate",
         "metrics",
         "filter_affiliation_country",
@@ -293,6 +294,7 @@ def updated_echart_plot(self):
         xAxis = df["year"].unique().tolist()
 
         if self.splitting_var == "None":
+            title = f"{self.metrics} ({int(self.filter_pubdate[0])}-{int(self.filter_pubdate[1])})"
             series = [
                 {
                     "id": self.metrics,
@@ -305,6 +307,8 @@ def updated_echart_plot(self):
                 {"name": self.metrics, "icon": "path://M 0 0 H 20 V 20 H 0 Z"},
             ]
         else:
+            title = f"{self.metrics} by {self.splitting_var} ({int(self.filter_pubdate[0])}-{int(self.filter_pubdate[1])})"
+
             series = []
             legend_data = []
 
@@ -348,8 +352,6 @@ def updated_echart_plot(self):
                     {"name": selected_item, "icon": "path://M 0 0 H 20 V 20 H 0 Z"}
                 )
 
-        title = f"{self.metrics} by {self.splitting_var} ({int(self.filter_pubdate[0])}-{int(self.filter_pubdate[1])})"
-
         echarts_config = {
             "title": {
                 "text": title,
@@ -486,10 +488,6 @@ def get_sidebar(self):
         print("GET_SIDEBAR")
 
         items = [
-            pn.pane.Markdown("## Filters"),
-            # pn.pane.Markdown("### Applied Filters"),
-            # pn.pane.Markdown("(todo)"),
-            pn.layout.Divider(),
             pn.pane.Markdown(
                 "### Publication Details", css_classes=["filters-section-header"]
             ),
@@ -503,7 +501,7 @@ def get_sidebar(self):
                     css_classes=["years-buttons"],
                 ),
             ),
-            pn.layout.Divider(),
+            divider(),
             self.journal_select_picker,
             self.affiliation_country_select_picker,
         ]
@@ -551,13 +549,11 @@ def get_dashboard(self):
 
         # Layout the dashboard
         dashboard = pn.Column(
-            "# Data and code transparency",
-            pn.Column(
-                self.get_top_bar(),
-                self.echarts_pane,
-                # self.get_intro_block(),
-                sizing_mode="stretch_width",
-            ),
+            self.get_top_bar(),
+            divider(),
+            self.echarts_pane,
+            # self.get_intro_block(),
+            css_classes=["dashboard-column"],
         )
 
         return dashboard

web/dashboard/ui.py

@@ -45,6 +45,7 @@ def css(selector: Union[str, Iterable[str]], declarations: dict[str, str]) -> st
         pn.widgets.Select,
         pn.widgets.Button,
         pn.layout.Divider,
+        pn.Column,
     ],
     "filters": [
         pn.widgets.TextInput,