[ImgBot] Optimize images

.gitignore

@@ -147,3 +147,5 @@ dmypy.json
 # Cython debug symbols
 cython_debug/
 
+out.txt
+test.py

.gitmodules

@@ -1,6 +1,6 @@
-[submodule "third_party/loa"]
-	path = third_party/loa
-	url = git@github.com:IBM/LOA.git
 [submodule "third_party/commonsense_rl"]
 	path = third_party/commonsense_rl
 	url = git@github.com:daiki-kimura/commonsense-rl.git
+[submodule "third_party/loa"]
+	path = third_party/loa
+	url = git@github.com:IBM/LOA.git

README.md

@@ -9,6 +9,7 @@ This repository contains a demo for Neuro-Symbolic Agent (NeSA), which is specif
 
 ```bash
 git clone --recursive git@github.com:IBM/nesa-demo.git
+cd nesa-demo
 conda create -n nesa-demo python=3.8
 conda activate nesa-demo
 conda install pytorch=1.10.0 torchvision torchaudio -c pytorch
@@ -48,7 +49,7 @@ cd third_party/commonsense_rl/
 python -u train_agent.py --agent_type knowledgeaware --game_dir ./games/twc --game_name *.ulx --difficulty_level easy --graph_type world --graph_mode evolve --graph_emb_type glove --world_evolve_type manual --initial_seed 0 --nruns 1
 ```
 
-- LOA (NeSA method)
+- Neuro-Symbolic Agent (LOA)
 
 ```bash
 cd third_party/loa/

assets/overrides.css

@@ -0,0 +1,7 @@
+div.bx--col-sm-2 div.card {
+    height: 100%; overflow-y: auto;
+}
+
+div.bx--col-sm-2.hide-scroll div.card{
+    height: 100%; overflow-y: clip !important;
+}

components/__init__.py

@@ -4,4 +4,6 @@
 from .ui_shell import ui_shell
 from .dialog_row import dialog_row
 from .next_actions_row import next_actions_row
-
+from .admissable_actions_card import admissible_actions_card
+from .logical_facts_card import logical_facts_card
+from .commonsense_card import commonsense_card

components/admissable_actions_card.py

@@ -0,0 +1,83 @@
+import dash_carbon_components as dca
+import dash_html_components as html
+
+
+def admissible_actions_card(actions=None, height: int = 250):
+
+    action_ul = html.Ul(
+        children=None,
+        id='admissible_actions',
+        style={'height': f'{height}px',
+               'width': '100%'},
+    )
+
+    inspect_action_dropdown = html.Div(
+        id='dropdown_wrapper',
+        children=[dca.Dropdown(
+            id='inspect_action_dropdown',
+            label=None,
+            options=None,
+            value=None,
+            style={
+                'height': '40px',
+                'padding-right': '0px'
+            }
+        )]
+    )
+
+    inspect_action_submit = dca.Button(
+        'Select',
+        id='submit_inspect_action',
+        kind='primary',
+        style={
+            'height': '40px',
+            'width': '50px'
+        },
+        size='small'
+    )
+
+    loa_action_submit = dca.Button(
+        'Select NeSA recommendation',
+        id='select_recommendation_action',
+        kind='primary',
+        style={
+            'height': '40px',
+            'width': '100%',
+            'padding-right': '0px'
+        },
+        size='small'
+    )
+
+    row = dca.Row(
+        children=[
+            dca.Column(loa_action_submit, columnSizes=['md-3'],
+                       style={'margin-right': '22px',
+                              'padding-right': '0px'}),
+            html.Div('or',
+                     style={'padding-right': '22px',
+                            'height': '40px',
+                            'padding-top': '12px'}),
+            dca.Column(inspect_action_dropdown, columnSizes=['md-4'],
+                       style={'height': '1.5em',
+                              'max-width': '300px',
+                              'padding-right': '0px'}),
+            dca.Column(inspect_action_submit, columnSizes=['md-2'],
+                       style={'max-width': '30px',
+                              'padding-right': '0px',
+                              'margin-right': '0px',
+                              'padding-left': '0px'})
+        ],
+        style={
+            'width': '100%',
+            'margin-bottom': '10pt',
+            'padding-left': '15px'
+        }
+    )
+
+    return dca.Card(
+        id='admissible_actions_card',
+        title='Action selector for checking inside of the model',
+        children=[
+            row,
+            action_ul
+        ])

components/commonsense_card.py

@@ -0,0 +1,21 @@
+import dash_carbon_components as dca
+import dash_html_components as html
+
+
+def commonsense_card(commonsense=None, height: int = 250):
+    children = [
+        html.P('Commonsense knowledge from ConceptNet',
+               style={'text-align': 'left',
+                      'font-weight': 'bold',
+                      'padding-top': '.5rem'}),
+        html.Ul(children=None,
+                id='commonsense',
+                style={'padding-left': '2rem',
+                       'padding-top': '.75rem',
+                       'font-size': 'large'})
+    ]
+
+    return dca.Card(
+        id='commonsense_card',
+        title='Contrastive external knowledge visualizer',
+        children=children)

components/dialog_row.py

@@ -11,7 +11,7 @@ def dialog_row(is_agent: bool, text: str):
     if is_agent:
         img = 'assets/robot-icon.jpeg'
         float_dir = 'right'
-        margins = {'marginLeft': 'calc(100% - 40px)'}
+        margins = {'margin-left': 'calc(100% - 40px)'}
     else:
         img = 'assets/globe-icon.png'
         float_dir = 'left'
@@ -35,8 +35,8 @@ def dialog_row(is_agent: bool, text: str):
                                  style={'height': '50px',
                                         'width': '50px',
                                         'float': float_dir,
-                                        'marginRight': '20px',
-                                        'marginLeft': '20px'}),
+                                        'margin-right': '20px',
+                                        'margin-left': '20px'}),
                         html.P(text,
                                style={
                                    'float': float_dir,

components/fired_rule_card.py

@@ -2,24 +2,86 @@
 import dash_cytoscape as cyto
 import dash_html_components as html
 
+cyto.load_extra_layouts()
+
 
 def fired_rule_card(graph_id: str, graph_name: str,
-                    graph_info: str = '', height: int = 250) -> dca.Card:
+                    graph_info: str = '', height: int = 500) -> dca.Card:
+
+    cytoscape = cyto.Cytoscape(
+        id='fired_rules_agent_1_graph',
+        layout={},
+        elements=[],
+        style={},
+        stylesheet=[],
+        responsive=True
+    )
+
     children = [
+        html.Div(id='fired_rules_agent_1_action_bar',
+                 style={'height': '50px', 'width': '100%'},
+                 children=[
+                    html.Div(
+                        'Select a node or edge',
+                        id='selected_graph_element',
+                        style={'float': 'left', 'padding-top': '0.4rem'}
+                    ),
+                     dca.Button(
+                        'Delete element',
+                        id='delete_graph_element',
+                        kind='danger',
+                        size='sm',
+                        style={'visibility': 'hidden',
+                               'width': '0px'}
+                    ),
+                     dca.Button(
+                         'Execute test',
+                         id='execute_test_graph_element',
+                         kind='primary',
+                         size='sm',
+                         style={'visibility': 'hidden',
+                                'width': '0px'}
+                    ),
+                     dca.Button(
+                         'Undo change',
+                         id='undo_graph_element',
+                         kind='secondary',
+                         size='sm',
+                         style={'visibility': 'hidden',
+                                'width': '0px'}
+                    ),
+                     dca.Button(
+                         'Add node',
+                         id='add_node_button',
+                         kind='primary',
+                         size='sm',
+                         style={'visibility': 'hidden',
+                                'width': '0px'}
+                    ),
+                     dca.Dropdown(
+                         id='add_node_dropdown',
+                         label=None,
+                         options=None,
+                         value=None,
+                         style={'visibility': 'hidden',
+                                'width': '0px'}
+                    ),
+                 ]),
+
         html.Div(id=f'{graph_id}',
-                 style={'height': f'{height}px', 'width': '100%'},
-                 children=cyto.Cytoscape(
-                     id=f'{graph_id}_graph',
-                     elements=[],
-                     style={'height': '100%', 'width': '100%'})),
+                    style={'height': f'{height-50}px', 'width': '100%'},
+                    children=[
+                        cytoscape
+                    ]
+                 )
     ]
 
     return dca.Card(
         id=f'{graph_id}_card',
         title=graph_name,
-        info=graph_info,
-        actions=[{'displayName': 'Download CSV',
-                  'actionPropName': 'download'},
-                 {'displayName': 'Download Excel',
-                 'actionPropName': 'download_excel'}],
+        # actions=[{'displayName': 'Download CSV',
+        #           'actionPropName': 'download'},
+        #          {'displayName': 'Download Excel',
+        #          'actionPropName': 'download_excel'}],
+        style={'height': f'{height-50}px'},
         children=children)

components/graph_card.py

@@ -1,6 +1,4 @@
 import dash_carbon_components as dca
-import dash_html_components as html
-import dash_table
 from dash_core_components import Graph
 from dash_extensions import Download
 
@@ -10,7 +8,7 @@ def graph_card(graph_id: str, graph_name: str, graph_info: str = '',
     if radios is None:
         radios = []
     children = [
-        Graph(id=f'{graph_id}', style={'height': f'{height}px'}),
+        Graph(id=f'{graph_id}', style={'height': f'{height-50}px'}),
         Download(id=f'{graph_id}_download'),
     ]
     i = 0
@@ -27,8 +25,4 @@ def graph_card(graph_id: str, graph_name: str, graph_info: str = '',
         id=f'{graph_id}_card',
         title=graph_name,
         info=graph_info,
-        actions=[{'displayName': 'Download CSV',
-                  'actionPropName': 'download'},
-                 {'displayName': 'Download Excel',
-                 'actionPropName': 'download_excel'}],
         children=children)

components/logical_facts_card.py

@@ -0,0 +1,18 @@
+import dash_carbon_components as dca
+import dash_html_components as html
+
+
+def logical_facts_card(facts=None, height: int = 250):
+    children = [
+        html.Ul(
+            children=None,
+            id='logical_facts',
+            style={'padding-top': '.5rem',
+                   'font-size': 'large'}
+        ),
+    ]
+
+    return dca.Card(
+        id='logical_facts_card',
+        title='Current state fact visualizer',
+        children=children)

components/network_card.py

@@ -1,42 +1,61 @@
 import dash_carbon_components as dca
 import dash_core_components as dcc
+import dash_cytoscape as cyto
 import dash_html_components as html
 import dash_table
-import dash_cytoscape as cyto
 
 
-def network_card(graph_id: str, graph_name: str, graph_info: str = '', slider: bool = False, table: bool = False, height: int = 250) -> dca.Card:
+def network_card(graph_id: str, graph_name: str, graph_info: str = '',
+                 slider: bool = False, table: bool = False,
+                 height: int = 250) -> dca.Card:
     children = [
-        html.Div(id=f'{graph_id}', style={'height': f'{height}px', 'width': '100%'},
+        html.Div(id=f'{graph_id}',
+                 style={'height': f'{height}px', 'width': '100%'},
                  children=cyto.Cytoscape(
-                     id=f'{graph_id}_graph', elements=[], style={'height': '100%', 'width': '100%'})),
+                     id=f'{graph_id}_graph',
+                     elements=[],
+                     style={'height': '100%', 'width': '100%'})),
     ]
 
     if slider:
         slider_component = html.Div(
-            id=f'{graph_id}_slider_parent', style={'width': '25%', 'padding': '25px', 'paddingBottom': '50px'},
-            children=[html.H4("Select Epoch:"),
-                      dcc.Slider(id=f'{graph_id}_slider', min=0, max=1, value=0, marks={}, step=None)]
-        )
+            id=f'{graph_id}_slider_parent',
+            style={
+                'width': '25%',
+                'padding': '25px',
+                'padding-bottom': '50px'},
+            children=[
+                html.H4("Select Epoch:"),
+                dcc.Slider(
+                    id=f'{graph_id}_slider',
+                    min=0,
+                    max=1,
+                    value=0,
+                    marks={},
+                    step=None)])
         children.append(slider_component)
 
     if table:
         table_component = html.Div(
-            id=f'{graph_id}_table_parent', style={'width': '50%', 'padding': '25px'},
+            id=f'{graph_id}_table_parent',
+            style={'width': '50%', 'padding': '25px'},
             children=[
                 html.H4("Edit Weight:"),
                 dash_table.DataTable(
                     id=f'{graph_id}_table',
                     columns=(
-                        [{'id': 'Parent', 'name': 'Parent'}, {'id': 'Child', 'name': 'Child'},
+                        [{'id': 'Parent', 'name': 'Parent'},
+                         {'id': 'Child', 'name': 'Child'},
                          {'id': 'Weight', 'name': 'Weight'}]
                     ),
                     data=[dict(Parent='', Child='', Weight='')],
                     editable=True,
                     style_table={'overflowX': 'auto', 'width': '50%'},
                     style_cell={
                         # all three widths are needed
-                        'minWidth': '120px', 'width': '120px', 'maxWidth': '120px',
+                        'minWidth': '120px',
+                        'width': '120px',
+                        'maxWidth': '120px',
                         'overflow': 'hidden',
                         'textOverflow': 'ellipsis',
                     }
@@ -49,6 +68,4 @@ def network_card(graph_id: str, graph_name: str, graph_info: str = '', slider: b
         id=f'{graph_id}_card',
         title=graph_name,
         info=graph_info,
-        actions=[{'displayName': 'Download CSV', 'actionPropName': 'download'},
-                 {'displayName': 'Download Excel', 'actionPropName': 'download_excel'}],
         children=children)