diff --git a/ivette/src/dome/renderer/controls/displays.tsx b/ivette/src/dome/renderer/controls/displays.tsx
index dc1c52d147975ca6473092703b1ee78f9e6189da..8bfbbb67fe8837ac78c2d188296bf453a9ca47a3 100644
--- a/ivette/src/dome/renderer/controls/displays.tsx
+++ b/ivette/src/dome/renderer/controls/displays.tsx
@@ -62,12 +62,16 @@ export function LCD(props: LabelProps): JSX.Element {
// --- Led
// --------------------------------------------------------------------------
-export const LEDStatusList = [
+const LEDStatusList = [
'active', 'inactive', 'positive', 'negative', 'warning'
] as const;
export type LEDstatus = typeof LEDStatusList[number] | undefined;
+export function jLEDstatus(js : string) : LEDstatus | undefined {
+ return LEDStatusList.find(elt => elt === js);
+}
+
export interface LEDprops {
/**
Led status:
diff --git a/ivette/src/dome/renderer/controls/icons.tsx b/ivette/src/dome/renderer/controls/icons.tsx
index e0055388c0f0680325acb058062f1452dc7acab2..66703eeed85bc351e4b371169b200f391949d2f1 100644
--- a/ivette/src/dome/renderer/controls/icons.tsx
+++ b/ivette/src/dome/renderer/controls/icons.tsx
@@ -95,12 +95,16 @@ export function SVG(props: SVGprops): null | JSX.Element {
// --- Icon Component
// --------------------------------------------------------------------------
-export const iconKindList = [
+const iconKindList = [
'disabled', 'selected', 'positive', 'negative', 'warning', 'default'
] as const;
export type IconKind = typeof iconKindList[number]
+export function jIconKind(js : string) : IconKind | undefined {
+ return iconKindList.find(elt => elt === js);
+}
+
/** Icon Component Properties */
export interface IconProps extends SVGprops {
/** Additional class name(s). */
diff --git a/ivette/src/dome/renderer/text/markdown.tsx b/ivette/src/dome/renderer/text/markdown.tsx
index 64c924b2fbdb80a9debd91d9a7be77072cc1a0d4..7d761255dc76960418ab329eb570bbcb4f9e2e52 100644
--- a/ivette/src/dome/renderer/text/markdown.tsx
+++ b/ivette/src/dome/renderer/text/markdown.tsx
@@ -26,36 +26,56 @@ import remarkCustomHeaderId from 'remark-custom-header-id';
import * as Themes from 'dome/themes';
import { classes } from 'dome/misc/utils';
-import { Icon, iconKindList } from 'dome/controls/icons';
+import { Icon, jIconKind } from 'dome/controls/icons';
import {
CodeBlock, atomOneDark, atomOneLight
} from "react-code-blocks";
-import { LED, LEDStatusList } from 'dome/controls/displays';
+import { jLEDstatus, LED } from 'dome/controls/displays';
export interface Pattern {
pattern: RegExp,
replace: (key: number, match?: RegExpExecArray) => JSX.Element | null
}
+/**
+ * iconTag allows you to replace the tag with an icon.
+ *
+ * The associated regex is `/(\[ex:\])?(\[icon-([^-\]]+)(-([^\]]+))?\])/g`.
+ *
+ * * first capture `[ex:]` (option): allows to write the second group without
+ * applying a replacement if exist
+ * * second capture : represents the icon with `ID` and `kind | color`
+ * * capture 3 : the icon Id
+ * * capture 4-5 (option): the kind or color of the icon
+ *
+ * Exemple :
+ * `[icon-TUNINGS-#FF0000]` this tag will be replaced by a red TUNINGS icon
+ */
export const iconTag: Pattern = {
- pattern: /(\[ex:\])?\[icon-([^-\]]+)(-([^\]]+))?\]/g,
+ pattern: /(\[ex:\])?(\[icon-([^-\]]+)(-([^\]]+))?\])/g,
replace: (key: number, match?: RegExpExecArray) => {
if(!match) return null;
- const id = match[2];
- const kind = iconKindList.find(elt => elt === match[4]);
- const color = !kind ? match[4] : undefined;
+ const id = match[3];
+ const kind = jIconKind(match[5]);
+ const color = !kind ? match[5] : undefined;
if(match[1] === "[ex:]") {
- return <span key={key}>{`[icon-${id}-${match[4]}]`}</span>;
+ return <span key={key}>{match[2]}</span>;
}
return <Icon key={key} id={id} kind={kind} fill={color}/>;
}
};
+/**
+ * ledTag allows you to replace the tag with an LED.
+ * The associated regex is `/\[led-([^\]]+)\]/g`.
+ *
+ * The capture `([^\]]+)` represents the LEDStatus.
+ */
export const ledTag: Pattern = {
pattern: /\[led-([^\]]+)\]/g,
replace: (key: number, match?: RegExpExecArray) => {
if(!match) return null;
- const status = LEDStatusList.find(elt => elt === match[1]);
+ const status = jLEDstatus(match[1]);
return <LED key={key} status={status} />;
}
};
@@ -67,6 +87,10 @@ export const ledTag: Pattern = {
/**
* Replace all tag in children.
* This function doesn't replace any tags added by a previous replacement.
+ *
+ * Patterns added to the table will be processed to make replacements
+ * in the markdown file. Markdown component provides two patterns,
+ * iconTag and ledTag
*/
function replaceTags(
children: React.ReactNode,
diff --git a/ivette/src/frama-c/plugins/plugins.md b/ivette/src/frama-c/plugins/callgraph/callgraph.md
similarity index 93%
rename from ivette/src/frama-c/plugins/plugins.md
rename to ivette/src/frama-c/plugins/callgraph/callgraph.md
index 896c3185a367f3af4e3de29c298e074339feb69a..a8f0a8ae39571d98725327188043e43ec36c5b0f 100644
--- a/ivette/src/frama-c/plugins/plugins.md
+++ b/ivette/src/frama-c/plugins/callgraph/callgraph.md
@@ -1,6 +1,4 @@
-# Plugins {#plugins}
-
-## Callgraph {#plugins-callgraph}
+# Callgraph {#callgraph}
This module provides a graphical display of the callgraph and makes it easy to highlight certain data, such as :
@@ -21,7 +19,7 @@ Below is a list of shortcuts:
This component is divided into 4 parts, the [titlebar](#plugins-callgraph-titlebar), the [toolbar](#plugins-callgraph-toolbar), a [panel](#plugins-callgraph-panel) and a [graph](#plugins-callgraph-graph).
-### Titlebar {#plugins-callgraph-titlebar}
+### Titlebar {#callgraph-titlebar}
The titlebar contains the name of the module on the left and the following buttons on the right:
@@ -30,7 +28,7 @@ The titlebar contains the name of the module on the left and the following butto
* [icon-PIN] : Automatically select node of the function selected in AST.
* [icon-HELP] : show this help modal.
-### Toolbar {#plugins-callgraph-toolbar}
+##Toolbar {#plugins-callgraph-toolbar}
The toolbar contains display and selection parameters on the left and graph management parameters on the right.
On the far right is the button for opening the side panel.
@@ -46,14 +44,14 @@ On the right:
* Horizontal and vertical distance management between graph nodes.
* [icon-SIDEBAR] : Opens or closes the side panel.
-### Panel {#plugins-callgraph-panel}
+## Panel {#callgraph-panel}
The panel displays additional information about the graph in general and about the properties of the selected nodes.
The filters above the list can be used to limit the amount of information, and are synchronised with the filters in the `Properties` component.
At the top right, 2 buttons allow you to change the side of the panel and close it.
-### Graph {#plugins-callgraph-graph}
+## Graph {#callgraph-graph}
The graph is in 3D but is displayed as a tree. This type of display prevents cycles from appearing in the graph.
@@ -62,7 +60,7 @@ If a cycle is detected :
* In the case of a recursive function: The link is deleted and the [icon-REDO-orange] icon is added to the node.
* In the case of a cycle on several functions: The cycles will be pre-selected and will appear in the selection button.
-#### Nodes
+### Nodes
The nodes display the name of the function and the following elements:
@@ -71,7 +69,7 @@ The nodes display the name of the function and the following elements:
* [icon-REDO-orange] : The function is recursive.
* [icon-DROP.FILLED-#882288][icon-DROP.FILLED-#73BBBB]: The function contains tainted properties.
-#### Edges
+### Edges
The edges are oriented and can take on different colours depending on the nodes selected.
diff --git a/ivette/src/frama-c/plugins/callgraph/components/titlebar.tsx b/ivette/src/frama-c/plugins/callgraph/components/titlebar.tsx
index 6ecf4e8128f1c3e84e56793abd1640154dddadc4..f20498b8b74ebc6b913e32c22621a6a2af64cdaf 100644
--- a/ivette/src/frama-c/plugins/callgraph/components/titlebar.tsx
+++ b/ivette/src/frama-c/plugins/callgraph/components/titlebar.tsx
@@ -28,7 +28,7 @@ import * as Dome from 'dome';
import { IconButton } from 'dome/controls/buttons';
import { Button, Inset } from 'dome/frame/toolbars';
import { HelpIcon } from 'dome/help';
-import docPlugins from '../../plugins.md?raw';
+import docCallgraph from '../callgraph.md?raw';
import { DocShowNodesButton } from './toolbar';
import { ledTag, iconTag } from 'dome/text/markdown';
@@ -86,10 +86,10 @@ export function CallgraphTitleBar(props: CallgraphTitleBarProps): JSX.Element {
/>
<Inset />
<HelpIcon
- label='Plugins - Callgraph'
- scrollTo={'plugins-callgraph'}
+ label='Callgraph'
+ scrollTo={'callgraph'}
patterns={[iconTag, ledTag, selectBtnTag, TSButtonTag]}
- >{ docPlugins }</HelpIcon>
+ >{ docCallgraph }</HelpIcon>
<Inset />
</Ivette.TitleBar>
);
diff --git a/ivette/src/sandbox/sandbox.md b/ivette/src/sandbox/sandbox.md
index ccc9ff3f982acf4066add0406c39c4d4c1915793..4913e44252baa99eedbb79fee101d97227ea1e41 100644
--- a/ivette/src/sandbox/sandbox.md
+++ b/ivette/src/sandbox/sandbox.md
@@ -101,6 +101,7 @@ You can used patterns to replace parts of the text by JSX Element.
There is one basic pattern to replace tags by an `Icon`, it name `iconTag` in markdown component .
* [icon-TUNINGS] : [ex:][icon-TUNINGS]
+* [icon-TUNINGS-#ff0000] : [ex:][icon-TUNINGS-#ff0000]
* [icon-TARGET] : [ex:][icon-TARGET]
* [icon-PIN] : [ex:][icon-PIN]