modelset.github.io/index.html at master · modelset/modelset.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ModelSet</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>

  <!-- DEV -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.js"></script>
  <!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>-->

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <div class="jumbotron">
    <div class="container">
      <h1 class="display-4">ModelSet</h1>
      <!-- <p class="lead">A dataset for machine learning in software modelling</p> -->
    </div>
  </div>

  <div class="container">
    <div id="vue-app">
<!--       <p class="text-center">
        <button v-for="(category,index) in categories" type="button" class="btn btn-secondary" data-toggle="button" aria-pressed="false" v-on:click="toggleCategory(category)">
          {{ category }}
        </button>
      </p> -->

      <div class="row">
        <div class="col-8">
          <p>
            <span style="font-variant: small-caps; font-weight: bold;">ModelSet</span> is a dataset composed of 5,460 Ecore and 5,120 UML labelled models, making a total of 10,580 models. Ecore models have been collected from GitHub, whereas UML models have been retrieved from GenMyModel repositories.
          </p>
<!--           <p>
            There is a total of 61,656 labels (23,538 and 38,118 labels in Ecore and UML, respectively), with an average
            number of labels per model of 5.83 (4.31 and 7.44 in Ecore and UML, respectively).
          </p> -->
          <p>
            The main label of <span style="font-variant: small-caps; font-weight: bold;">ModelSet</span> is named <em>category</em>, which represents a type of models sharing a similar application domain. We also assigned other labels to complement the metadata of the models (e.g., purpose, notation or tool). We believe that most of the labels we used are self-descriptive and we invited you to explore the dataset and labels.
          </p>
	  <p>
	    Please, check out the following resources to use the dataset.
	    <ul>
	      <li><a href="https://github.com/modelset/modelset-dataset">Main GitHub repository</a> which includes the release packages</li>
	      <li>Paper: <a href="http://sanchezcuadrado.es/papers/modelset.pdf">ModelSet: a dataset for machine learning in model-driven engineering</a></li>
	      <li><a href="https://models-lab.github.io/blog/2021/modelset">Blog post</a> with an step-by-step example</li>

	    </ul>
	  </p>
	  <!--
	  <p>
	    You can download the complete artifact from <a href="https://figshare.com/s/5a6c02fa8ed20782935c">figshare</a>. Check out our SoSyM <a href="http://sanchezcuadrado.es/papers/modelset.pdf">paper</a> to know more about how ModelSet has been created and some concrete applications.
	  </p>
	  -->
	  <p>
	    This dataset is maintained by José Antonio Hernández López, Javier Cánovas Izquierdo and Jesús Sánchez Cuadrado.
	  </p>
        </div>
        <div class="col-4">
          <figure class="figure">
            <img src="imgs/tagCloud1.JPG" class="figure-img img-fluid rounded" alt="ModelSet tag cloud">
            <figcaption class="figure-caption">Tag cloud generated from the set of categories of <span style="font-variant: small-caps; font-weight: bold;">ModelSet</span>.</figcaption>
          </figure>
        </div>
      </div>

      <hr/>

      <div class="row">
        <p>
          You can browse the models included in <span style="font-variant: small-caps; font-weight: bold;">ModelSet</span> by filtering via category. Once the models are listed, click on the name of the model to expand the information and explore the data.
        </p>
        <div class="dropdown">
          <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Select one or more categories to show
          </a>

          <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" v-for="(category,index) in categories" href="#" v-on:click="toggleCategory(category)" v-bind:class="{ active: selectedCategories.includes(category) }">
              {{ category }}
            </a>
          </div>
        </div>
      </div>


      <table v-show="listToShow.length > 0" class="table table-sm table-hover">
      <thead>
        <tr>
          <th v-for="(column,index) in columns">
            <a href="#" v-on:click="sortBy(column)" v-bind:class="{ active: sortKey == column }">
              {{ column[0].toUpperCase() + column.slice(1) }}
            </a>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(model,index) in listToShow">
          <td>
            <a data-toggle="collapse" v-bind:href="'#model' + model.id" role="button" aria-expanded="false" aria-controls="collapseModel">
                  {{ model.name }}
            </a>
            <span class="model-source">{{model.source}}</span>
            <div class="collapse" v-bind:id="'model' + model.id">
              <div class="card card-body">
                <span class="card-item">
                  <strong>URL:</strong>
                  <a v-bind:href="model.url" target="_blank">{{model.url}}</a>
                </span>
                <span class="card-item"><strong>Metadata:</strong>&nbsp;
                  <span v-for="(item, key, index) in model.metadata" class="model-metadata">
                    {{key}} : {{item[0]}}
                  </span>
                </span>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
      </table>

      <hr>

    </div>
  </div>

  <div class="footer">
  <div class="container">
    <p class="text-center">
    </p>
  </div>
  </div>

  <script src="js/app.js"></script>
  <!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->


</body>

</html>