pyfemtet 0.9.5__py3-none-any.whl → 1.0.0b0__py3-none-any.whl

pyfemtet/opt/visualization/{_complex_components → history_viewer/_complex_components}/control_femtet.py

@@ -1,24 +1,27 @@
-# type hint
-from dash.development.base_component import Component
-
 # callback
-from dash import Output, Input, State, no_update, callback_context
+from dash import Output, Input, no_update, callback_context
 from dash.exceptions import PreventUpdate
 
 # components
-from pyfemtet.opt.visualization._wrapped_components import html, dcc, dbc
+from pyfemtet.opt.visualization.history_viewer._wrapped_components import html
+from pyfemtet.opt.visualization.history_viewer._wrapped_components import dbc
 
 # the others
-import logging
 import os
 from enum import Enum
 import json
 # noinspection PyUnresolvedReferences
 from pythoncom import com_error
 
-from pyfemtet.opt.visualization._base import PyFemtetApplicationBase, AbstractPage, logger
-from pyfemtet.opt.interface._femtet import FemtetInterface
-from pyfemtet._message import Msg
+from pyfemtet.opt.visualization.history_viewer._base_application import AbstractPage
+from pyfemtet.opt.interface import FemtetInterface
+from pyfemtet._i18n import Msg
+
+
+__all__ = [
+    'FemtetState',
+    'FemtetControl',
+]
 
 
 class FemtetState(Enum):
@@ -32,7 +35,7 @@ class FemtetControl(AbstractPage):
 
     def __init__(self):
         super().__init__()
-        self.fem: FemtetInterface = None
+        self.fem: FemtetInterface | None = None
 
     def setup_component(self):
 
@@ -141,15 +144,15 @@ class FemtetControl(AbstractPage):
             return kwargs, Msg.WARN_HISTORY_CSV_NOT_READ
 
         # get extra_data
-        extra_data = self.application.history.meta_columns[0]
+        extra_data = self.application.history.additional_data
 
         # check extra_data exists
-        if extra_data == '':
+        if not extra_data:
             return kwargs, Msg.WARN_INVALID_METADATA
 
         # check the extra_data is valid json
         try:
-            d = json.loads(extra_data)
+            d = extra_data
             femprj_path = os.path.abspath(d['femprj_path'])
         except (TypeError, json.decoder.JSONDecodeError, KeyError):
             return kwargs, Msg.WARN_INVALID_METADATA

pyfemtet/opt/visualization/{_complex_components → history_viewer/_complex_components}/main_graph.py

@@ -1,3 +1,9 @@
+import os
+import base64
+from time import time
+
+import numpy as np
+
 # type hint
 from dash.development.base_component import Component
 
@@ -7,22 +13,23 @@ from dash.exceptions import PreventUpdate
 
 # components
 from dash import dash_table
-from pyfemtet.opt.visualization._wrapped_components import html, dcc, dbc
+from pyfemtet.opt.visualization.history_viewer._wrapped_components import html
+from pyfemtet.opt.visualization.history_viewer._wrapped_components import dcc, dbc
 
 # graph
 import pandas as pd
 # import plotly.express as px
 import plotly.graph_objs as go
 
-# the others
-import os
-import base64
-import json
-import numpy as np
+from pyfemtet.opt.visualization.plotter import main_figure_creator
+from pyfemtet.opt.visualization.history_viewer._base_application import AbstractPage, logger
+from pyfemtet._i18n import Msg
+
 
-from pyfemtet.opt.visualization._complex_components import main_figure_creator
-from pyfemtet.opt.visualization._base import AbstractPage, logger
-from pyfemtet._message import Msg
+__all__ = [
+    'FLEXBOX_STYLE_ALLOW_VERTICAL_FILL',
+    'MainGraph',
+]
 
 
 FLEXBOX_STYLE_ALLOW_VERTICAL_FILL = {
@@ -82,13 +89,19 @@ class MainGraph(AbstractPage):
         ]
 
     def setup_component(self):
-        self.dummy = html.Div(id='main-graph-dummy')
+        self.callback_chain_arg_keep_range = 'data-keep-range'  # must be starts with "data-"
+        self.callback_chain_key = html.Data(
+            id='main-graph-callback-key',
+            **{self.callback_chain_arg_keep_range: False}
+        )
+
         self.location = dcc.Location(id='main-graph-location', refresh=True)
 
         # setup header
         tab_list = []
         for d in self.figure_creators:
-            is_objective_plot = d['tab_id'] == self.TAB_ID_OBJECTIVE_PLOT  # Objective plot tab is only shown in obj_names > 3. Set this via callback.
+            # Objective plot tab is only shown in obj_names > 3. Set this via callback.
+            is_objective_plot = d['tab_id'] == self.TAB_ID_OBJECTIVE_PLOT
             is_hypervolume_plot = d['tab_id'] == self.TAB_ID_HYPERVOLUME_PLOT  # same above
 
             if is_objective_plot or is_hypervolume_plot:
@@ -184,7 +197,7 @@ class MainGraph(AbstractPage):
         # setup component
         self.graph_card = dbc.Card(
             [
-                self.dummy,
+                self.callback_chain_key,
                 self.location,
                 self.data_length,
                 self.card_header,
@@ -204,8 +217,11 @@ class MainGraph(AbstractPage):
         app = self.application.app
 
         # ===== Change visibility of plot tab =====
+        # noinspection PyUnresolvedReferences
         objective_plot_tab = [t for t in self.tab_list if t.tab_id == self.TAB_ID_OBJECTIVE_PLOT][0]
+        # noinspection PyUnresolvedReferences
         hypervolume_plot_tab = [t for t in self.tab_list if t.tab_id == self.TAB_ID_HYPERVOLUME_PLOT][0]
+
         @app.callback(
             output=(
                 Output(objective_plot_tab, 'tab_style'),
@@ -414,26 +430,84 @@ class MainGraph(AbstractPage):
             Output(self.data_length.id, self.data_length_prop),  # To determine whether Process Monitor should update the graph, the main graph remembers the current amount of data.
             inputs=dict(
                 active_tab_id=Input(self.tabs.id, 'active_tab'),
-                _=Input(self.dummy, 'children'),
+                keep_range=Input(self.callback_chain_key, self.callback_chain_arg_keep_range),  # entry point of callback chain from MonitorApplication.HomePage
                 is_3d=Input(self.switch_3d, 'value'),
-                obj_names=(
+                selected_obj_names=(
                     Input(self.axis1_dropdown, 'label'),
                     Input(self.axis2_dropdown, 'label'),
                     Input(self.axis3_dropdown, 'label'),
                 ),
             ),
+            state=dict(
+                current_figure=State(self.graph.id, 'figure'),
+            ),
             prevent_initial_call=False,
         )
-        def redraw_main_graph(active_tab_id, _, is_3d, obj_names):
+        def redraw_main_graph(
+                active_tab_id: str,
+                keep_range,
+                is_3d: bool,
+                selected_obj_names: tuple[str | None, str | None, str | None],
+                current_figure: dict,
+        ):
             kwargs = {}
             if active_tab_id == self.TAB_ID_OBJECTIVE_PLOT:
                 if not is_3d:
-                    obj_names = obj_names[:-1]
+                    selected_obj_names = selected_obj_names[:-1]
                 kwargs = dict(
-                    obj_names=obj_names
+                    obj_names=selected_obj_names
                 )
-            figure, length = self.get_fig_by_tab_id(active_tab_id, with_length=True, kwargs=kwargs)
-            return figure, length
+            new_figure: go.Figure
+            new_figure, new_length = self.get_fig_by_tab_id(active_tab_id, with_length=True, kwargs=kwargs)
+
+            # ===== UI の状態をグラフの更新前後で保持 =====
+
+            # https://community.plotly.com/t/preserving-ui-state-like-zoom-in-dcc-graph-with-uirevision-with-dash/15793
+
+            # 一括で維持する設定
+            new_figure.layout.uirevision = 'dont change'  # bool(str | Real) must be True
+
+            # 軸範囲は更新したいので別管理（こちらが優先される）
+            change_x_range = (not keep_range) or (len(self.application.history.obj_names) == 1)
+            change_y_range = not keep_range
+
+            # Splom, Scatter 共通の API で処理可能
+            def update_axis_uirevision(key_base, should_change):
+                # 各 dimension について処理を開始
+                # Splom, Scatter 共通で処理可能
+                for i in range(len(self.application.history.obj_names)):
+
+                    # Splom の layout 中の axis 命名規則に対応した key を作成
+                    # dim0: 'xaxis', dim1: 'xaxis2', dim2: 'xaxis3'...
+                    if i == 0:
+                        key_suffix = ''
+                    else:
+                        key_suffix = str(i + 1)
+                    key = f'{key_base}{key_suffix}'
+
+                    # main_figure_creator で Splom に細工をしているので
+                    # 存在しない key がある
+                    if key in current_figure['layout']:
+
+                        # uirevision を決める
+                        if should_change:
+                            uirevision = time()
+                        else:
+                            new_figure.update_layout(
+                                **{key: dict(autorange=False)}
+                            )
+                            uirevision = current_figure['layout'][key].get('uirevision', f'dont change {key}')
+
+                        # set revision
+                        if uirevision is not None:
+                            new_figure.update_layout(
+                                **{key: dict(uirevision=uirevision)}
+                            )
+
+            update_axis_uirevision('xaxis', change_x_range)
+            update_axis_uirevision('yaxis', change_y_range)
+
+            return new_figure, new_length
 
         # ===== Save Selection =====
         @app.callback(
@@ -443,6 +517,7 @@ class MainGraph(AbstractPage):
             return data
 
         # ===== Show Image and Parameter on Hover =====
+        # noinspection PyPep8Naming
         @app.callback(
             Output(self.tooltip.id, "show"),
             Output(self.tooltip.id, "bbox"),
@@ -458,10 +533,6 @@ class MainGraph(AbstractPage):
             if self.application.history is None:
                 raise PreventUpdate
 
-            # pt = {'curveNumber': 1, 'pointNumber': 0, 'pointIndex': 0, 'x': 1, 'y': 2369132.929996869, 'bbox': {'x0': 341.5, 'x1': 350.5, 'y0': 235, 'y1': 244}, 'customdata': [1]}
-            # bbox = {'x0': 341.5, 'x1': 350.5, 'y0': 235, 'y1': 244}  # point の大きさ？
-            # figure = {'data': [{'customdata': [[1], [2], [3], [4], [5]], 'marker': {'color': '#6c757d', 'size': 6}, 'mode': 'markers', 'name': 'すべての解', 'x': [1, 2, 3, 4, 5], 'y': [2369132.929996866, 5797829.746579617, 1977631.590419346, 2083867.2403273676, 1539203.6452652698], 'type': 'scatter', 'hoverinfo': 'none'}, {'customdata': [[1], [3], [5]], 'legendgroup': 'optimal', 'line': {'color': '#6c757d', 'width': 1}, 'marker': {'color': '#007bff', 'size': 9}, 'mode': 'markers+lines', 'name': '最適解の推移', 'x': [1, 3, 5], 'y': [2369132.929996866, 1977631.590419346, 1539203.6452652698], 'type': 'scatter', 'hoverinfo': 'none'}, {'legendgroup': 'optimal', 'line': {'color': '#6c757d', 'dash': 'dash', 'width': 0.5}, 'mode': 'lines', 'showlegend': False, 'x': [5, 5], 'y': [1539203.6452652698, 1539203.6452652698], 'type': 'scatter', 'hoverinfo': 'none'}], 'layout': {'template': {'data': {'histogram2dcontour': [{'type': 'histogram2dcontour', 'colorbar': {'outlinewidth': 0, 'ticks': ''}, 'colorscale': [[0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1, '#f0f921']]}], 'choropleth': [{'type': 'choropleth', 'colorbar': {'outlinewidth': 0, 'ticks': ''}}], 'histogram2d': [{'type': 'histogram2d', 'colorbar': {'outlinewidth': 0, 'ticks': ''}, 'colorscale': [[0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1, '#f0f921']]}], 'heatmap': [{'type': 'heatmap', 'colorbar': {'outlinewidth': 0, 'ticks': ''}, 'colorscale': [[0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1, '#f0f921']]}], 'heatmapgl': [{'type': 'heatmapgl', 'colorbar': {'outlinewidth': 0, 'ticks': ''}, 'colorscale': [[0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1, '#f0f921']]}], 'contourcarpet': [{'type': 'contourcarpet', 'colorbar': {'outlinewidth': 0, 'ticks': ''}}], 'contour': [{'type': 'contour', 'colorbar': {'outlinewidth': 0, 'ticks': ''}, 'colorscale': [[0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1, '#f0f921']]}], 'surface': [{'type': 'surface', 'colorbar': {'outlinewidth': 0, 'ticks': ''}, 'colorscale': [[0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1, '#f0f921']]}], 'mesh3d': [{'type': 'mesh3d', 'colorbar': {'outlinewidth': 0, 'ticks': ''}}], 'scatter': [{'fillpattern': {'fillmode': 'overlay', 'size': 10, 'solidity': 0.2}, 'type': 'scatter'}], 'parcoords': [{'type': 'parcoords', 'line': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}}], 'scatterpolargl': [{'type': 'scatterpolargl', 'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}}], 'bar': [{'error_x': {'color': '#2a3f5f'}, 'error_y': {'color': '#2a3f5f'}, 'marker': {'line': {'color': '#E5ECF6', 'width': 0.5}, 'pattern': {'fillmode': 'overlay', 'size': 10, 'solidity': 0.2}}, 'type': 'bar'}], 'scattergeo': [{'type': 'scattergeo', 'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}}], 'scatterpolar': [{'type': 'scatterpolar', 'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}}], 'histogram': [{'marker': {'pattern': {'fillmode': 'overlay', 'size': 10, 'solidity': 0.2}}, 'type': 'histogram'}], 'scattergl': [{'type': 'scattergl', 'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}}], 'scatter3d': [{'type': 'scatter3d', 'line': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}, 'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}}], 'scattermapbox': [{'type': 'scattermapbox', 'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}}], 'scatterternary': [{'type': 'scatterternary', 'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}}], 'scattercarpet': [{'type': 'scattercarpet', 'marker': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}}], 'carpet': [{'aaxis': {'endlinecolor': '#2a3f5f', 'gridcolor': 'white', 'linecolor': 'white', 'minorgridcolor': 'white', 'startlinecolor': '#2a3f5f'}, 'baxis': {'endlinecolor': '#2a3f5f', 'gridcolor': 'white', 'linecolor': 'white', 'minorgridcolor': 'white', 'startlinecolor': '#2a3f5f'}, 'type': 'carpet'}], 'table': [{'cells': {'fill': {'color': '#EBF0F8'}, 'line': {'color': 'white'}}, 'header': {'fill': {'color': '#C8D4E3'}, 'line': {'color': 'white'}}, 'type': 'table'}], 'barpolar': [{'marker': {'line': {'color': '#E5ECF6', 'width': 0.5}, 'pattern': {'fillmode': 'overlay', 'size': 10, 'solidity': 0.2}}, 'type': 'barpolar'}], 'pie': [{'automargin': True, 'type': 'pie'}]}, 'layout': {'autotypenumbers': 'strict', 'colorway': ['#636efa', '#EF553B', '#00cc96', '#ab63fa', '#FFA15A', '#19d3f3', '#FF6692', '#B6E880', '#FF97FF', '#FECB52'], 'font': {'color': '#2a3f5f'}, 'hovermode': 'closest', 'hoverlabel': {'align': 'left'}, 'paper_bgcolor': 'white', 'plot_bgcolor': '#E5ECF6', 'polar': {'bgcolor': '#E5ECF6', 'angularaxis': {'gridcolor': 'white', 'linecolor': 'white', 'ticks': ''}, 'radialaxis': {'gridcolor': 'white', 'linecolor': 'white', 'ticks': ''}}, 'ternary': {'bgcolor': '#E5ECF6', 'aaxis': {'gridcolor': 'white', 'linecolor': 'white', 'ticks': ''}, 'baxis': {'gridcolor': 'white', 'linecolor': 'white', 'ticks': ''}, 'caxis': {'gridcolor': 'white', 'linecolor': 'white', 'ticks': ''}}, 'coloraxis': {'colorbar': {'outlinewidth': 0, 'ticks': ''}}, 'colorscale': {'sequential': [[0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1, '#f0f921']], 'sequentialminus': [[0, '#0d0887'], [0.1111111111111111, '#46039f'], [0.2222222222222222, '#7201a8'], [0.3333333333333333, '#9c179e'], [0.4444444444444444, '#bd3786'], [0.5555555555555556, '#d8576b'], [0.6666666666666666, '#ed7953'], [0.7777777777777778, '#fb9f3a'], [0.8888888888888888, '#fdca26'], [1, '#f0f921']], 'diverging': [[0, '#8e0152'], [0.1, '#c51b7d'], [0.2, '#de77ae'], [0.3, '#f1b6da'], [0.4, '#fde0ef'], [0.5, '#f7f7f7'], [0.6, '#e6f5d0'], [0.7, '#b8e186'], [0.8, '#7fbc41'], [0.9, '#4d9221'], [1, '#276419']]}, 'xaxis': {'gridcolor': 'white', 'linecolor': 'white', 'ticks': '', 'title': {'standoff': 15}, 'zerolinecolor': 'white', 'automargin': True, 'zerolinewidth': 2}, 'yaxis': {'gridcolor': 'white', 'linecolor': 'white', 'ticks': '', 'title': {'standoff': 15}, 'zerolinecolor': 'white', 'automargin': True, 'zerolinewidth': 2}, 'scene': {'xaxis': {'backgroundcolor': '#E5ECF6', 'gridcolor': 'white', 'linecolor': 'white', 'showbackground': True, 'ticks': '', 'zerolinecolor': 'white', 'gridwidth': 2}, 'yaxis': {'backgroundcolor': '#E5ECF6', 'gridcolor': 'white', 'linecolor': 'white', 'showbackground': True, 'ticks': '', 'zerolinecolor': 'white', 'gridwidth': 2}, 'zaxis': {'backgroundcolor': '#E5ECF6', 'gridcolor': 'white', 'linecolor': 'white', 'showbackground': True, 'ticks': '', 'zerolinecolor': 'white', 'gridwidth': 2}}, 'shapedefaults': {'line': {'color': '#2a3f5f'}}, 'annotationdefaults': {'arrowcolor': '#2a3f5f', 'arrowhead': 0, 'arrowwidth': 1}, 'geo': {'bgcolor': 'white', 'landcolor': '#E5ECF6', 'subunitcolor': 'white', 'showland': True, 'showlakes': True, 'lakecolor': 'white'}, 'title': {'x': 0.05}, 'mapbox': {'style': 'light'}}}, 'title': {'text': '目的関数プロット'}, 'xaxis': {'title': {'text': '成功した解析数'}, 'type': 'linear', 'range': [0.7173255954539959, 5.282674404546004], 'autorange': False}, 'yaxis': {'title': {'text': 'Mises Stress'}, 'type': 'linear', 'range': [1194338.1744483153, 6109662.126322151], 'autorange': False}, 'transition': {'duration': 1000}, 'clickmode': 'event+select'}}
-
             # get point location
             pt = hoverData["points"][0]
 
@@ -469,10 +540,14 @@ class MainGraph(AbstractPage):
             bbox = pt['bbox']
 
             # get relative location of point
+            if 'xaxis' not in figure['layout']:
+                raise PreventUpdate
             xrange = figure['layout']['xaxis']['range']
             # yrange = figure['layout']['yaxis']['range']
 
-            is_left = pt['x'] < np.mean(xrange)
+            # trial の x は plotly 上 categorical 扱い
+            # にしているので float に直す
+            is_left = float(pt['x']) < np.mean(xrange)
 
             # デフォルトでは Hover が Point に重なり、
             # Hover した瞬間に Un-hover する場合があるので
@@ -491,7 +566,6 @@ class MainGraph(AbstractPage):
             bbox['y0'] = bbox['y0'] + 80
             bbox['y1'] = bbox['y1'] + 80
 
-
             # get row of the history from customdata defined in main_figure
             if 'customdata' not in pt.keys():
                 raise PreventUpdate
@@ -501,7 +575,7 @@ class MainGraph(AbstractPage):
 
             trial = pt['customdata'][0]
 
-            df = self.data_accessor()
+            df = self.application.get_df()
             row = df[df['trial'] == trial]
 
             # create component
@@ -526,13 +600,12 @@ class MainGraph(AbstractPage):
             return True, bbox, tooltip_layout, direction
 
     def create_formatted_parameter(self, row) -> Component:
-        meta_columns = self.application.history.meta_columns
-        pd.options.display.float_format = '{:.4e}'.format
-        parameters = row.iloc[:, np.where(np.array(meta_columns) == 'prm')[0]]
-        names = parameters.columns
-        values = [f'{value:.3e}' for value in parameters.values.ravel()]
+
+        prm_names = self.application.history.prm_names
+        prm_values = row[prm_names].values.ravel()
+
         data = pd.DataFrame(dict(
-            parameter=names, value=values
+            parameter=prm_names, value=prm_values
         ))
         table = dash_table.DataTable(
             columns=[{'name': col, 'id': col} for col in data.columns],
@@ -541,7 +614,7 @@ class MainGraph(AbstractPage):
         return table
 
     def create_formatted_objective(self, row) -> Component:
-        meta_columns = self.application.history.meta_columns
+        meta_columns = self.application.history._records.column_manager.meta_columns
         pd.options.display.float_format = '{:.4e}'.format
         objectives = row.iloc[:, np.where(np.array(meta_columns) == 'obj')[0]]
         names = objectives.columns
@@ -557,15 +630,14 @@ class MainGraph(AbstractPage):
 
     def create_image_content_if_femtet(self, trial) -> Component:
         img_url = None
-        meta_columns = self.application.history.meta_columns
-        if meta_columns[0] != '':
-            extra_data = json.loads(meta_columns[0])
+        extra_data = self.application.history.additional_data
+        if extra_data:
             if 'femprj_path' in extra_data.keys():
                 # get img path
                 femprj_path = extra_data['femprj_path']
                 model_name = extra_data['model_name']
                 femprj_result_dir = femprj_path.replace('.femprj', '.Results')
-                img_path = os.path.join(femprj_result_dir, f'{model_name}_trial{trial}.jpg')
+                img_path = os.path.join(femprj_result_dir, f'{model_name}_trial_{trial}.jpg')  # FIXME: FemtetInterface のメソッドを使う
                 if os.path.exists(img_path):
                     # create encoded image
                     with open(img_path, 'rb') as f:
@@ -574,7 +646,9 @@ class MainGraph(AbstractPage):
                     img_url = 'data:image/jpeg;base64, ' + encoded_image
         return html.Img(src=img_url, style={"width": "200px"}) if img_url is not None else html.Div()
 
-    def get_fig_by_tab_id(self, tab_id, with_length=False, kwargs: dict = None):
+    def get_fig_by_tab_id(self, tab_id, with_length=False, kwargs: dict = None) -> (
+        go.Figure | tuple[go.Figure, int]
+    ):
         # If the history is not loaded, do nothing
         if self.application.history is None:
             raise PreventUpdate
@@ -589,18 +663,14 @@ class MainGraph(AbstractPage):
             creator = creators[0]
 
         # create figure
-        df = self.data_accessor()
+        df = self.application.get_df()
+        if len(df.columns) == 0:
+            raise PreventUpdate
+        if len(df) == 0:
+            raise PreventUpdate
         kwargs = kwargs or {}
         fig = creator(self.application.history, df, **kwargs)
         if with_length:
             return fig, len(df)
         else:
             return fig
-
-    def data_accessor(self) -> pd.DataFrame:
-        from pyfemtet.opt.visualization._process_monitor.application import ProcessMonitorApplication
-        if isinstance(self.application, ProcessMonitorApplication):
-            df = self.application.local_data
-        else:
-            df = self.application.history.get_df(valid_only=True)
-        return df