You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: How to create custom components for Markdown.
4
-
---
5
-
6
-
To add custom components in AriaDocs, follow these steps:
7
-
8
-
1.**Create Your Component**: First, create your custom component in the `@components/markdown` folder. For example, you might create a file named `Outlet.tsx`.
9
-
10
-
2.**Import Your Component**: Next, open the `@lib/markdown.ts` file. This is where you'll register your custom component for use in Markdown.
11
-
12
-
3.**Add Your Component to the Components Object**: In the `@lib/markdown.ts` file, import your custom component and add it to the `components` object. Here’s how to do it:
13
-
14
-
```ts
15
-
importOutletfrom"@/components/markdown/outlet";
16
-
17
-
// Add custom components
18
-
const components = {
19
-
Outlet,
20
-
};
21
-
```
22
-
23
-
4.**Using Your Custom Component in Markdown**: After registering your component, you can now use it anywhere in your Markdown content. For instance, if your `Outlet` component is designed to display additional information, you can use it as follows:
24
-
25
-
### Markdown Example
26
-
27
-
```markdown
28
-
<Outlet>
29
-
This is some custom content rendered by the Outlet component!
30
-
</Outlet>
31
-
```
32
-
33
-
### Rendered Output
34
-
35
-
This will render the content inside the `Outlet` component, allowing you to create reusable and dynamic Markdown content.
36
-
37
-
38
-
By following these steps, you can extend the capabilities of your Markdown documentation and create a more engaging user experience.
description: This section provides an overview of how AriaDocs handles links and images in Markdown.
4
-
---
5
-
6
-
In AriaDocs, all links and images written in Markdown are automatically converted to their respective Next.js components. This allows for better optimization and performance in your application.
7
-
8
-
## Links
9
-
10
-
When you create a link in your Markdown, it is converted to the Next.js `Link` component. This enables client-side navigation and improves loading times. Here’s an example of how a Markdown link is transformed:
Similarly, images in Markdown are transformed into the Next.js `Image` component. This allows for automatic image optimization, such as lazy loading and resizing, which enhances performance and user experience. Here’s an example:
31
-
32
-
### Markdown
33
-
34
-
```markdown
35
-
36
-
```
37
-
38
-
### Rendered Output
39
-
40
-
The above Markdown is converted to:
41
-
42
-
```jsx
43
-
<Image
44
-
src="https://via.placeholder.com/150"
45
-
alt="Alt text for the image"
46
-
width={800}
47
-
height={350}
48
-
/>
49
-
```
50
-
51
-
## Benefits
52
-
53
-
-**Performance Optimization**: Automatic conversion to Next.js components ensures optimized loading of images and links.
54
-
-**Improved User Experience**: Client-side navigation with Next.js `Link` improves the browsing experience.
55
-
-**Responsive Images**: Next.js `Image` component handles responsive images, providing the best quality for various device sizes.
56
-
57
-
By utilizing these features, you can ensure that your documentation is not only visually appealing but also performs efficiently.
description: This section provides an overview of the custom components available in AriaDocs.
4
-
---
5
-
6
-
Explore the custom components we've defined for easy integration and development within your projects. Each component is designed to enhance your workflow and streamline your development process.
description: This section previews the stepper component.
4
-
---
5
-
6
-
In this guide, we utilize a custom `Stepper` component, specifically designed for AriaDocs, which enables users to display step-by-step instructions directly within the markdown render.
7
-
8
-
## Preview
9
-
##
10
-
11
-
<Stepper>
12
-
<StepperItemtitle="Step 1: Clone the AriaDocs Repository">
13
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum, felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc dolor in lorem.
14
-
</StepperItem>
15
-
<StepperItemtitle="Step 2: Access the Project Directory">
16
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ipsum nec nulla ultricies porttitor et non justo.
20
-
</StepperItem>
21
-
</Stepper>
22
-
23
-
## Code
24
-
25
-
```jsx
26
-
<Stepper>
27
-
<StepperItem title="Step 1: Clone the AriaDocs Repository">
28
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum, felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc dolor in lorem.
29
-
</StepperItem>
30
-
<StepperItem title="Step 2: Access the Project Directory">
31
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
| USE-HASHING | boolean | true | Whether to use hashing in the comparison |
47
+
| INCLUDE-DEPENDENCIES | boolean | true | Whether to include dependencies in the comparison |
48
+
| MODEL-LEVEL-COMPARISON-DERIVED-FROM-CLASS-LEVEL-COMPARISON | boolean | true | Model-level comparison derived from class-level comparison. If false, elements will be compared on model level |
49
+
| HASHING-THRESHOLD | number | 0.5 | The threshold for hashing similarity |
50
+
| INCLUDE-ENUMS | boolean | true | Whether to include enums in the comparison |
51
+
| INCLUDE-ENUM-NAME | boolean | true | Whether to include enum names in the comparison |
52
+
| INCLUDE-CLASS-ATTRIBUTES | boolean | true | Whether to include class attributes in the comparison |
53
+
| INCLUDE-CLASS-OPERATIONS | boolean | true | Whether to include class operations in the comparison |
54
+
| INCLUDE-CLASS-PARAMETERS | boolean | true | Whether to include class parameters in the comparison |
55
+
| INCLUDE-CLASS-REFERENCES | boolean | true | Whether to include class references in the comparison |
56
+
| INCLUDE-CLASS-SUPERTYPES | boolean | true | Whether to include class supertypes in the comparison |
57
+
| INCLUDE-ATTRIBUTE-NAME | boolean | true | Whether to include attribute names in the comparison |
58
+
| INCLUDE-ATTRIBUTE-CONTAINING-CLASS | boolean | true | Whether to include the class containing the attribute in the comparison |
59
+
| INCLUDE-ATTRIBUTE-TYPE | boolean | true | Whether to include attribute types in the comparison |
60
+
| INCLUDE-ATTRIBUTE-LOWER-BOUND | boolean | true | Whether to include attribute lower bounds in the comparison |
61
+
| INCLUDE-ATTRIBUTE-UPPER-BOUND | boolean | true | Whether to include attribute upper bounds in the comparison |
62
+
| INCLUDE-ATTRIBUTE-IS-ORDERED | boolean | true | Whether to include if the attribute is ordered |
63
+
| INCLUDE-ATTRIBUTE-IS-UNIQUE | boolean | true | Whether to include if the attribute is unique |
64
+
| INCLUDE-REFERENCES-NAME | boolean | true | Whether to include reference names in the comparison |
65
+
| INCLUDE-REFERENCES-CONTAINING-CLASS | boolean | true | Whether to include the class containing the reference in the comparison |
66
+
| INCLUDE-REFERENCES-IS-CONTAINMENT | boolean | true | Whether to include if the reference is containment |
67
+
| INCLUDE-REFERENCES-LOWER-BOUND | boolean | true | Whether to include reference lower bounds in the comparison |
68
+
| INCLUDE-REFERENCES-UPPER-BOUND | boolean | true | Whether to include reference upper bounds in the comparison |
69
+
| INCLUDE-REFERENCES-IS-ORDERED | boolean | true | Whether to include if the reference is ordered |
70
+
| INCLUDE-REFERENCES-IS-UNIQUE | boolean | true | Whether to include if the reference is unique |
71
+
| INCLUDE-OPERATION-NAME | boolean | true | Whether to include operation names in the comparison |
72
+
| INCLUDE-OPERATION-CONTAINING-CLASS | boolean | true | Whether to include the class containing the operation in the comparison |
73
+
| INCLUDE-OPERATION-PARAMETERS | boolean | true | Whether to include operation parameters in the comparison |
74
+
| INCLUDE-PARAMETER-NAME | boolean | true | Whether to include parameter names in the comparison |
75
+
| INCLUDE-PARAMETER-TYPE | boolean | true | Whether to include parameter types in the comparison |
76
+
| INCLUDE-PARAMETER-OPERATION-NAME | boolean | true | Whether to include the operation name associated with the parameter in the comparison |
77
+
78
+
Based on the choice of algorithm, if implemented in the tool, the relevant instance
79
+
of the class is initialized; that instance is named as ”alg”. The function
80
+
”getClassLevelMetrics” is called that uses the instance of the algorithm to
81
+
compute the ven diagram for each of the elements of the model. The ven
82
+
diagram provides information about the true positives, false positives, and
83
+
false negatives. if the MODEL-LEVEL-COMPARISON-DERIVED-FROM-
84
+
CLASS-LEVEL-COMPARISON configuration variable (refer to configuration table) is set to True then the classLevelMetrics and the Ven Diagram
85
+
for enumerations (computed separately because they are present at the root
86
+
of the model instead of being part of a class), are used to generate the the
87
+
model level metrics; else, the model level metrics are generated by comparing model elements on model level. We have not described the functions ”get-
88
+
ConfusionMatrixForAllElements()” and ”getMLM(clm, VDEnum”)because
89
+
they are trivial.
90
+
91
+
## Hashing Based Algorithm
92
+
The hashing based algorithm has been implemented as an extension of the
93
+
abstract model comparison class. The inspiration for this algorithm
94
+
comes from the [Xiao He’s paper](https://www.researchgate.net/publication/380177673_Accelerating_similarity-based_model_matching_using_dual_hashing); an extension of EMF-Compare. Our
95
+
algorithm computes the venn diagrams for each of the following elements;
96
+
classes, references, attributes, operations, superTyes, and Enums. VennDiagram is a data structure (implemented as a DTO (Data Transfer Object))
The pseudocode in Pseudocode 2 details the steps to compute the venn diagrams provided
100
+
with two arrays of the same types of elements. At first, a hash value of each of
101
+
the elements is computed, which is use to index the element. This is followed
102
+
by finding pairs of elements that have the maximum similarity score; these
103
+
pairs are included in the intersection section of the venn diagram. For the
104
+
elements in model 1 that were not paired with any element in model 2; are
105
+
included in the set of elements only in model 1, and vice versa.
106
+
The algorithm used to compute similarity is detailed in Pseudocode 3.
107
+
The ”computeSimilarity” function computes a dot product of the two hash
108
+
values. It expects the hash to be a 64 bit binary value. The usage of this
109
+
function can be seen in Pseudocode 2. The ”computeHash” function takes
110
+
input an element and computes a sum of the hash values of each of its
111
+
features. The function ”getHashValue” is ued to compute a 64 bit binary
112
+
hash of each individual feature in the element. If the feature is a text-based
113
+
feature then the ”hashNGram” function is used to compute the 64 bit binary
114
+
hash for that feature value. This technique is inspired from the ”hashNGram”
115
+
function proposed by Xiao He. The hashNGram function breaks the
116
+
string into bi-grams and for each bi-gram computes a 64 bit binary hash; these
117
+
hash values are summed up to get a 64-bit hash value for the feature. We
118
+
have introduced a variation to accommodate for classes that are composed of only 1 letter, for example ”public class A ”. We have added an if condition
119
+
to check if such is the case, then the hashCode for that letter is returned
120
+
instead of computing the bigrams.
121
+
122
+
### Pseudocode 2
123
+
<imgsrc="/get_venn_algo.png"alt="venn"/>
124
+
125
+
### Pseudocode 3
126
+
<imgsrc="/semantic_sim_algo.png"alt="venn"/>
127
+
This algorithm defines a class SemanticSimilarity to compute the semantic
128
+
similarity between two emfatic files. The process begins by extracting and
129
+
tokenizing text from the given code using NLTK, then removes packages,
130
+
namespace declaration and comments. Package declerations are removed
131
+
because the focus of the tools is to find semantic similarity between class
132
+
diagrams; it is not necessary for the two models to have the same package
133
+
structure for them to be semantically similar. The algorithm tokenizes the
134
+
remaining text and converts it into a list of tokens. Then, it uses TF-IDF
135
+
(Term Frequency-Inverse Document Frequency) to calculate the importance
136
+
of each word in the documents and obtains word embeddings using pre-
137
+
trained Word2Vec vectors from the GoogleNews-vectors-negative300 word
138
+
embedding model. We have provided support for 2 models; glove6b50d and
139
+
GoogleNews-vectors-negative300 that can be configured from the environ-
140
+
ment variable of the api. These embeddings are weighted by the TF-IDF
141
+
scores to get a weighted average embedding for each document. Finally, the
142
+
cosine similarity between the embeddings of the original and predicted code
143
+
files is computed to determine their semantic similarity, which is then re-
0 commit comments