Update demo2/pages/__init__.py

demo2/pages/__init__.py

@@ -1,702 +1,702 @@
-#%%
-css = """
-
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url('/static/public/open-sans.regular.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Museo 900';
-    src: url('/static/public/Museo900-Regular.woff2') format('woff2'),
-        url('/static/public/Museo900-Regular.woff') format('woff');
-    font-weight: 900;
-    font-style: normal;
-    font-display: swap;
-}
-
-
-@font-face {
-    font-family: 'Museo 700';
-    src: url('/static/public/Museo700-Regular.woff2') format('woff2')
-}
-
-
-.v-application {
-    font-family: 'Open Sans'
-}
-
-.v-card__title {
-    padding: 2px;
-    font-family: 'Museo 900'
-}
-
-.v-application .ma-2 {
-    margin: 2px!important;
-}
-
-.leaflet-control-attribution {
-    display: none;
-}
-.v-btn__content {
-    font-size: 12px;
-}
-
-.v-input__control {
-    height: 24px
-}
-
-.jupyter-widgets.leaflet-widgets {
-    height: 280px;
-    overflow: hidden;
-}
-
-.col {
-    overflow: hidden;
-}
-
-.v-card__title {
-    font-size: 20px;
-    text-color: "orange";
-}
-
-label.v-label.theme--dark {
-    font-size: 14px;
-    line-height: 100%;
-}
-
-.metricdesc {
-    font-size: 15px;
-    margin-top: -30px;
-    text-align: center;
-}
-.infobox {
-    font-size: 14px;
-    line-height: 110%;
-}
-
-.infoitem {
-    font-size: 12px;
-    line-height: 110%;
-}
-
-.maintitle {
-    font-family: 'Museo 900';
-    font-size: 30px;
-    text-align: center;
-}
-
-"""
-
-import solara
-import pandas as pd
-import geopandas as gpd
-import ipyleaflet
-from random import uniform
-import random
-import numpy as np
-import json
-import matplotlib.pyplot as plt
-from .engine import run_engine
-
-languages = ["EN","TR"]
-lang = solara.reactive("EN")
-
-lbl_land_use_btn = [{'EN': 'civil societies',
-                     'TR': 'sivil toplum'},
-                     {'EN': 'women',
-                     'TR': 'kadınlar'},
-                     {'EN': 'youth',
-                     'TR': 'gençler'},]
-lbl_maintitle = {'EN': 'Tomorrow\'s Cities Decision Making Simulation','TR': 'Yarının Şehirleri için Karar Verme Simülasyonu'}
-lbl_earthquake= {'EN': 'Earthquake', 'TR': 'Deprem'}
-lbl_flood = {'EN': 'Flood', 'TR': 'Sel'}
-lbl_debris = {'EN': 'Landslide', 'TR': 'Heyelan'}
-lbl_reset = {'EN': 'Reset Simulation', 'TR': 'Simülasyonu Sıfırla'}
-lbl_language = {'EN': 'Language', 'TR': 'Dil'}
-lbl_luf_res_high = {'EN': 'Residential (High Density)', 'TR': 'Yerlesim Alani (Yuksek Yogunluk)'}
-lbl_tv0_map_title = {'EN': '1. Today\'s land use', 'TR': '1. Mevcut plan'}
-lbl_density_map_title = {'EN': '2. Select the potential hazard', 'TR': '2. Olası tehlikeyi seçin'}
-lbl_policy_card_title = {'EN': '4. Select three policies to make your city resillient', 'TR': '4. Şehrinizi dayanıklı hale getirmek için üç politika seçin'}
-lbl_too_many_policy_selected_error = {'EN': 'You cannot select more than three policies', 
-                              'TR': 'Üçten fazla politika seçemezsiniz'}
-lbl_infobox = {'EN': f'''
-               Our decisions directly influence our future. It is critical for a 
-               resilient city life where the decisions at the city scale  reduces the disaster risk in the future.
-               In this simulation, we calculate possible disaster impacts calculated with Tomorrow's Cities Decision 
-               Support System (TCDSE). The simulation shows how earthquake and flood hazards that may occur 
-               in an urban environment affect different urban scenarios. To use the simulation 1) Check land use 2) Select the 
-               possible hazard 3) Select the possible city scenarios for the future 4) choose policies 5) Run and check the metrics.
-               ''', 
-               "TR": f'''
-            Aldığımız kararlar, geleceğimizi doğrudan etkilemektedir. Kent ölçeğinde alınan kararların, gelecekte afet riskini azaltacak 
-            nitelikte olması dayanıklı bir şehir hayatı için önemlidir.
-            Bu simülasyonda, Yarının Şehirleri Karar Destek Sistemi (TCDSE) ile hesaplanan olası afet etkilerini hesaplıyoruz. Simülasyon, 
-            bir kent ortamında meydana gelebilecek deprem ve sel tehlikelerinin, farklı kent senaryolarını nasıl etkilediğini gösteriyor. 
-            Simülasyonu kullanmak için 1) Mevcut planı inceleyin 2) Olası tehlikeyi seçin 3) Geleceğe dair olası şehir senaryolarını seçin 
-            4) Politikaları seçin 5) Çalıştırın ve metrikleri inceleyin.'''}
-lbl_infobox_title = {'EN': '', 'TR': ''}
-lbl_landuse_plans_title = {'EN': '3. Future land uses', 'TR': '3. Geleceğin alternatif yerleşim planlarından birini seçin'}
-lbl_run_btn = {'EN': 'RUN', 'TR': 'ÇALIŞTIR'}
-lbl_results_card_title = {'EN': '5. Impact metrics', 'TR': '5. Etki metrikleri'}
-lbl_info1 = {'EN': 'Number of individuals<br>39058', 'TR': 'Kişi Sayısı<br>39058'}
-lbl_info2 = {'EN': 'Number of households<br>10397',  'TR': 'Hane Sayısı<br>10397'}
-lbl_info3 = {'EN': 'Number of buildings<br>4810', 'TR': 'Bina Sayısı<br>4810'}
-lbl_info4 = {'EN': 'Number of schools<br>4', 'TR': 'Okul Sayısı<br>4'}
-lbl_info5 = {'EN': 'Number of hospitals<br>1', 'TR': 'Hastane Sayısı<br>1'}
-#lbl_info6 = {'EN': 'Number of green field<br>', 'TR': 'Yeşil Alan Sayısı<br>'}
-
-hazard_types = ["earthquake", "flood", "debris"]
-hazard_type_default = hazard_types[0]
-hazard_type = solara.reactive("earthquake")
-
-flood_df = gpd.read_file('hazard_flood.geojson')
-debris_df = gpd.read_file('hazard_debris.geojson')
-earthquake_df = gpd.read_file('hazard_earthquake.geojson')
-
-earthquake_df_as_geo = gpd.read_file('hazard_earthquake.geojson')
-print('bir',earthquake_df_as_geo.crs)
-earthquake_df_as_geo = earthquake_df_as_geo.set_crs("EPSG:4326",allow_override=True)
-print('iki',earthquake_df_as_geo.crs)
-earthquake_df_as_geo = earthquake_df_as_geo.to_crs(32645)
-print('uc',earthquake_df_as_geo.crs)
-
-debris_df_as_geo = gpd.read_file('hazard_debris.geojson')
-debris_df_as_geo = debris_df_as_geo.set_crs("EPSG:4326",allow_override=True)
-debris_df_as_geo = debris_df_as_geo.to_crs("EPSG:32645")
-
-flood_df_as_geo = gpd.read_file('hazard_flood.geojson')
-flood_df_as_geo = flood_df_as_geo.set_crs("EPSG:4326",allow_override=True)
-flood_df_as_geo = flood_df_as_geo.to_crs("EPSG:32645")
-
-landuse_tv0_df = gpd.read_file('landuse_tv0.geojson')
-landuse_tv50_1_df = gpd.read_file('landuse_tv50_1.geojson')
-landuse_tv50_2_df = gpd.read_file('landuse_tv50_2.geojson')
-landuse_tv50_3_df = gpd.read_file('landuse_tv50_3.geojson')
-n_landuses = 3
-
-luf_types = pd.unique(landuse_tv0_df['luf'])
-
-luf_colors = dict()
-for luf_label in luf_types:
-    if luf_label == 'Agricultural Areas':
-        luf_colors[luf_label] = {
-        'color': 'black',
-        'fillColor': '#ffe665',
-        }    
-    elif luf_label == 'Urban Green':
-        luf_colors[luf_label] = {
-        'color': 'black',
-        'fillColor': '#abdda4',
-        }    
-    elif luf_label == 'Public Service Areas':
-        luf_colors[luf_label] = {
-        'color': 'black',
-        'fillColor': '#2b83ba',
-        }   
-    elif luf_label == 'Commercial Areas':
-        luf_colors[luf_label] = {
-        'color': 'black',
-        'fillColor': '#d42c45',
-        }   
-    elif luf_label == 'Industrial Areas':
-        luf_colors[luf_label] = {
-        'color': 'black',
-        'fillColor': '#936ede',
-        }   
-    elif luf_label == 'Residential Areas with Low Density':
-        luf_colors[luf_label] = {
-        'color': 'black',
-        'fillColor': '#be8750',
-        }   
-    elif luf_label == 'Residential Areas with Moderate Density':
-        luf_colors[luf_label] = {
-        'color': 'black',
-        'fillColor': '#a97d51',
-        }   
-    elif luf_label == 'Residential Areas with High Density':
-        luf_colors[luf_label] = {
-        'color': 'black',
-        'fillColor': '#8c541a',
-        }
-    else:
-        luf_colors[luf_label] = {
-        'color': 'black',
-        'fillColor': random.choice(['red', 'yellow', 'green', 'orange','blue']),
-        } 
-
-#
-plt.switch_backend("agg")
-plt.rcParams['axes.facecolor'] = '#1e1e1e'
-plt.rcParams['axes.edgecolor'] = '#1e1e1e'
-#plt.switch_backend('macosx')
-#%matplotlib inline
-# for j in range(1, n_landuses+1):
-    # df = eval(f'landuse_tv50_{j}_df')
-    # title = f'tv50_{j}'
-    # for i, row in df.iterrows():
-        # df.loc[i, 'color'] = luf_colors[row['luf']]['fillColor']
-    # fig, ax = plt.subplots(nrows=1, ncols=1,figsize=(4*1.3, 5*1.3))
-    # fig.set_tight_layout(True)
-    # fig.patch.set_facecolor('white')
-    # #fig.patch.set_alpha(0.7)
-    # df.plot(color=df['color'],ax=ax)
-    # #ax.set_title(f'{title}')
-    # ax.set_xticks([])
-    # ax.set_yticks([])
-    # plt.savefig(f'landuse_{title}_selected.png')
-
-    # fig, ax = plt.subplots(nrows=1, ncols=1,figsize=(4*1.3,5*1.3))
-    # fig.set_tight_layout(True)
-    # #fig.patch.set_facecolor('black')
-    # fig.patch.set_alpha(0.0)
-    # df.plot(color=df['color'],ax=ax)
-    # #ax.set_title(f'{title}')
-    # ax.set_xticks([])
-    # ax.set_yticks([])
-    # plt.savefig(f'landuse_{title}.png')
-
-landuse_tv0_json = json.loads(landuse_tv0_df.to_json())
-luf_filtered_data = solara.reactive(landuse_tv0_json)
-
-luf_selected = solara.reactive(luf_types)
-luf_type_selected = dict()
-for luf_type in luf_types:
-    luf_type_selected[luf_type] = solara.reactive(True)
-
-lbl_luf = dict()
-for luf_label in luf_types:
-    if luf_label == 'Agricultural Areas':
-        lbl_luf[luf_label] = {'EN': 'Agricultural Areas', 'TR': 'Tarım Alanları'}
-    elif luf_label == 'Urban Green':
-        lbl_luf[luf_label] = {'EN': 'Urban Green & Recreation Areas', 'TR': 'Kentsel Yeşil/Rekreasyon Alanları'}
-    elif luf_label == 'Public Service Areas':
-        lbl_luf[luf_label] = {'EN': 'Public Service Areas', 'TR': 'Kamu Hizmet Alanları'}
-    elif luf_label == 'Commercial Areas':
-        lbl_luf[luf_label] = {'EN': 'Commercial & Mixed Use Areas', 'TR': 'Ticari/Karışık Kullanım Alanları'}
-    elif luf_label == 'Industrial Areas':
-        lbl_luf[luf_label] = {'EN': 'Industrial Areas', 'TR': 'Sanayi Alanları'}        
-    elif luf_label == 'Residential Areas with Low Density':
-        lbl_luf[luf_label] = {'EN': 'Residential Areas with Low Density', 'TR': 'Düşük Yoğunluklu Konut Alanı'}
-    elif luf_label == 'Residential Areas with Moderate Density':
-        lbl_luf[luf_label] = {'EN': 'Residential Areas with Moderate Density', 'TR': 'Orta Yoğunluklu Konut Alanı'}
-    elif luf_label == 'Residential Areas with High Density':
-        lbl_luf[luf_label] = {'EN': 'Residential Areas with High Density', 'TR': 'Yüksek Yoğunluklu Konut Alanı'}        
-    else:
-        lbl_luf[luf_label] = {'EN': luf_label, 'TR': '(TR)'+luf_label}
-
-policies = [1,2,3,4,5,6]
-lbl_policy = dict()
-lbl_policy[1] = {'EN': 'Loans for reconstruction for minor to moderate damages', 
-                 'TR': 'Küçük ila orta dereceli hasarlar için yeniden yapılanma kredileri'}
-lbl_policy[2] = {'EN': 'Knowledge sharing about disaster risk reduction in schools', 
-                 'TR': 'Devlet ve özel okullarda afet risklerinin azaltılması hakkında bilgi paylaşımı'}
-lbl_policy[3] = {'EN': 'Catastrophe bond for education/health facilities', 
-                 'TR': 'Eğitim ve sağlık tesislerini yapılandırmak için afet bonosu'}
-lbl_policy[4] = {'EN': 'Repair loan assistance for flooding', 
-                 'TR': 'Sel için onarım kredisi yardımı'}
-lbl_policy[5] = {'EN': 'Technical assistance for debris removal in education facilities', 
-                 'TR': 'Eğitim tesislerinde enkaz kaldırma için teknik yardım'}
-lbl_policy[6] = {'EN': 'Compulsory content insurance for schools and hospitals', 
-                 'TR': 'Okullar ve hastaneler için zorunlu eşya sigortası'}
-#lbl_policy[7] = {'EN': 'Green resilient infrastructure (prevention) & financial support for business recovery', 'TR': 'Politika 7'}
-#lbl_policy[8] = {'EN': 'Green resilient infrastructure (prevention), reinforcement of schools, hospitals & shelters, financial support for affected business & household', 'TR': 'Politika 8'}
-policy_selected = dict()
-for policy in policies:
-    policy_selected[policy] = solara.reactive(False)
-last_selected_policies = solara.reactive(set())
-
-earthquake_locs = np.array([earthquake_df.geometry.y.to_list(), earthquake_df.geometry.x.to_list(), earthquake_df.im.to_list()]).transpose().tolist()
-flood_locs = np.array([flood_df.geometry.y.to_list(), flood_df.geometry.x.to_list(), flood_df.im.to_list()]).transpose().tolist()
-debris_locs = np.array([debris_df.geometry.y.to_list(), debris_df.geometry.x.to_list(), debris_df.im.to_list()]).transpose().tolist()
-
-hazard_intensities = {
-    "earthquake": earthquake_locs,
-    "flood": flood_locs,
-    "debris": debris_locs
-}
-
-hazard_df = {  
-    "earthquake": earthquake_df,
-    "flood": flood_df,
-    "debris": debris_df  
-}
-
-hazard_df_as_geo = {  
-    "earthquake": earthquake_df_as_geo,
-    "flood": flood_df_as_geo,
-    "debris": debris_df_as_geo  
-}
-
-zoom_default = 12
-tv0_zoom = solara.reactive(zoom_default)
-
-tv0_center_default = (32.215, 35.21)
-tv0_center = solara.reactive(tv0_center_default)
-print(tv0_center)
-def random_color(feature):
-    return luf_colors[feature['properties']['luf']]
-
-@solara.component
-def TV0MAP():
-    selected_lufs = set()
-    for luf_type in luf_types:
-        if luf_type_selected[luf_type].value:
-            selected_lufs.add(luf_type)
-    x = {'type':landuse_tv0_json['type'] }
-    x['features'] = []
-    for f in landuse_tv0_json['features']:
-        if f['properties']['luf'] in selected_lufs:
-            x['features'].append(f)
-    ipyleaflet.Map.element(
-        zoom=tv0_zoom.value,
-        on_zoom=tv0_zoom.set,
-        max_zoom=21,
-        min_zoom=1,
-        center=tv0_center.value,
-        on_center=tv0_center.set,
-        scroll_wheel_zoom=True,
-        dragging=True,
-        double_click_zoom=False,
-        touch_zoom=False,
-        box_zoom=False,
-        keyboard=True,
-        zoom_control=False,
-        layers=[
-            ipyleaflet.basemap_to_tiles(ipyleaflet.basemaps.OpenStreetMap.Mapnik), #ipyleaflet.basemaps.Esri.WorldImagery
-            ipyleaflet.GeoJSON(
-                data=x,
-                style={
-                    'opacity': 1, 'dashArray': '9', 'fillOpacity': 0.5, 'weight': 1
-                },
-                hover_style={
-                    'color': 'white', 'dashArray': '0', 'fillOpacity': 0.5
-                },
-                style_callback=random_color)
-        ],
-    )
-
-@solara.component
-def DensityMap(hazard_type):
-    locs = hazard_intensities[hazard_type]
-    ipyleaflet.Map.element(
-        zoom=tv0_zoom.value,
-        max_zoom=zoom_default,
-        min_zoom=zoom_default,
-        on_zoom=tv0_zoom.set,
-        center=tv0_center.value,
-        on_center=tv0_center.set,
-        scroll_wheel_zoom=False,
-        dragging=False,
-        double_click_zoom=False,
-        touch_zoom=False,
-        box_zoom=False,
-        keyboard=False,
-        zoom_control=False,
-        layers=[
-            ipyleaflet.basemap_to_tiles(ipyleaflet.basemaps.Esri.WorldTopoMap),
-            ipyleaflet.Heatmap(
-                name=hazard_type,
-                locations=locs,
-                radius=10
-            ),
-        ],
-    )
-
-run_is_allowed = solara.reactive(True)
-
-@solara.component
-def PolicyValidation():
-    npolicies_selected = 0
-    selected_policies = set()
-    for p in policies:
-        if policy_selected[p].value:
-            selected_policies.add(p)
-            npolicies_selected += 1
-    if npolicies_selected > 3:
-        print("roll-back")
-        solara.Warning(label=lbl_too_many_policy_selected_error[lang.value])
-        run_is_allowed.value = False
-        # Roll-back to last selection
-        #for p in policies:
-        #    if p in last_selected_policies.value:
-        #        policy_selected[p].value = True
-        #    else:
-        #        policy_selected[p].value = False
-    else:
-        last_selected_policies.value = selected_policies
-        run_is_allowed.value = True
-
-landuseplan_selected = solara.reactive(1)
-
-lbl_metric1 = {"EN": "Number of workers unemployed", "TR": "İşini kaybedenlerin sayısı"}
-lbl_metric2 = {"EN": "Number of children with no access to education", "TR": "Okula gidemeyen çocuk sayısı"}
-lbl_metric3 = {"EN": "Number of households with no access to hospital", "TR": "Hastane erişimi olmayan hane sayısı"}
-lbl_metric4 = {"EN": "Number of individuals with no access to hospital", "TR": "Hastane erişimi olmayan kişi sayısı"}
-lbl_metric5 = {"EN": "Number of homeless households", "TR": "İşlevsiz kalan hane sayısı"}
-lbl_metric6 = {"EN": "Number of homeless individuals", "TR": "Evsiz kalan sayısı"}
-lbl_metric7 = {"EN": "Population displacement", "TR": "Yer değiştirmek zorunda kalan kişi sayısı"}
-
-metrics =  {"metric1": {"desc": lbl_metric1, "value": solara.reactive(0), "max_value": solara.reactive(0)},
-            "metric2": {"desc": lbl_metric2, "value": solara.reactive(0), "max_value": solara.reactive(0)},
-            "metric3": {"desc": lbl_metric3, "value": solara.reactive(0), "max_value": solara.reactive(0)},
-            "metric4": {"desc": lbl_metric4, "value": solara.reactive(0), "max_value": solara.reactive(0)},
-            "metric5": {"desc": lbl_metric5, "value": solara.reactive(0), "max_value": solara.reactive(0)},
-            "metric6": {"desc": lbl_metric6, "value": solara.reactive(0), "max_value": solara.reactive(0)},
-            "metric7": {"desc": lbl_metric7, "value": solara.reactive(0), "max_value": solara.reactive(0)}}
-
-@solara.component
-def MetricWidget(name, description, value, max_value=10000):
-    value, set_value = solara.use_state_or_update(value)
-    max_value, set_max_value = solara.use_state_or_update(max_value)
-    options = {
-        "series": [ {
-                "type": 'gauge',
-                "min": 0,
-                "name": description,
-                "max": max(1,max_value), # workaround when max_value = 0
-                "startAngle": 180,
-                "endAngle": 0,
-                "progress": {"show": True, "width": 10, "itemStyle": {"color": 'red'}},
-                "pointer": { "show": False},
-                "axisLine": {"lineStyle": {"width": 10}},
-                "axisTick": {"show": False},
-                "splitLine": {"show": False},
-                "axisLabel": {"show": False},
-                "anchor": {"show": False},
-                "title": {"show": False},
-                "detail": {
-                    "valueAnimation": True,
-                    "offsetCenter": [0, '25%'],
-                    "fontSize": 16,
-                    "color": 'white'},
-                #"title": {"fontSize": 12},
-                "data": [{"value": value, "name": name}]}]}
-    print(f'value/max_value {value}:{max_value}')
-
-    solara.FigureEcharts(option=options, attributes={ "style": "height: 100px; width: 100px" })
-
-@solara.component 
-def MetricsPanel(metrics):
-    '''
-        with solara.Columns([33,33,33]):
-            with solara.Column(align="center", gap="2px"):
-                for key in ["metric1","metric2"]:
-                    MetricWidget(key, metrics[key]["desc"], metrics[key]["value"].value,
-                            max_value=metrics[key]["max_value"].value)
-                    solara.HTML(unsafe_innerHTML=metrics[key]["desc"][lang.value], classes=["metricdesc"])
-            with solara.Column(align="center", gap="2px"):
-                for key in ["metric3","metric4"]:
-                    MetricWidget(key, metrics[key]["desc"], metrics[key]["value"].value,
-                            max_value=metrics[key]["max_value"].value)
-                    solara.HTML(unsafe_innerHTML=metrics[key]["desc"][lang.value], classes=["metricdesc"])
-            with solara.Column(align="center", gap="2px"):
-                for key in ["metric6","metric7"]:
-                    MetricWidget(key, metrics[key]["desc"], metrics[key]["value"].value,
-                            max_value=metrics[key]["max_value"].value)
-                    solara.HTML(unsafe_innerHTML=metrics[key]["desc"][lang.value], classes=["metricdesc"])
-    '''
-    with solara.GridFixed(columns=3):
-        for key in ["metric2","metric4","metric7"]:
-            with solara.Row(justify="center"):
-                MetricWidget(key, metrics[key]["desc"], metrics[key]["value"].value,
-                    max_value=metrics[key]["max_value"].value)
-        for key in ["metric2","metric4","metric7"]:
-            with solara.Row(justify="center"):
-                solara.HTML(unsafe_innerHTML=metrics[key]["desc"][lang.value], classes=["metricdesc"])
-        # for key in ["metric4","metric6","metric7"]:
-            # with solara.Row(justify="center"):
-                # MetricWidget(key,metrics[key]["desc"], metrics[key]["value"].value,
-                    # max_value=metrics[key]["max_value"].value)
-        # for key in ["metric4","metric6","metric7"]:
-            # with solara.Row(justify="center"):
-                # solara.HTML(unsafe_innerHTML=metrics[key]["desc"][lang.value], classes=["metricdesc"])
-
-
-def run_simulation():
-    print("Running simulation")
-    print(f"Selected landuse plans: {landuseplan_selected.value}")
-    selected_policies = set()
-    for p in policies:
-        if policy_selected[p].value:
-            selected_policies.add(p)
-    print(f"Selected policies: {selected_policies}")
- 
-    new_metrics = run_engine(hazard_type.value, 
-                             landuseplan_selected.value, 
-                             hazard_df_as_geo[hazard_type.value],
-                             list(selected_policies))
-    for key in new_metrics.keys():
-        metrics[key]["value"].value = new_metrics[key]["value"]
-        metrics[key]["max_value"].value = new_metrics[key]["max_value"]
-
-    print(metrics)
-  
-@solara.component
-def LandUsePlans():
-    for p in policies:
-        if policy_selected[p].value:
-            print(p, 'selected')
-
-    for p in policies:
-        if policy_selected[p].value:
-            print(p, 'selected')
-
-    #with solara.Column(gap="2px"):
-    #    with solara.Columns([2,32,32,32,2]):
-    #        solara.HTML(unsafe_innerHTML="")
-    #        for i in range(1, n_landuses+1):
-    #            if landuseplan_selected.value == i: 
-    #                solara.Image(f"landuse_tv50_{i}_selected.png", width="230px")
-    #            else:
-    #                solara.Image(f"landuse_tv50_{i}.png",width="230px")    
-    #        solara.HTML(unsafe_innerHTML="")
-    #    with solara.Row():
-    #        with solara.ToggleButtonsSingle(value=landuseplan_selected):
-    #            for i in range(0, n_landuses):
-    #                solara.Button(lbl_land_use_btn[i][lang.value], value=i+1, text=True, style="width: 320px; height: 26px")
-
-        
-    def landuse_1():
-        landuseplan_selected.value = 1
-    
-    def landuse_2():
-        landuseplan_selected.value = 2
-
-    def landuse_3():
-        landuseplan_selected.value = 3
-
-    funcs = {1: landuse_1, 2: landuse_2, 3: landuse_3}
-
-    butons = []
-    with solara.Columns([32,32,32]):
-        for i in range(0, n_landuses):
-            with solara.Column():
-                if landuseplan_selected.value == i + 1: 
-                    solara.Button(lbl_land_use_btn[i][lang.value], value=i+1, 
-                              text=True, on_click=funcs[i+1], style="background-color: #545454; height: 26px")
-                    with solara.Row(justify="center"):
-                        solara.Image(f"landuse_tv50_{i+1}_selected.png", width="100%")
-
-                else:
-                    solara.Button(lbl_land_use_btn[i][lang.value], value=i+1, 
-                              text=True, on_click=funcs[i+1], style="height: 26px")
-                    with solara.Row(justify="center"):
-                        solara.Image(f"landuse_tv50_{i+1}.png", width="100%")
-
-@solara.component
-def Page():
-    def reset_view():
-        tv0_zoom.value = zoom_default
-        tv0_center.value = tv0_center_default
-        hazard_type.value = hazard_type_default
-        for luf_type in luf_types:
-            luf_type_selected[luf_type].value = True
-        landuseplan_selected.value = 1
-
-    solara.Style(css)
-    with solara.Columns([1,98,1]):
-        solara.HTML(unsafe_innerHTML="")
-        with solara.Column():
-            with solara.Columns(([15,15,45,20,10]), style="display: flex; justify-content: center; align-items: center;"):
-                solara.HTML(unsafe_innerHTML="")
-                with solara.Column():
-                    solara.Markdown("""[![Tomorrow's Cities](/static/public/tc-logo.png)](https://tomorrowscities.org/)""")
-                #solara.Button(label=lbl_reset[lang.value], on_click=reset_view, style="height: 26px;")
-                solara.HTML(unsafe_innerHTML=lbl_maintitle[lang.value],classes=["maintitle"])
-                with solara.Column():
-                    solara.Markdown("""[![UR24](/static/public/ur-logo.png)](https://urpartner.io/)""")
-                with solara.ToggleButtonsSingle(value=lang):
-                    solara.Button(label="EN", value="EN", text=True,classes=["langbutton"],style="height: 26px;")
-                    solara.Button(label="TR", value="TR", text=True,classes=["langbutton"],style="height: 26px;")
-            with solara.Columns([50,50]):
-                with solara.Column(gap="2px"):
-                    with solara.Card(title=lbl_tv0_map_title[lang.value]):
-                        with solara.Columns([50,25,25], classes=["mycol"]):
-                            TV0MAP()
-                            with solara.Column(gap="13px"):
-                                for luf_type in luf_types:
-                                    with solara.Row():
-                                        #solara.Button(label="", 
-                                        #          color=luf_colors[luf_type]['fillColor'],
-                                        #          classes=["lufbox"])
-                                        solara.HTML(unsafe_innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;", 
-                                                    style=f"margin: 1px; background-color: {luf_colors[luf_type]['fillColor']};")
-                                        solara.HTML(unsafe_innerHTML=lbl_luf[luf_type][lang.value], 
-                                                    style="font-size: 12px; line-height: 100%; display: flex; justify-content: center; align-items: center;")
-                                        #solara.Checkbox(label=lbl_luf[luf_type][lang.value],value=luf_type_selected[luf_type], 
-                                        #            style="margin-top: 0px; line-height: 80%;")
-                            with solara.Column(gap="20px"):
-                                solara.HTML(unsafe_innerHTML=lbl_info1[lang.value], classes=["infoitem"])
-                                solara.HTML(unsafe_innerHTML=lbl_info2[lang.value], classes=["infoitem"])
-                                solara.HTML(unsafe_innerHTML=lbl_info3[lang.value], classes=["infoitem"])
-                                solara.HTML(unsafe_innerHTML=lbl_info4[lang.value], classes=["infoitem"])
-                                solara.HTML(unsafe_innerHTML=lbl_info5[lang.value], classes=["infoitem"])
-                    with solara.Card(title=lbl_infobox_title[lang.value], style={"text-align": "justify"}):
-                        solara.HTML(unsafe_innerHTML=lbl_infobox[lang.value], classes=["infobox"])
-                    with solara.Card(title=lbl_density_map_title[lang.value]):
-                        with solara.Columns([30,30,30]):
-                            with solara.Column():
-                                if hazard_type.value == "earthquake":
-                                    bgcolor = "background-color: #545454;"
-                                else:
-                                    bgcolor = ""
-                                with solara.Row(justify="center"):
-                                    solara.Button(lbl_earthquake[lang.value], value="earthquake", text=True, on_click=lambda: hazard_type.set("earthquake"), style=f"{bgcolor} width: 100%; height: 26px")
-                                # DensityMap("earthquake")
-                                with solara.Row(justify="center"):
-                                    solara.Image("/static/public/eq1.jpg")
-                            with solara.Column():
-                                if hazard_type.value == "flood":
-                                    bgcolor = "background-color: #545454;"
-                                else:
-                                    bgcolor = ""
-                                with solara.Row(justify="center"):
-                                    solara.Button(lbl_flood[lang.value], value="flood", text=True,  on_click=lambda: hazard_type.set("flood"), style=f"{bgcolor} width: 100%; height: 26px")    
-                                # DensityMap("flood")
-                                with solara.Row(justify="center"):
-                                    solara.Image("/static/public/fl1.jpg")
-                            # with solara.Column():
-                                # if hazard_type.value == "debris":
-                                    # bgcolor = "background-color: #545454;"
-                                # else:
-                                    # bgcolor = ""
-                                # with solara.Row(justify="center"):
-                                    # solara.Button(lbl_debris[lang.value], value="debris", text=True, on_click=lambda: hazard_type.set("debris"), style=f"{bgcolor} width: 200px; height: 26px")  
-                                # DensityMap("debris")
-                        #with solara.Columns([30,30,30]):
-                        #    DensityMap("earthquake")
-                        #    DensityMap("flood")
-                        #    DensityMap("debris")
-                with solara.Column(gap="2px"):
-                    with solara.Card(title=lbl_landuse_plans_title[lang.value]):
-                        LandUsePlans()
-                    with solara.Card(lbl_policy_card_title[lang.value]):
-                        with solara.GridFixed(columns=1,row_gap="2px", column_gap="2px"):
-                            for p in policies:
-                                solara.Checkbox(label=lbl_policy[p][lang.value],value=policy_selected[p], style="font-size: 15px")
-                    solara.Button(label=lbl_run_btn[lang.value],on_click=run_simulation, disabled=not run_is_allowed.value, style="height: 50px")
-                    PolicyValidation()
-                    with solara.Card(title=lbl_results_card_title[lang.value]):
-                        MetricsPanel(metrics)
-        solara.HTML(unsafe_innerHTML="")
-    solara.Title("Tomorrow's Cities Demo")
-
-
-@solara.component
-def Layout(children):
-    # if you need the normal applayout
-    # layout = solara.AppLayout(children=children, style)
-    layout = solara.Div(children=children, style={"width": "100%", "min-height": "100vh"})
-
-    def log(*args):
-        print("stop doing that!")
-
-    #solara.v.use_event(layout, "contextmenu.prevent", log)
-    return layout
-
+#%%
+css = """
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url('/static/public/open-sans.regular.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Museo 900';
+    src: url('/static/public/Museo900-Regular.woff2') format('woff2'),
+        url('/static/public/Museo900-Regular.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+
+@font-face {
+    font-family: 'Museo 700';
+    src: url('/static/public/Museo700-Regular.woff2') format('woff2')
+}
+
+
+.v-application {
+    font-family: 'Open Sans'
+}
+
+.v-card__title {
+    padding: 2px;
+    font-family: 'Museo 900'
+}
+
+.v-application .ma-2 {
+    margin: 2px!important;
+}
+
+.leaflet-control-attribution {
+    display: none;
+}
+.v-btn__content {
+    font-size: 12px;
+}
+
+.v-input__control {
+    height: 24px
+}
+
+.jupyter-widgets.leaflet-widgets {
+    height: 280px;
+    overflow: hidden;
+}
+
+.col {
+    overflow: hidden;
+}
+
+.v-card__title {
+    font-size: 20px;
+    text-color: "orange";
+}
+
+label.v-label.theme--dark {
+    font-size: 14px;
+    line-height: 100%;
+}
+
+.metricdesc {
+    font-size: 15px;
+    margin-top: -30px;
+    text-align: center;
+}
+.infobox {
+    font-size: 14px;
+    line-height: 110%;
+}
+
+.infoitem {
+    font-size: 12px;
+    line-height: 110%;
+}
+
+.maintitle {
+    font-family: 'Museo 900';
+    font-size: 30px;
+    text-align: center;
+}
+
+"""
+
+import solara
+import pandas as pd
+import geopandas as gpd
+import ipyleaflet
+from random import uniform
+import random
+import numpy as np
+import json
+import matplotlib.pyplot as plt
+from .engine import run_engine
+
+languages = ["EN","TR"]
+lang = solara.reactive("EN")
+
+lbl_land_use_btn = [{'EN': 'civil societies',
+                     'TR': 'sivil toplum'},
+                     {'EN': 'women',
+                     'TR': 'kadınlar'},
+                     {'EN': 'youth',
+                     'TR': 'gençler'},]
+lbl_maintitle = {'EN': 'Tomorrow\'s Cities Decision Making Simulation','TR': 'Yarının Şehirleri için Karar Verme Simülasyonu'}
+lbl_earthquake= {'EN': 'Earthquake', 'TR': 'Deprem'}
+lbl_flood = {'EN': 'Flood', 'TR': 'Sel'}
+lbl_debris = {'EN': 'Landslide', 'TR': 'Heyelan'}
+lbl_reset = {'EN': 'Reset Simulation', 'TR': 'Simülasyonu Sıfırla'}
+lbl_language = {'EN': 'Language', 'TR': 'Dil'}
+lbl_luf_res_high = {'EN': 'Residential (High Density)', 'TR': 'Yerlesim Alani (Yuksek Yogunluk)'}
+lbl_tv0_map_title = {'EN': '1. Today\'s land use', 'TR': '1. Mevcut plan'}
+lbl_density_map_title = {'EN': '2. Select the potential hazard', 'TR': '2. Olası tehlikeyi seçin'}
+lbl_policy_card_title = {'EN': '4. Select three policies to make your city resillient', 'TR': '4. Şehrinizi dayanıklı hale getirmek için üç politika seçin'}
+lbl_too_many_policy_selected_error = {'EN': 'You cannot select more than three policies', 
+                              'TR': 'Üçten fazla politika seçemezsiniz'}
+lbl_infobox = {'EN': f'''
+               Our decisions directly influence our future. It is critical for a 
+               resilient city life where the decisions at the city scale  reduces the disaster risk in the future.
+               In this simulation, we calculate possible disaster impacts calculated with Tomorrow's Cities Decision 
+               Support System (TCDSE). The simulation shows how earthquake and flood hazards that may occur 
+               in an urban environment affect different urban scenarios. To use the simulation 1) Check land use 2) Select the 
+               possible hazard 3) Select the possible city scenarios for the future 4) choose policies 5) Run and check the metrics.
+               ''', 
+               "TR": f'''
+            Aldığımız kararlar, geleceğimizi doğrudan etkilemektedir. Kent ölçeğinde alınan kararların, gelecekte afet riskini azaltacak 
+            nitelikte olması dayanıklı bir şehir hayatı için önemlidir.
+            Bu simülasyonda, Yarının Şehirleri Karar Destek Sistemi (TCDSE) ile hesaplanan olası afet etkilerini hesaplıyoruz. Simülasyon, 
+            bir kent ortamında meydana gelebilecek deprem ve sel tehlikelerinin, farklı kent senaryolarını nasıl etkilediğini gösteriyor. 
+            Simülasyonu kullanmak için 1) Mevcut planı inceleyin 2) Olası tehlikeyi seçin 3) Geleceğe dair olası şehir senaryolarını seçin 
+            4) Politikaları seçin 5) Çalıştırın ve metrikleri inceleyin.'''}
+lbl_infobox_title = {'EN': '', 'TR': ''}
+lbl_landuse_plans_title = {'EN': '3. Future land uses', 'TR': '3. Geleceğin alternatif yerleşim planlarından birini seçin'}
+lbl_run_btn = {'EN': 'RUN', 'TR': 'ÇALIŞTIR'}
+lbl_results_card_title = {'EN': '5. Impact metrics', 'TR': '5. Etki metrikleri'}
+lbl_info1 = {'EN': 'Number of individuals<br>39058', 'TR': 'Kişi Sayısı<br>39058'}
+lbl_info2 = {'EN': 'Number of households<br>10397',  'TR': 'Hane Sayısı<br>10397'}
+lbl_info3 = {'EN': 'Number of buildings<br>4810', 'TR': 'Bina Sayısı<br>4810'}
+lbl_info4 = {'EN': 'Number of schools<br>4', 'TR': 'Okul Sayısı<br>4'}
+lbl_info5 = {'EN': 'Number of hospitals<br>1', 'TR': 'Hastane Sayısı<br>1'}
+#lbl_info6 = {'EN': 'Number of green field<br>', 'TR': 'Yeşil Alan Sayısı<br>'}
+
+hazard_types = ["earthquake", "flood", "debris"]
+hazard_type_default = hazard_types[0]
+hazard_type = solara.reactive("earthquake")
+
+flood_df = gpd.read_file('hazard_flood.geojson')
+debris_df = gpd.read_file('hazard_debris.geojson')
+earthquake_df = gpd.read_file('hazard_earthquake.geojson')
+
+earthquake_df_as_geo = gpd.read_file('hazard_earthquake.geojson')
+print('bir',earthquake_df_as_geo.crs)
+earthquake_df_as_geo = earthquake_df_as_geo.set_crs("EPSG:4326",allow_override=True)
+print('iki',earthquake_df_as_geo.crs)
+earthquake_df_as_geo = earthquake_df_as_geo.to_crs(32645)
+print('uc',earthquake_df_as_geo.crs)
+
+debris_df_as_geo = gpd.read_file('hazard_debris.geojson')
+debris_df_as_geo = debris_df_as_geo.set_crs("EPSG:4326",allow_override=True)
+debris_df_as_geo = debris_df_as_geo.to_crs("EPSG:32645")
+
+flood_df_as_geo = gpd.read_file('hazard_flood.geojson')
+flood_df_as_geo = flood_df_as_geo.set_crs("EPSG:4326",allow_override=True)
+flood_df_as_geo = flood_df_as_geo.to_crs("EPSG:32645")
+
+landuse_tv0_df = gpd.read_file('landuse_tv0.geojson')
+landuse_tv50_1_df = gpd.read_file('landuse_tv50_1.geojson')
+landuse_tv50_2_df = gpd.read_file('landuse_tv50_2.geojson')
+landuse_tv50_3_df = gpd.read_file('landuse_tv50_3.geojson')
+n_landuses = 3
+
+luf_types = pd.unique(landuse_tv0_df['luf'])
+
+luf_colors = dict()
+for luf_label in luf_types:
+    if luf_label == 'Agricultural Areas':
+        luf_colors[luf_label] = {
+        'color': 'black',
+        'fillColor': '#ffe665',
+        }    
+    elif luf_label == 'Urban Green':
+        luf_colors[luf_label] = {
+        'color': 'black',
+        'fillColor': '#abdda4',
+        }    
+    elif luf_label == 'Public Service Areas':
+        luf_colors[luf_label] = {
+        'color': 'black',
+        'fillColor': '#2b83ba',
+        }   
+    elif luf_label == 'Commercial Areas':
+        luf_colors[luf_label] = {
+        'color': 'black',
+        'fillColor': '#d42c45',
+        }   
+    elif luf_label == 'Industrial Areas':
+        luf_colors[luf_label] = {
+        'color': 'black',
+        'fillColor': '#936ede',
+        }   
+    elif luf_label == 'Residential Areas with Low Density':
+        luf_colors[luf_label] = {
+        'color': 'black',
+        'fillColor': '#be8750',
+        }   
+    elif luf_label == 'Residential Areas with Moderate Density':
+        luf_colors[luf_label] = {
+        'color': 'black',
+        'fillColor': '#a97d51',
+        }   
+    elif luf_label == 'Residential Areas with High Density':
+        luf_colors[luf_label] = {
+        'color': 'black',
+        'fillColor': '#8c541a',
+        }
+    else:
+        luf_colors[luf_label] = {
+        'color': 'black',
+        'fillColor': random.choice(['red', 'yellow', 'green', 'orange','blue']),
+        } 
+
+#
+plt.switch_backend("agg")
+plt.rcParams['axes.facecolor'] = '#1e1e1e'
+plt.rcParams['axes.edgecolor'] = '#1e1e1e'
+#plt.switch_backend('macosx')
+#%matplotlib inline
+# for j in range(1, n_landuses+1):
+    # df = eval(f'landuse_tv50_{j}_df')
+    # title = f'tv50_{j}'
+    # for i, row in df.iterrows():
+        # df.loc[i, 'color'] = luf_colors[row['luf']]['fillColor']
+    # fig, ax = plt.subplots(nrows=1, ncols=1,figsize=(4*1.3, 5*1.3))
+    # fig.set_tight_layout(True)
+    # fig.patch.set_facecolor('white')
+    # #fig.patch.set_alpha(0.7)
+    # df.plot(color=df['color'],ax=ax)
+    # #ax.set_title(f'{title}')
+    # ax.set_xticks([])
+    # ax.set_yticks([])
+    # plt.savefig(f'landuse_{title}_selected.png')
+
+    # fig, ax = plt.subplots(nrows=1, ncols=1,figsize=(4*1.3,5*1.3))
+    # fig.set_tight_layout(True)
+    # #fig.patch.set_facecolor('black')
+    # fig.patch.set_alpha(0.0)
+    # df.plot(color=df['color'],ax=ax)
+    # #ax.set_title(f'{title}')
+    # ax.set_xticks([])
+    # ax.set_yticks([])
+    # plt.savefig(f'landuse_{title}.png')
+
+landuse_tv0_json = json.loads(landuse_tv0_df.to_json())
+luf_filtered_data = solara.reactive(landuse_tv0_json)
+
+luf_selected = solara.reactive(luf_types)
+luf_type_selected = dict()
+for luf_type in luf_types:
+    luf_type_selected[luf_type] = solara.reactive(True)
+
+lbl_luf = dict()
+for luf_label in luf_types:
+    if luf_label == 'Agricultural Areas':
+        lbl_luf[luf_label] = {'EN': 'Agricultural Areas', 'TR': 'Tarım Alanları'}
+    elif luf_label == 'Urban Green':
+        lbl_luf[luf_label] = {'EN': 'Urban Green & Recreation Areas', 'TR': 'Kentsel Yeşil/Rekreasyon Alanları'}
+    elif luf_label == 'Public Service Areas':
+        lbl_luf[luf_label] = {'EN': 'Public Service Areas', 'TR': 'Kamu Hizmet Alanları'}
+    elif luf_label == 'Commercial Areas':
+        lbl_luf[luf_label] = {'EN': 'Commercial & Mixed Use Areas', 'TR': 'Ticari/Karışık Kullanım Alanları'}
+    elif luf_label == 'Industrial Areas':
+        lbl_luf[luf_label] = {'EN': 'Industrial Areas', 'TR': 'Sanayi Alanları'}        
+    elif luf_label == 'Residential Areas with Low Density':
+        lbl_luf[luf_label] = {'EN': 'Residential Areas with Low Density', 'TR': 'Düşük Yoğunluklu Konut Alanı'}
+    elif luf_label == 'Residential Areas with Moderate Density':
+        lbl_luf[luf_label] = {'EN': 'Residential Areas with Moderate Density', 'TR': 'Orta Yoğunluklu Konut Alanı'}
+    elif luf_label == 'Residential Areas with High Density':
+        lbl_luf[luf_label] = {'EN': 'Residential Areas with High Density', 'TR': 'Yüksek Yoğunluklu Konut Alanı'}        
+    else:
+        lbl_luf[luf_label] = {'EN': luf_label, 'TR': '(TR)'+luf_label}
+
+policies = [1,2,3,4,5,6]
+lbl_policy = dict()
+lbl_policy[1] = {'EN': 'Loans for reconstruction for minor to moderate damages', 
+                 'TR': 'Küçük ila orta dereceli hasarlar için yeniden yapılanma kredileri'}
+lbl_policy[2] = {'EN': 'Knowledge sharing about disaster risk reduction in schools', 
+                 'TR': 'Devlet ve özel okullarda afet risklerinin azaltılması hakkında bilgi paylaşımı'}
+lbl_policy[3] = {'EN': 'Catastrophe bond for education/health facilities', 
+                 'TR': 'Eğitim ve sağlık tesislerini yapılandırmak için afet bonosu'}
+lbl_policy[4] = {'EN': 'Repair loan assistance for flooding', 
+                 'TR': 'Sel için onarım kredisi yardımı'}
+lbl_policy[5] = {'EN': 'Technical assistance for debris removal in education facilities', 
+                 'TR': 'Eğitim tesislerinde enkaz kaldırma için teknik yardım'}
+lbl_policy[6] = {'EN': 'Compulsory content insurance for schools and hospitals', 
+                 'TR': 'Okullar ve hastaneler için zorunlu eşya sigortası'}
+#lbl_policy[7] = {'EN': 'Green resilient infrastructure (prevention) & financial support for business recovery', 'TR': 'Politika 7'}
+#lbl_policy[8] = {'EN': 'Green resilient infrastructure (prevention), reinforcement of schools, hospitals & shelters, financial support for affected business & household', 'TR': 'Politika 8'}
+policy_selected = dict()
+for policy in policies:
+    policy_selected[policy] = solara.reactive(False)
+last_selected_policies = solara.reactive(set())
+
+earthquake_locs = np.array([earthquake_df.geometry.y.to_list(), earthquake_df.geometry.x.to_list(), earthquake_df.im.to_list()]).transpose().tolist()
+flood_locs = np.array([flood_df.geometry.y.to_list(), flood_df.geometry.x.to_list(), flood_df.im.to_list()]).transpose().tolist()
+debris_locs = np.array([debris_df.geometry.y.to_list(), debris_df.geometry.x.to_list(), debris_df.im.to_list()]).transpose().tolist()
+
+hazard_intensities = {
+    "earthquake": earthquake_locs,
+    "flood": flood_locs,
+    "debris": debris_locs
+}
+
+hazard_df = {  
+    "earthquake": earthquake_df,
+    "flood": flood_df,
+    "debris": debris_df  
+}
+
+hazard_df_as_geo = {  
+    "earthquake": earthquake_df_as_geo,
+    "flood": flood_df_as_geo,
+    "debris": debris_df_as_geo  
+}
+
+zoom_default = 12
+tv0_zoom = solara.reactive(zoom_default)
+
+tv0_center_default = (32.215, 35.21)
+tv0_center = solara.reactive(tv0_center_default)
+print(tv0_center)
+def random_color(feature):
+    return luf_colors[feature['properties']['luf']]
+
+@solara.component
+def TV0MAP():
+    selected_lufs = set()
+    for luf_type in luf_types:
+        if luf_type_selected[luf_type].value:
+            selected_lufs.add(luf_type)
+    x = {'type':landuse_tv0_json['type'] }
+    x['features'] = []
+    for f in landuse_tv0_json['features']:
+        if f['properties']['luf'] in selected_lufs:
+            x['features'].append(f)
+    ipyleaflet.Map.element(
+        zoom=tv0_zoom.value,
+        on_zoom=tv0_zoom.set,
+        max_zoom=21,
+        min_zoom=1,
+        center=tv0_center.value,
+        on_center=tv0_center.set,
+        scroll_wheel_zoom=True,
+        dragging=True,
+        double_click_zoom=False,
+        touch_zoom=False,
+        box_zoom=False,
+        keyboard=True,
+        zoom_control=False,
+        layers=[
+            ipyleaflet.basemap_to_tiles(ipyleaflet.basemaps.OpenStreetMap.Mapnik), #ipyleaflet.basemaps.Esri.WorldImagery
+            ipyleaflet.GeoJSON(
+                data=x,
+                style={
+                    'opacity': 1, 'dashArray': '9', 'fillOpacity': 1, 'weight': 1
+                },
+                hover_style={
+                    'color': 'white', 'dashArray': '0', 'fillOpacity': 0.8
+                },
+                style_callback=random_color)
+        ],
+    )
+
+@solara.component
+def DensityMap(hazard_type):
+    locs = hazard_intensities[hazard_type]
+    ipyleaflet.Map.element(
+        zoom=tv0_zoom.value,
+        max_zoom=zoom_default,
+        min_zoom=zoom_default,
+        on_zoom=tv0_zoom.set,
+        center=tv0_center.value,
+        on_center=tv0_center.set,
+        scroll_wheel_zoom=False,
+        dragging=False,
+        double_click_zoom=False,
+        touch_zoom=False,
+        box_zoom=False,
+        keyboard=False,
+        zoom_control=False,
+        layers=[
+            ipyleaflet.basemap_to_tiles(ipyleaflet.basemaps.Esri.WorldTopoMap),
+            ipyleaflet.Heatmap(
+                name=hazard_type,
+                locations=locs,
+                radius=10
+            ),
+        ],
+    )
+
+run_is_allowed = solara.reactive(True)
+
+@solara.component
+def PolicyValidation():
+    npolicies_selected = 0
+    selected_policies = set()
+    for p in policies:
+        if policy_selected[p].value:
+            selected_policies.add(p)
+            npolicies_selected += 1
+    if npolicies_selected > 3:
+        print("roll-back")
+        solara.Warning(label=lbl_too_many_policy_selected_error[lang.value])
+        run_is_allowed.value = False
+        # Roll-back to last selection
+        #for p in policies:
+        #    if p in last_selected_policies.value:
+        #        policy_selected[p].value = True
+        #    else:
+        #        policy_selected[p].value = False
+    else:
+        last_selected_policies.value = selected_policies
+        run_is_allowed.value = True
+
+landuseplan_selected = solara.reactive(1)
+
+lbl_metric1 = {"EN": "Number of workers unemployed", "TR": "İşini kaybedenlerin sayısı"}
+lbl_metric2 = {"EN": "Number of children with no access to education", "TR": "Okula gidemeyen çocuk sayısı"}
+lbl_metric3 = {"EN": "Number of households with no access to hospital", "TR": "Hastane erişimi olmayan hane sayısı"}
+lbl_metric4 = {"EN": "Number of individuals with no access to hospital", "TR": "Hastane erişimi olmayan kişi sayısı"}
+lbl_metric5 = {"EN": "Number of homeless households", "TR": "İşlevsiz kalan hane sayısı"}
+lbl_metric6 = {"EN": "Number of homeless individuals", "TR": "Evsiz kalan sayısı"}
+lbl_metric7 = {"EN": "Population displacement", "TR": "Yer değiştirmek zorunda kalan kişi sayısı"}
+
+metrics =  {"metric1": {"desc": lbl_metric1, "value": solara.reactive(0), "max_value": solara.reactive(0)},
+            "metric2": {"desc": lbl_metric2, "value": solara.reactive(0), "max_value": solara.reactive(0)},
+            "metric3": {"desc": lbl_metric3, "value": solara.reactive(0), "max_value": solara.reactive(0)},
+            "metric4": {"desc": lbl_metric4, "value": solara.reactive(0), "max_value": solara.reactive(0)},
+            "metric5": {"desc": lbl_metric5, "value": solara.reactive(0), "max_value": solara.reactive(0)},
+            "metric6": {"desc": lbl_metric6, "value": solara.reactive(0), "max_value": solara.reactive(0)},
+            "metric7": {"desc": lbl_metric7, "value": solara.reactive(0), "max_value": solara.reactive(0)}}
+
+@solara.component
+def MetricWidget(name, description, value, max_value=10000):
+    value, set_value = solara.use_state_or_update(value)
+    max_value, set_max_value = solara.use_state_or_update(max_value)
+    options = {
+        "series": [ {
+                "type": 'gauge',
+                "min": 0,
+                "name": description,
+                "max": max(1,max_value), # workaround when max_value = 0
+                "startAngle": 180,
+                "endAngle": 0,
+                "progress": {"show": True, "width": 10, "itemStyle": {"color": 'red'}},
+                "pointer": { "show": False},
+                "axisLine": {"lineStyle": {"width": 10}},
+                "axisTick": {"show": False},
+                "splitLine": {"show": False},
+                "axisLabel": {"show": False},
+                "anchor": {"show": False},
+                "title": {"show": False},
+                "detail": {
+                    "valueAnimation": True,
+                    "offsetCenter": [0, '25%'],
+                    "fontSize": 16,
+                    "color": 'white'},
+                #"title": {"fontSize": 12},
+                "data": [{"value": value, "name": name}]}]}
+    print(f'value/max_value {value}:{max_value}')
+
+    solara.FigureEcharts(option=options, attributes={ "style": "height: 100px; width: 100px" })
+
+@solara.component 
+def MetricsPanel(metrics):
+    '''
+        with solara.Columns([33,33,33]):
+            with solara.Column(align="center", gap="2px"):
+                for key in ["metric1","metric2"]:
+                    MetricWidget(key, metrics[key]["desc"], metrics[key]["value"].value,
+                            max_value=metrics[key]["max_value"].value)
+                    solara.HTML(unsafe_innerHTML=metrics[key]["desc"][lang.value], classes=["metricdesc"])
+            with solara.Column(align="center", gap="2px"):
+                for key in ["metric3","metric4"]:
+                    MetricWidget(key, metrics[key]["desc"], metrics[key]["value"].value,
+                            max_value=metrics[key]["max_value"].value)
+                    solara.HTML(unsafe_innerHTML=metrics[key]["desc"][lang.value], classes=["metricdesc"])
+            with solara.Column(align="center", gap="2px"):
+                for key in ["metric6","metric7"]:
+                    MetricWidget(key, metrics[key]["desc"], metrics[key]["value"].value,
+                            max_value=metrics[key]["max_value"].value)
+                    solara.HTML(unsafe_innerHTML=metrics[key]["desc"][lang.value], classes=["metricdesc"])
+    '''
+    with solara.GridFixed(columns=3):
+        for key in ["metric2","metric4","metric7"]:
+            with solara.Row(justify="center"):
+                MetricWidget(key, metrics[key]["desc"], metrics[key]["value"].value,
+                    max_value=metrics[key]["max_value"].value)
+        for key in ["metric2","metric4","metric7"]:
+            with solara.Row(justify="center"):
+                solara.HTML(unsafe_innerHTML=metrics[key]["desc"][lang.value], classes=["metricdesc"])
+        # for key in ["metric4","metric6","metric7"]:
+            # with solara.Row(justify="center"):
+                # MetricWidget(key,metrics[key]["desc"], metrics[key]["value"].value,
+                    # max_value=metrics[key]["max_value"].value)
+        # for key in ["metric4","metric6","metric7"]:
+            # with solara.Row(justify="center"):
+                # solara.HTML(unsafe_innerHTML=metrics[key]["desc"][lang.value], classes=["metricdesc"])
+
+
+def run_simulation():
+    print("Running simulation")
+    print(f"Selected landuse plans: {landuseplan_selected.value}")
+    selected_policies = set()
+    for p in policies:
+        if policy_selected[p].value:
+            selected_policies.add(p)
+    print(f"Selected policies: {selected_policies}")
+ 
+    new_metrics = run_engine(hazard_type.value, 
+                             landuseplan_selected.value, 
+                             hazard_df_as_geo[hazard_type.value],
+                             list(selected_policies))
+    for key in new_metrics.keys():
+        metrics[key]["value"].value = new_metrics[key]["value"]
+        metrics[key]["max_value"].value = new_metrics[key]["max_value"]
+
+    print(metrics)
+  
+@solara.component
+def LandUsePlans():
+    for p in policies:
+        if policy_selected[p].value:
+            print(p, 'selected')
+
+    for p in policies:
+        if policy_selected[p].value:
+            print(p, 'selected')
+
+    #with solara.Column(gap="2px"):
+    #    with solara.Columns([2,32,32,32,2]):
+    #        solara.HTML(unsafe_innerHTML="")
+    #        for i in range(1, n_landuses+1):
+    #            if landuseplan_selected.value == i: 
+    #                solara.Image(f"landuse_tv50_{i}_selected.png", width="230px")
+    #            else:
+    #                solara.Image(f"landuse_tv50_{i}.png",width="230px")    
+    #        solara.HTML(unsafe_innerHTML="")
+    #    with solara.Row():
+    #        with solara.ToggleButtonsSingle(value=landuseplan_selected):
+    #            for i in range(0, n_landuses):
+    #                solara.Button(lbl_land_use_btn[i][lang.value], value=i+1, text=True, style="width: 320px; height: 26px")
+
+        
+    def landuse_1():
+        landuseplan_selected.value = 1
+    
+    def landuse_2():
+        landuseplan_selected.value = 2
+
+    def landuse_3():
+        landuseplan_selected.value = 3
+
+    funcs = {1: landuse_1, 2: landuse_2, 3: landuse_3}
+
+    butons = []
+    with solara.Columns([32,32,32]):
+        for i in range(0, n_landuses):
+            with solara.Column():
+                if landuseplan_selected.value == i + 1: 
+                    solara.Button(lbl_land_use_btn[i][lang.value], value=i+1, 
+                              text=True, on_click=funcs[i+1], style="background-color: #545454; height: 26px")
+                    with solara.Row(justify="center"):
+                        solara.Image(f"landuse_tv50_{i+1}_selected.png", width="100%")
+
+                else:
+                    solara.Button(lbl_land_use_btn[i][lang.value], value=i+1, 
+                              text=True, on_click=funcs[i+1], style="height: 26px")
+                    with solara.Row(justify="center"):
+                        solara.Image(f"landuse_tv50_{i+1}.png", width="100%")
+
+@solara.component
+def Page():
+    def reset_view():
+        tv0_zoom.value = zoom_default
+        tv0_center.value = tv0_center_default
+        hazard_type.value = hazard_type_default
+        for luf_type in luf_types:
+            luf_type_selected[luf_type].value = True
+        landuseplan_selected.value = 1
+
+    solara.Style(css)
+    with solara.Columns([1,98,1]):
+        solara.HTML(unsafe_innerHTML="")
+        with solara.Column():
+            with solara.Columns(([15,15,45,20,10]), style="display: flex; justify-content: center; align-items: center;"):
+                solara.HTML(unsafe_innerHTML="")
+                with solara.Column():
+                    solara.Markdown("""[![Tomorrow's Cities](/static/public/tc-logo.png)](https://tomorrowscities.org/)""")
+                #solara.Button(label=lbl_reset[lang.value], on_click=reset_view, style="height: 26px;")
+                solara.HTML(unsafe_innerHTML=lbl_maintitle[lang.value],classes=["maintitle"])
+                with solara.Column():
+                    solara.Markdown("""[![UR24](/static/public/ur-logo.png)](https://urpartner.io/)""")
+                with solara.ToggleButtonsSingle(value=lang):
+                    solara.Button(label="EN", value="EN", text=True,classes=["langbutton"],style="height: 26px;")
+                    solara.Button(label="TR", value="TR", text=True,classes=["langbutton"],style="height: 26px;")
+            with solara.Columns([50,50]):
+                with solara.Column(gap="2px"):
+                    with solara.Card(title=lbl_tv0_map_title[lang.value]):
+                        with solara.Columns([50,25,25], classes=["mycol"]):
+                            TV0MAP()
+                            with solara.Column(gap="13px"):
+                                for luf_type in luf_types:
+                                    with solara.Row():
+                                        #solara.Button(label="", 
+                                        #          color=luf_colors[luf_type]['fillColor'],
+                                        #          classes=["lufbox"])
+                                        solara.HTML(unsafe_innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;", 
+                                                    style=f"margin: 1px; background-color: {luf_colors[luf_type]['fillColor']};")
+                                        solara.HTML(unsafe_innerHTML=lbl_luf[luf_type][lang.value], 
+                                                    style="font-size: 12px; line-height: 100%; display: flex; justify-content: center; align-items: center;")
+                                        #solara.Checkbox(label=lbl_luf[luf_type][lang.value],value=luf_type_selected[luf_type], 
+                                        #            style="margin-top: 0px; line-height: 80%;")
+                            with solara.Column(gap="20px"):
+                                solara.HTML(unsafe_innerHTML=lbl_info1[lang.value], classes=["infoitem"])
+                                solara.HTML(unsafe_innerHTML=lbl_info2[lang.value], classes=["infoitem"])
+                                solara.HTML(unsafe_innerHTML=lbl_info3[lang.value], classes=["infoitem"])
+                                solara.HTML(unsafe_innerHTML=lbl_info4[lang.value], classes=["infoitem"])
+                                solara.HTML(unsafe_innerHTML=lbl_info5[lang.value], classes=["infoitem"])
+                    with solara.Card(title=lbl_infobox_title[lang.value], style={"text-align": "justify"}):
+                        solara.HTML(unsafe_innerHTML=lbl_infobox[lang.value], classes=["infobox"])
+                    with solara.Card(title=lbl_density_map_title[lang.value]):
+                        with solara.Columns([30,30,30]):
+                            with solara.Column():
+                                if hazard_type.value == "earthquake":
+                                    bgcolor = "background-color: #545454;"
+                                else:
+                                    bgcolor = ""
+                                with solara.Row(justify="center"):
+                                    solara.Button(lbl_earthquake[lang.value], value="earthquake", text=True, on_click=lambda: hazard_type.set("earthquake"), style=f"{bgcolor} width: 100%; height: 26px")
+                                # DensityMap("earthquake")
+                                with solara.Row(justify="center"):
+                                    solara.Image("/static/public/eq1.jpg")
+                            with solara.Column():
+                                if hazard_type.value == "flood":
+                                    bgcolor = "background-color: #545454;"
+                                else:
+                                    bgcolor = ""
+                                with solara.Row(justify="center"):
+                                    solara.Button(lbl_flood[lang.value], value="flood", text=True,  on_click=lambda: hazard_type.set("flood"), style=f"{bgcolor} width: 100%; height: 26px")    
+                                # DensityMap("flood")
+                                with solara.Row(justify="center"):
+                                    solara.Image("/static/public/fl1.jpg")
+                            # with solara.Column():
+                                # if hazard_type.value == "debris":
+                                    # bgcolor = "background-color: #545454;"
+                                # else:
+                                    # bgcolor = ""
+                                # with solara.Row(justify="center"):
+                                    # solara.Button(lbl_debris[lang.value], value="debris", text=True, on_click=lambda: hazard_type.set("debris"), style=f"{bgcolor} width: 200px; height: 26px")  
+                                # DensityMap("debris")
+                        #with solara.Columns([30,30,30]):
+                        #    DensityMap("earthquake")
+                        #    DensityMap("flood")
+                        #    DensityMap("debris")
+                with solara.Column(gap="2px"):
+                    with solara.Card(title=lbl_landuse_plans_title[lang.value]):
+                        LandUsePlans()
+                    with solara.Card(lbl_policy_card_title[lang.value]):
+                        with solara.GridFixed(columns=1,row_gap="2px", column_gap="2px"):
+                            for p in policies:
+                                solara.Checkbox(label=lbl_policy[p][lang.value],value=policy_selected[p], style="font-size: 15px")
+                    solara.Button(label=lbl_run_btn[lang.value],on_click=run_simulation, disabled=not run_is_allowed.value, style="height: 50px")
+                    PolicyValidation()
+                    with solara.Card(title=lbl_results_card_title[lang.value]):
+                        MetricsPanel(metrics)
+        solara.HTML(unsafe_innerHTML="")
+    solara.Title("Tomorrow's Cities Demo")
+
+
+@solara.component
+def Layout(children):
+    # if you need the normal applayout
+    # layout = solara.AppLayout(children=children, style)
+    layout = solara.Div(children=children, style={"width": "100%", "min-height": "100vh"})
+
+    def log(*args):
+        print("stop doing that!")
+
+    #solara.v.use_event(layout, "contextmenu.prevent", log)
+    return layout
+
 Page()