自動化されたpythonコードの視覚化。 パート3：新しいグラフィカルコード機能

前の部分へのリンク：

• パート 1-フローチャート、フローチャートを操作するための利用可能なツール、およびコードのグラフィカル表現を作成するために必要なすべてのグラフィカルプリミティブについて説明しました。
• パート 2-提案されたマイクロマークアップ言語である、コードのグラフィカル表現、実装および計画された機能の生成の実装（主にPythonで行われます）について説明しました。

このグラフィカルな表現をサポートする環境の例を以下の画像に示します。









グラフィカルコードサポート環境



記事の第3部では、コードのグラフィカル表現の新機能に焦点を当てます。

ささいなこと

2番目の部分が記述されて以来、グラフィックプリミティブの表示に使用される色を変更するためのインターフェイスと、グラフィックプリミティブによって表示されるテキストを変更するためのインターフェイスが追加されました。 どちらの場合も、インターフェイスは最小限であり、コンテキストメニューを使用します。









選択したグラフィック要素のコンテキストメニュー



ユーザーは1つ以上のプリミティブを選択し、マウスの右ボタンを押します。 表示されるコンテキストメニューで、目的の項目を選択できます（メニュー項目の可用性は動的に決定されます）。



最初の2つのメニュー項目のいずれかを選択すると、それぞれ色の選択またはテキストの入力のための追加のダイアログが表示されます。 入力が完了すると、必要なcmlコメントがソーステキストに追加/変更され、変更を考慮してダイアグラム全体がすぐに再描画されます。

プリミティブ抑制

環境を操作する過程で、画面に表示される情報量を減らすために、グラフィック要素を一時的に非表示にしたい場合があることに気付きました。 これは、特定のプログラム分析シナリオで役立ちます。 もちろん、そのような機能は、グラフィカルな表現のために実装するのは非常に簡単です。



次の候補が特定されました：ドキュメンテーション行、コメント、および除外ブロック。 プリミティブの抑制を制御するために、3つのボタンがグラフィカル表現のツールバーに追加されました。各ボタンは、押された状態と押された状態の2つの位置のいずれかになります。









ダイアグラムでのプリミティブ抑制の制御



ボタンは互いに独立しているため、抑制の任意の組み合わせを選択できます。 ボタンの状態を変更すると、チャートがすぐに再描画されます。つまり、文字通りマウスを1回クリックするだけで、現在表示されているパーツの数をすばやく変更できます。

ドキュメント行の抑制

Pythonは、モジュール、クラス、および関数のドキュメント行をサポートしています。 これらすべてのケースを表示するために、Codimensionは「scope」タイプのプリミティブを使用します。このスコープでは、ヘッダーの後にドキュメント行が配置されます。 例：









ドキュメンテーションライン付きの機能



ただし、ドキュメントの行はオプションであり、開発者がドキュメントを管理しなかった場合、Codimensionは対応するセクションをまったく描画しません。 例：









ドキュメンテーション行のない機能



ドキュメンテーションの行が非表示になると、セクションを描画しないことが可能になりますが、ダイアグラムを一目で理解することは不可能になります。ドキュメンテーションがまったくないか、非表示になります。 したがって、そのような決定が下されました-抑制されたドキュメントの行の代わりに、すべてのテキストの代わりにバッジのみが配置されるセクションを描きます。 バッジは1行よりも少ないスペースを占めるため、ドキュメントがそこにあることをすぐに理解できます。 また、ドキュメントの全文を含むセクションのツールチップを簡単に追加できます。 例：









ドキュメント行が抑制された機能



ドキュメントが膨大で、モジュールの最初の紹介が既に完了している場合、docstring抑制機能は非常に便利なようです。

コメント抑制

コメントは、チャート上でかなりのスペースを占めることもあります。 時にはそれらを抑制したいという願望があります。 ドキュメンテーション行と同じ理由でコメントをまったく描画しないのは不合理だと思われるため、コメントテキスト全体を含むツールチップをサポートする小さなプリミティブに置き換えることにしました。









コメントが表示されます









抑制されたコメント

除外ブロックの抑制

通常、例外を除くブロックにあるコードは、プログラム実行のメインパスにはありませんが、まれな例外を処理するのに役立ちます。 したがって、プログラムの主な目的を分析するとき、例外ブロックを抑制して小さなプリミティブとして表示できると便利なように見えます。









表示されているブロックを除く2つ









ブロック以外を抑制



プリミティブのツールチップには、各ブロックがインターセプトされていることを示すブロック以外の行が表示されます。

スマートスケーリング

現在の実装のCodimensionは、2種類のチャートスケーリングをサポートしています。 選択したフォントのサイズに基づいた通常の、または単なるスケーリング。 このスケーリングにより、フォントサイズが増減し、すべてのサイズが再計算されます。 スマートスケーリングにはいくつかの固定レベルが含まれ、各レベルでグラフの内容が変更されます。 次のレベルごとに、ダイアグラム内の要素がますます非表示になります。



各レベルに適切な短い名前を付けることはできなかったため、番号で示されます。 ツールバーのレベル切り替えを制御するために、現在のレベルのインジケーターと上下に移動するためのボタンが追加されます。









スマートズーム管理



レベルインジケータのツールチップが追加され、チャートに加えられた変更の説明が追加されました。



スマートスケーリングは、要素抑制設定と連携して機能します。 つまり、レベルにブロック以外の表示などが含まれる場合、対応するボタンを押すことで、ブロックを個別に抑制することができます。 以下の例を使用すると、コメント、ドキュメンテーション行、またはブロック以外は抑制されないと想定されます。

レベル0

これは最大の詳細レベルです。 すべてのグラフィック要素が表示されます。

レベル1

このレベルでは、コメントとドキュメントの行がチャートから消えます。 残りのグラフィックプリミティブはダイアグラムに残りますが、クラスヘッダーと関数ヘッダーを除き、それらのテキストは抑制されます。









スマートズーム：レベル1



このアイデアにより、コードの量とその複雑さに関するアイデアをすばやく得ることができます。ダイアグラム上の「ボックス」の集中度が高いほど、コードはより複雑になります。 このレベルの各グラフィックにはツールチップが追加され、抑制されたテキストが表示されます。

レベル2

このレベルでは、ダイアグラムは、スコープ（デコレーターを除く）と条件付き構造を使用して表示するプリミティブのままです。 このプレゼンテーションは、複雑さをすばやく評価することも目的としています。 実際、ネストと分岐は図に残ります。









スマートズーム：レベル2

レベル3

このレベルでは、クラスと関数のみが図に残ります。 この表示は「鳥瞰図」として考えられており、モジュール内の大きなオブジェクトのみが表示されたままです。









スマートズーム：レベル3

より多くのレベル

現時点では、スマートスケーリングのレベルの実用化の経験は非常に少ないです。 したがって、一般的なスマートスケーリングのアイデアだけでなく、どのレベルの有用性についても確固たる結論を引き出すことは困難です。 ただし、計画には4番の次のレベルの導入が含まれます。このモジュールには、ファイルシステムの一種である、モジュールの依存関係図が表示されます。 中央には、現在のモジュールのプリミティブを配置でき、その周囲にインポートしたモジュールのプリミティブを配置できます。 したがって、現在の依存関係を視覚的に評価することができます。



興味深いことに、スマートスケーリングの実装には多くの労力は必要ありませんでした。 グラフィック表示では、コンテンツの操作が非常に簡単であることがわかりました。 したがって、実験目的のためのいくつかの新しい中間レベルの導入は非常に迅速に実行できます。

グループ

機能の基本的な考え方は単純です。グループ内の複数のグラフィック要素を結合し、グループを新しいシグネチャを持つ1つのグラフィック要素に折りたたんで展開する機会を与えることです。 ユースケースは、例えばそのようなものであり得る。 開発者は、他の人が書いた新しいコードを使用して作業を開始します。 分析の過程で、徐々に理解が深まり、これにより、たとえば10個のブロックで構成されるコードが作成されます。 次に、開発者はこれらのブロックをグループにまとめ、適切なテキストを提供します。 さらに分析すると、グループは画面上で最小化されたままになります。つまり、ダイアグラム上では、10個の要素ではなく、1つしか存在しないため、その後の分析が容易になります。 もちろん、グループはネストすることができ、モジュール内のグループの数に制限はありません。



初期開発時にグループの使用を禁止する人はいません。 プログラマーはグループを作成できます。これにより、後で一緒に作業する人のコード分析が容易になります。



グループは無制限のネストをサポートしているため、コードに3番目の次元の類似性を導入すると見なすことができます。 最初の2つは図で、3つ目は折りたたまれたグループで、内部を見ることができます。

グループのCML

チャートにグループを描くには、Codimensionがどこから始まり、どこで終わるかを知る必要があります。 コードに適切なマークを残すために、Codimension Markup Languageのコメントでマイクロマークアップ言語が使用されます。

# cml 1 gb id=101 title="Module imports" import sys import logging import json # cml 1 ge id=101
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初のコメントにはgbコード（group beginという単語から）があり、グループの最初の要素の前にあります。 2番目のコメントにはgeコード（group endという単語から）があり、グループの最後の要素の後にあります。 Codimensionは、コメントが必須のid属性の値とペアになっていることを理解します。これは任意の文字列にすることができます。



明らかに、グループの形成には多くの制限があります。 グループには、1つの入力と1つの出力が必要です。 チャート上のグループの要素を選択する場合、すべての要素を隙間なく選択する必要があります。 if条件が選択されている場合、すべてのブランチも選択する必要があります。 ループの場合、同様の要件がelseコンストラクトに関連付けられています。elseコンストラクトが存在する場合、両方の部分を選択し、ループ自体とelseブロックを選択する必要があります。 同様に、try-except-else-finallyのコンポーネントを分解することはできません。 ユーザーインターフェイスでグループ化が許可されている場合、これらすべての制限が考慮されます。



さらに、グループの作業の一環として、Pythonパーサーの変更が必要でした。 技術の初期設計では、最終コメントを支持しないことが決定されました。 ただし、グループの場合、このような結論のコメントは絶対に必要です。 たとえば、グループはifブランチのいずれかのすべての要素を結合できます。

 item = self.__processes[index] if item.widget: # cml 1 gb id=102 title="Script started" msg = item.widget.appendIDEMessage('Script started') item.procWrapper.startTime = msg.timestamp # cml 1 ge id=102
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、グループを終了するコメントはifブランチに属している必要があります。これは以前に提供されていません。



グループの場合、デフォルトの色を変更する機能も追加されました。 これを行うために、冒頭のcmlコメントで、背景、インク、およびストロークの色を設定するためのオプションの属性がサポートされています。

グループのグラフィックス

グループをレンダリングするには、折りたたまれたグループ、展開されたグループ、空のグループの3種類のプリミティブが必要です。



折り畳まれたグループの場合、そのようなプリミティブは、いくつかの要素がその背後に隠されていることがすぐに明らかになり、明らかにできることが望ましいです。 また、プリミティブのレンダリングは、選択されているかどうかに関係なく単純であることが望ましいです。 その結果、ダブルストロークの長方形が選択され、その中にグループヘッダーが配置されました。









崩壊したグループ



現時点では、選択したプリミティブに完全に満足することはできないため、将来、他のプリミティブに置き換えられる可能性があります。



開示されたグループはその境界を示す必要があり、さらにグループの見出しをすばやく確認できる必要があります。 境界線を「見やすく」するために、開いたグループの長方形が破線で描かれます。 開いたグループのフィールドを広くすることに特別な意味はないので、点線は別の要素である場合よりもプリミティブの近くに描かれます。









開示グループ



開いたグループの左上隅に、その「敏感な点」が描かれます。 マウスカーソルをその上に置くと、グループのアウトラインが実線で描画され、そのタイトルがグループの上に表示されます。









開示グループの「センシティブポイント」



必要に応じて、グループヘッダーに加えて、いくつかのコントロールボタンを追加できます。 これにより、最小限のマウスクリックでアクションを実行できます。



空のグループには何もありませんが、たとえば、見出しを含めることができます。 将来、グラフィカル表現の編集機能が表示されたら、新しい要素を空のグループに追加できます。 したがって、空のグループを描画する必要があります。 ストロークのある長方形が選択されます。









空のグループ



空のグループと折りたたまれたグループのプリミティブ間の類似性は明らかです。 したがって、折りたたまれたグループのプリミティブが変更された場合、空のグループに対して対応する変更を行う必要があります。



グループ管理は、コンテキストメニューから実行します。 グループを作成するには、必要なプリミティブを選択し、コンテキストメニューからグループ項目を選択します...グループヘッダーを入力すると、必要なCMLコメントがコードに追加され、チャートがすぐに再描画されます。 この場合、新しく作成されたグループは最小化された形式で描画されます。



グループを使用する他のすべての操作（開く、非表示、削除、タイトルの編集、色の変更）は、グループコンテキストメニューからの選択によって実行されます。

試し方

Codimension IDEをインストールすることにより、新しい機能を試すことができます。 CodimensionはLinuxおよびMacをサポートしています。 インストール手順はcodimension.orgで入手できます。