Spaces:
Sleeping
Sleeping
File size: 3,922 Bytes
8f062e6 9707089 8f062e6 9707089 8f062e6 9707089 8f062e6 9707089 8f062e6 |
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 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
from config import Config as cfg
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import json
import pandas as pd
import plotly.graph_objects as go
from utils import flatten_json
# Load data
with open(cfg.data_path, "r") as f:
data = f.read()
data = json.loads(data)
flattened_data = [flatten_json(d) for d in data]
df = pd.DataFrame(flattened_data)
def get_info(idx:int, df):
name = df.loc[idx, "name"]
country = df.loc[idx, "location_country"]
n_gpus = df.loc[idx, "capacity_n_GPUs"]
gpu_type = df.loc[idx, "capacity_GPU_type"]
addr = df.loc[idx, "location_address"]
last_update = df.loc[idx, "last_update"]
capacity = df.loc[idx, "capacity_pflops_performance"]
url = df.loc[idx, "contact_info_website"]
info = dcc.Markdown(
f"""
{country}
{name} - **{str(n_gpus)}x{gpu_type}**
Overall Performance: **{capacity} petaFLOPS**
({last_update})
{addr}
Website: {url}
""",
style={"white-space": "pre"}
)
return info
# Map
fig = go.Figure(data=go.Choropleth(
locations=df['location_CN'],
z = df['capacity_pflops_performance'],
zmax=10,
zmin=0,
locationmode = 'ISO-3',
colorscale = 'reds',
# text=df["info"],
colorbar=dict(
title='Compute capability (petaFLOPS)', # Title for your colorbar
orientation='h', # Set orientation to horizontal
thickness=5, # Adjust thickness as needed
)
))
fig.update_layout(
geo_scope='africa',
height=400,
#margin={"r": 0, "t": 0, "l": 0, "b": 0},
margin={"r": 0, "t": 0, "b": 0},
autosize=True,
# paper_bgcolor='beige' # Background color of the entire figure
dragmode=False
)
fig.update_geos(
landcolor="white", # Sets the color of land areas
oceancolor="lightblue", # Sets the color of ocean areas
subunitcolor="darkgray", # Sets the color of country subdivisions
lakecolor="lightblue", # Set lake color to blue
rivercolor="lightblue",
showlakes=True,
showrivers=True, # Make lakes visible
showland=True,
showocean=True,
showsubunits=True,
resolution=50,
)
# App
external_stylesheets = ["https://fonts.googleapis.com/css2?family=Tahoma&display=swap"]
app = dash.Dash("Africa HPC Tracker", external_stylesheets=external_stylesheets)
server = app.server
TITLE_COLOR = "#095C73"
DETAILS_COLOR = "#0F718E"
app.layout = html.Div(
id="parent_div",
children=[
html.H1(
id='header-text',
children='Africa Compute Tracker',
style={'color':TITLE_COLOR, 'textAlign' : 'center'}
),
html.Div(
id='hover-info',
style={'color':DETAILS_COLOR}
),
dcc.Graph(
id='hpc-tracker',
figure=fig
),
html.P(
children=[
"Report your compute infrastructure: ",
html.A(
"fill out the form",
href="#",
# target="_blank"
)
],
style={'color':DETAILS_COLOR}
)
],
style={
'textAlign' : 'center',
'font-family' : 'Arial, sans-serif',
}
)
# Callbacks
@app.callback(
Output('hover-info', 'children'),
Input('hpc-tracker', 'hoverData'))
def display_hover_data(hoverData):
if hoverData:
# Access hovered point data and display or modify other elements
idx = hoverData['points'][0]['pointIndex']
return get_info(idx, df)
return "Hover over a region to display the details"
if __name__ == '__main__':
app.run(
host=cfg.HOST,
port=cfg.PORT,
debug=cfg.IS_DEBUG,
dev_tools_ui=cfg.IS_DEBUG
)
|