Jupyter .save_to_html function does not store config

Question

I'm trying to use the .save_to_html() function for a kepler.gl jupyter notebook map.

It all works great inside jupyter, and I can re-load the same map with a defined config.

Where it goes wrong is when I use the save_to_html() function. The map will save to an html, but the configuration reverts to the basic configuration, before I customized it.

Please help! I love kepler, when I solve this little thing, it will be our absolute go-to tool

Thanks

Have tried to change the filters, colours, and point sizes. None of this works.

map_1 = KeplerGl(height=500, data={'data': df},config=config)
map_1

config  = map_1.config
config

map_1.save_to_html(data={'data_1': df}, 
file_name='privateers.html',config=config)


Config
{'version': 'v1',
 'config': {'visState': {'filters': [{'dataId': 'data',
     'id': 'x8t9c53mf',
     'name': 'time_update',
     'type': 'timeRange',
     'value': [1565687902187.5417, 1565775465282],
     'enlarged': True,
     'plotType': 'histogram',
     'yAxis': None},
    {'dataId': 'data',
     'id': 'biysqlu36',
     'name': 'user_id',
     'type': 'multiSelect',
     'value': ['HNc0SI3WsQfhOFRF2THnUEfmqJC3'],
     'enlarged': False,
     'plotType': 'histogram',
     'yAxis': None}],
   'layers': [{'id': 'ud6168',
     'type': 'point',
     'config': {'dataId': 'data',
      'label': 'Point',
      'color': [18, 147, 154],
      'columns': {'lat': 'lat', 'lng': 'lng', 'altitude': None},
      'isVisible': True,
      'visConfig': {'radius': 5,
       'fixedRadius': False,
       'opacity': 0.8,
       'outline': False,
       'thickness': 2,
       'strokeColor': None,
       'colorRange': {'name': 'Uber Viz Qualitative 1.2',
        'type': 'qualitative',
        'category': 'Uber',
        'colors': ['#12939A',
         '#DDB27C',
         '#88572C',
         '#FF991F',
         '#F15C17',
         '#223F9A'],
        'reversed': False},
       'strokeColorRange': {'name': 'Global Warming',
        'type': 'sequential',
        'category': 'Uber',
        'colors': ['#5A1846',
         '#900C3F',
         '#C70039',
         '#E3611C',
         '#F1920E',
         '#FFC300']},
       'radiusRange': [0, 50],
       'filled': True},
      'textLabel': [{'field': None,
        'color': [255, 255, 255],
        'size': 18,
        'offset': [0, 0],
        'anchor': 'start',
        'alignment': 'center'}]},
     'visualChannels': {'colorField': {'name': 'ride_id', 'type': 'string'},
      'colorScale': 'ordinal',
      'strokeColorField': None,
      'strokeColorScale': 'quantile',
      'sizeField': None,
      'sizeScale': 'linear'}},
    {'id': 'an8tbef',
     'type': 'point',
     'config': {'dataId': 'data',
      'label': 'previous',
      'color': [221, 178, 124],
      'columns': {'lat': 'previous_lat',
       'lng': 'previous_lng',
       'altitude': None},
      'isVisible': False,
      'visConfig': {'radius': 10,
       'fixedRadius': False,
       'opacity': 0.8,
       'outline': False,
       'thickness': 2,
       'strokeColor': None,
       'colorRange': {'name': 'Global Warming',
        'type': 'sequential',
        'category': 'Uber',
        'colors': ['#5A1846',
         '#900C3F',
         '#C70039',
         '#E3611C',
         '#F1920E',
         '#FFC300']},
       'strokeColorRange': {'name': 'Global Warming',
        'type': 'sequential',
        'category': 'Uber',
        'colors': ['#5A1846',
         '#900C3F',
         '#C70039',
         '#E3611C',
         '#F1920E',
         '#FFC300']},
       'radiusRange': [0, 50],
       'filled': True},
      'textLabel': [{'field': None,
        'color': [255, 255, 255],
        'size': 18,
        'offset': [0, 0],
        'anchor': 'start',
        'alignment': 'center'}]},
     'visualChannels': {'colorField': None,
      'colorScale': 'quantile',
      'strokeColorField': None,
      'strokeColorScale': 'quantile',
      'sizeField': None,
      'sizeScale': 'linear'}},
    {'id': 'ilpixu9',
     'type': 'arc',
     'config': {'dataId': 'data',
      'label': ' -> previous arc',
      'color': [146, 38, 198],
      'columns': {'lat0': 'lat',
       'lng0': 'lng',
       'lat1': 'previous_lat',
       'lng1': 'previous_lng'},
      'isVisible': True,
      'visConfig': {'opacity': 0.8,
       'thickness': 2,
       'colorRange': {'name': 'Global Warming',
        'type': 'sequential',
        'category': 'Uber',
        'colors': ['#5A1846',
         '#900C3F',
         '#C70039',
         '#E3611C',
         '#F1920E',
         '#FFC300']},
       'sizeRange': [0, 10],
       'targetColor': None},
      'textLabel': [{'field': None,
        'color': [255, 255, 255],
        'size': 18,
        'offset': [0, 0],
        'anchor': 'start',
        'alignment': 'center'}]},
     'visualChannels': {'colorField': None,
      'colorScale': 'quantile',
      'sizeField': None,
      'sizeScale': 'linear'}},
    {'id': 'inv52pp',
     'type': 'line',
     'config': {'dataId': 'data',
      'label': ' -> previous line',
      'color': [136, 87, 44],
      'columns': {'lat0': 'lat',
       'lng0': 'lng',
       'lat1': 'previous_lat',
       'lng1': 'previous_lng'},
      'isVisible': False,
      'visConfig': {'opacity': 0.8,
       'thickness': 2,
       'colorRange': {'name': 'Global Warming',
        'type': 'sequential',
        'category': 'Uber',
        'colors': ['#5A1846',
         '#900C3F',
         '#C70039',
         '#E3611C',
         '#F1920E',
         '#FFC300']},
       'sizeRange': [0, 10],
       'targetColor': None},
      'textLabel': [{'field': None,
        'color': [255, 255, 255],
        'size': 18,
        'offset': [0, 0],
        'anchor': 'start',
        'alignment': 'center'}]},
     'visualChannels': {'colorField': None,
      'colorScale': 'quantile',
      'sizeField': None,
      'sizeScale': 'linear'}}],
   'interactionConfig': {'tooltip': {'fieldsToShow': {'data': ['time_ride_start',
       'user_id',
       'ride_id']},
     'enabled': True},
    'brush': {'size': 0.5, 'enabled': False}},
   'layerBlending': 'normal',
   'splitMaps': []},
  'mapState': {'bearing': 0,
   'dragRotate': False,
   'latitude': 49.52565611453996,
   'longitude': 6.2730441822977845,
   'pitch': 0,
   'zoom': 9.244725880765998,
   'isSplit': False},
  'mapStyle': {'styleType': 'dark',
   'topLayerGroups': {},
   'visibleLayerGroups': {'label': True,
    'road': True,
    'border': False,
    'building': True,
    'water': True,
    'land': True,
    '3d building': False},
   'threeDBuildingColor': [9.665468314072013,
    17.18305478057247,
    31.1442867897876],
   'mapStyles': {}}}}

Expected: Fully configurated map as in Jupyter widget

Actuals Colors and filters are not configured. Size and position of map is sent along, so if I store it looking at an empty area, when I open the html file it looks at the same field

Answer 1

In the Jupyter user guide for kepler.gl under the save section

# this will save current map
map_1.save_to_html(file_name='first_map.html')

# this will save map with provided data and config
map_1.save_to_html(data={'data_1': df}, config=config, file_name='first_map.html')

# this will save map with the interaction panel disabled
map_1.save_to_html(file_name='first_map.html', read_only=True)

So it looks like its a bug if the configuration parameter doesn't work or you are making the changes to the map configure after you set it equal to config. This would be fixed if you set

map_1.save_to_html(data={'data_1': df}, 
file_name='privateers.html',config=map_1.config)