gen5.py

import sys
import pandas as pd
import urllib.parse
import plotly.graph_objects as go
from plotly.subplots import make_subplots

# Usage Check
if len(sys.argv) < 3:
    print("Usage: python generate_plot.py <input_csv> <output_html>")
    sys.exit(1)

input_csv = sys.argv[1]
output_html = sys.argv[2]

# 1. Load and Process Data
try:
    df = pd.read_csv(input_csv)
    # Cleanup typical Excel-to-CSV artifacts
    cols_to_drop = [c for c in df.columns if 'Unnamed' in c]
    if cols_to_drop:
        df = df.drop(columns=cols_to_drop)
    
    #df = df.sort_values(by='citations', ascending=False)
    # Create Short Title for Axis
    df['Title_Short'] = df['Title'].apply(lambda x: str(x)[:40] + '...' if len(str(x)) > 40 else str(x))
    # Generate Google Scholar URLs
    df['Scholar_URL'] = df['Title'].apply(lambda x: f"https://scholar.google.com/scholar?q={urllib.parse.quote(str(x))}")

except Exception as e:
    print(f"Error processing data: {e}")
    sys.exit(1)

# 2. Create Figure
fig = make_subplots(specs=[[{"secondary_y": True}]])

# Add Bar Trace (Citations)
fig.add_trace(
    go.Bar(
        x=df['Title_Short'],
        y=df['citations'],
        name="Citations",
        marker_color='rgb(55, 83, 109)',
        # Store full data in customdata for hover and click events
        customdata=df[['Title', '% of total', 'Cummulative', 'Scholar_URL']],
        hovertemplate="<b>%{customdata[0]}</b><br>" +
                      "Citations: %{y}<br>" +
                      "% of Total: %{customdata[1]:.2%}<br>" +
                      "<i>Click bar to search</i><extra></extra>"
    ),
    secondary_y=False,
)

# Add Line Trace (Cumulative Percentage)
fig.add_trace(
    go.Scatter(
        x=df['Title_Short'],
        y=df['Cummulative'],
        name="Cumulative %",
        marker_color='rgb(26, 118, 255)',
        mode='lines+markers',
        customdata=df[['Title']],
        hovertemplate="<b>%{customdata[0]}</b><br>Cumulative: %{y:.2%}<extra></extra>"
    ),
    secondary_y=True,
)

# 3. Define Buttons for Log/Linear Toggle (Chart Control)
updatemenus = [
    dict(
        type="buttons",
        direction="left",
        buttons=list([
            dict(
                args=[{"yaxis.type": "linear"}],
                label="Linear Scale",
                method="relayout"
            ),
            dict(
                args=[{"yaxis.type": "log"}],
                label="Log Scale",
                method="relayout"
            )
        ]),
        pad={"r": 10, "t": 10},
        showactive=True,
        x=0.0,
        xanchor="left",
        y=1.15,
        yanchor="top"
    ),
]

# 4. Layout Configuration
fig.update_layout(
    title_text="Citation Counts and Cumulative Distribution",
    xaxis_title="Paper Title",
    hovermode="closest",
    legend=dict(x=0.7, y=0.9),
    margin=dict(b=150, t=120),
    updatemenus=updatemenus,
    height=700 # Explicitly set height to prevent squishing
)

fig.update_xaxes(tickangle=45)
fig.update_yaxes(title_text="<b>Citation Count</b>", secondary_y=False, type="log")
fig.update_yaxes(title_text="<b>Cumulative %</b>", secondary_y=True, tickformat='.0%', showgrid=False)

# 5. Generate HTML Components
plot_html = fig.to_html(full_html=False, include_plotlyjs='cdn')

# Generate the List HTML
list_items = []
for index, row in df.iterrows():
    item = f'<li><a href="{row["Scholar_URL"]}" target="_blank" style="text-decoration: none; color: #3366cc;">{row["Title"]}</a> - <b>{row["citations"]}</b> citations</li>'
    list_items.append(item)

list_html = f"""
<div id="paper-list-container" style="display: block; font-family: Arial, sans-serif; margin: 20px;">
    <h3>Paper List (Sorted by Citations)</h3>
    <ul>
        {''.join(list_items)}
    </ul>
</div>
"""

# Toggle Button HTML
toggle_button_html = """
<div style="margin: 20px; font-family: Arial, sans-serif;">
    <button id="toggle-btn" onclick="toggleList()" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">Hide Paper List</button>
</div>
"""

# Custom JavaScript
custom_js = """
<script>
    // 1. Toggle List Function
    function toggleList() {
        var x = document.getElementById("paper-list-container");
        var btn = document.getElementById("toggle-btn");
        if (x.style.display === "none") {
            x.style.display = "block";
            btn.innerText = "Hide Paper List";
        } else {
            x.style.display = "none";
            btn.innerText = "Show Paper List";
        }
    }

    // 2. Plotly Bar Click Interaction
    // We use an interval to ensure the plot div is fully loaded before attaching the event
    var checkPlot = setInterval(function(){
        var plotElement = document.getElementsByClassName('plotly-graph-div')[0];
        if (plotElement) {
            clearInterval(checkPlot);
            plotElement.on('plotly_click', function(data){
                if(data.points.length > 0){
                    var point = data.points[0];
                    var url = null;
                    if(point.data.type === 'bar') {
                         url = point.customdata[3];
                    }
                    if(url && url.startsWith('http')){
                        window.open(url, '_blank');
                    }
                }
            });
        }
    }, 500);
</script>
"""

# 6. Assemble Final HTML
full_html_content = f"""
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Citation Visualization</title>
    <style>
        body {{ margin: 0; padding: 0; font-family: Arial, sans-serif; }}
    </style>
</head>
<body>
    <div style="width: 95%; margin: auto; min-height: 700px;">
        {plot_html}
    </div>
    
    <hr>
    
    {toggle_button_html}
    
    {list_html}
    
    {custom_js}
</body>
</html>
"""

# 7. Write to file
try:
    with open(output_html, 'w', encoding='utf-8') as f:
        f.write(full_html_content)
    print(f"Successfully created: {output_html}")
except Exception as e:
    print(f"Error writing file: {e}")