File size: 4,520 Bytes
5710db8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import gradio as gr
import pandas as pd
import json
import random

# Parameters for value checking
parameters = {
    "speed": 50, 
    "speed_uncertainty": 4,
    "flow": 10.4,
    "flow_uncertainty": 0.2,
    "env_temperature": 35,
    "sup_temperature": 50,
    "gap": 0.1,
}

def check_value(parameter, value, parameters):
    if parameter == "Velocity":
        return parameters["speed"] - parameters["speed_uncertainty"] <= value <= parameters["speed"] + parameters["speed_uncertainty"]
    elif parameter == "Flow":
        return parameters["flow"] - parameters["flow_uncertainty"] <= value <= parameters["flow"] + parameters["flow_uncertainty"]
    elif parameter == "Env. Temperature":
        return value < parameters["env_temperature"]
    elif parameter == "Sup. Temperature":
        return value < parameters["sup_temperature"]
    elif parameter == "Gap":
        return value < parameters["gap"]
    return None

def generate_table_html(df, parameters):
    # Build CSS and table
    html = """
    <style>
    table.custom-table {
        width: 100%;
        border-collapse: collapse;
    }
    table.custom-table th, table.custom-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
    }
    button.action-btn {
        padding: 5px 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
    }
    </style>
    """
    html += '<table class="custom-table">\n'
    html += "  <tr>\n"
    for col in df.columns:
        html += f"    <th>{col}</th>\n"
    html += "    <th>Details</th>\n"
    html += "  </tr>\n"
    
    for _, row in df.iterrows():
        row_data = row.to_dict()
        row_data_json = json.dumps(row_data)
        html += "  <tr>\n"
        for col in df.columns:
            value = row[col]
            color = check_value(col, value, parameters)
            style = f' style="color: {"#00C005" if color else "#DE0000"};"' if color is not None else ""
            html += f'    <td{style}>{value}</td>\n'
        # When the button is clicked, call sendToPython with the row's JSON data.
        html += f'    <td><button class="action-btn" onclick=\'sendToPython(this)\' data-row=\'{row_data_json}\' >Show Info</button></td>\n'
        html += "  </tr>\n"
    
    html += "</table>\n"
    return html


script = """
<script>
    function sendToPython(btn) {
        var data = btn.getAttribute('data-row');
        var rowData = JSON.parse(data);
        console.log("Sending row data to Python:", rowData);
        var inputElem = document.querySelector('#hidden_textbox textarea');
        if (inputElem) {
            const event = new Event('input');
            Object.defineProperty(event, "target", {value: inputElem})
            inputElem.value = JSON.stringify(rowData);
            inputElem.dispatchEvent(event);
        } else {
            console.error("Hidden textbox not found!");
        }
    }
</script>
"""

def generate_filename():
    uf = f"UF{random.randint(1, 5)}"
    cd = "CD"
    pr1 = f"PR{random.randint(10, 99)}"
    pr2 = f"PR{random.randint(10, 99)}"
    return f"{uf}_{cd}_{pr1}_{pr2}"

# Create a sample DataFrame
data = {
    "File name": [generate_filename() for _ in range(10)],
    "Status PDF": [random.choice(["Complete", "Incomplete", "Error"]) for _ in range(10)],
    "Start-End": [f"{random.randint(0, 12)}:00 - {random.randint(13, 23)}:59" for _ in range(10)],
    "Env. Temperature": [round(random.uniform(15.0, 30.0), 2) for _ in range(10)],
    "Sup. Temperature": [round(random.uniform(30.0, 50.0), 2) for _ in range(10)],
    "Flow": [round(random.uniform(5.0, 20.0), 2) for _ in range(10)],
    "Velocity": [round(random.uniform(0.5, 5.0), 2) for _ in range(10)],
    "Gap": [round(random.uniform(0.1, 1.0), 2) for _ in range(10)],
    "Observations": ["" for _ in range(10)]
}
df = pd.DataFrame(data)

def handle_click(input_value):
    print("Button clicked, row data:", input_value)
    return input_value

with gr.Blocks(head=script) as demo:
    gr.Markdown("### Data Table with Action Button")
    # Use a hidden gr.Textbox (which reliably fires change events) to capture the data.
    hidden_textbox = gr.Textbox(value="", elem_id="hidden_textbox", visible=False)
    # Render the table as HTML.
    html_component = gr.HTML(generate_table_html(df, parameters), container=True)
    hidden_textbox.input(fn=handle_click, inputs=[hidden_textbox], outputs=[hidden_textbox])


if __name__ == "__main__":
    demo.launch()