Skip to content

Commit e0a2808

Browse files
drorganvidezdrorganvidez
committed
feat: Improves UVL file UI
1 parent ed5ce49 commit e0a2808

4 files changed

Lines changed: 192 additions & 122 deletions

File tree

‎app/modules/factlabel/assets/js/scripts.js‎

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -96,14 +96,42 @@ function drawFMFactLabel(data) {
9696

9797
// Calculate maximum width for the label.
9898
//var maxWidth = Math.max(calculateTotalMaxWidth(data.metrics), calculateTotalMaxWidth(data.analysis));
99-
PROPERTY_HEIGHT = textSize("Any text", PROPERTY_FONT_FAMILY, PROPERTY_FONT_SIZE, "bold").height;// + MARGING_BETWEEN_PROPERTIES;
100-
maxIndentationWidth = Math.max(calculateMaxIndentationWidth(data.metrics), calculateMaxIndentationWidth(data.analysis));
101-
maxNameWidth = Math.max(calculateMaxNameWidth(data.metrics), calculateMaxNameWidth(data.analysis));
102-
maxValueWidth = Math.max(calculateMaxValueWidth(data.metrics), calculateMaxValueWidth(data.analysis));
103-
maxRatioWidth = Math.max(calculateMaxRatioWidth(data.metrics), calculateMaxRatioWidth(data.analysis));
104-
maxWidth = maxIndentationWidth + maxNameWidth + PROPERTIES_VALUES_SPACE + maxValueWidth + PROPERTIES_RATIO_SPACE + maxRatioWidth + LEFT_MARGING; //textSize("-".repeat(PROPERTY_INDENTATION), PROPERTY_FONT_FAMILY, PROPERTY_FONT_SIZE).width;
105-
chart.attr("width", maxWidth);
106-
//.attr("height", BAR_HEIGHT * 10 + BAR_HEIGHT * data.metadata.length + BAR_HEIGHT * data.metrics.length); // CAMBIAR EL *10 AJUSTANDOLO BIEN
99+
PROPERTY_HEIGHT = textSize("Any text", PROPERTY_FONT_FAMILY, PROPERTY_FONT_SIZE, "bold").height;
100+
101+
maxIndentationWidth = Math.max(
102+
calculateMaxIndentationWidth(data.metrics),
103+
calculateMaxIndentationWidth(data.analysis)
104+
);
105+
maxNameWidth = Math.max(
106+
calculateMaxNameWidth(data.metrics),
107+
calculateMaxNameWidth(data.analysis)
108+
);
109+
maxValueWidth = Math.max(
110+
calculateMaxValueWidth(data.metrics),
111+
calculateMaxValueWidth(data.analysis)
112+
);
113+
maxRatioWidth = Math.max(
114+
calculateMaxRatioWidth(data.metrics),
115+
calculateMaxRatioWidth(data.analysis)
116+
);
117+
118+
maxWidth =
119+
maxIndentationWidth +
120+
maxNameWidth +
121+
PROPERTIES_VALUES_SPACE +
122+
maxValueWidth +
123+
PROPERTIES_RATIO_SPACE +
124+
maxRatioWidth +
125+
LEFT_MARGING;
126+
127+
// en vez de width fijo, usamos viewBox y width="100%"
128+
const bboxHeight = 800; // valor temporal, luego lo ajustas con getBBox()
129+
chart
130+
.attr("viewBox", `0 0 ${maxWidth} ${bboxHeight}`)
131+
.attr("preserveAspectRatio", "xMinYMin meet")
132+
.attr("width", "100%")
133+
.attr("height", bboxHeight);
134+
107135

108136
x = d3.scaleLinear().domain([0, maxWidth]).range([0, maxWidth]);
109137

@@ -215,8 +243,11 @@ function drawFMFactLabel(data) {
215243
var maxHeight = yAnalysis + MARGING_BETWEEN_PROPERTIES + PROPERTY_HEIGHT * data.analysis.length;
216244
chart.append("rect").attr("id", "border");
217245
drawBorders(maxWidth, maxHeight);
218-
const bbox = chart.node().getBBox();
219-
chart.attr("height", bbox.height + 10);
246+
const bbox = chart.node().getBBox();
247+
chart
248+
.attr("viewBox", `0 0 ${maxWidth} ${bbox.height + 10}`)
249+
.attr("height", bbox.height + 10);
250+
220251
collapseSubProperties(data);
221252
}
222253

‎app/modules/hubfile/templates/hubfile/view_file.html‎

Lines changed: 113 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -128,108 +128,118 @@
128128

129129
<!-- Contenido principal con tabs -->
130130
<div class="col-md-9">
131+
132+
131133
<div class="card">
132-
<!-- Tabs nav -->
133-
<ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x fs-6 px-4 pt-4" id="fileTabs" role="tablist" style="border-bottom: none;">
134-
135-
136-
<li class="nav-item me-2" role="presentation">
137-
<button class="nav-link active" id="uvl-tab" data-bs-toggle="tab" data-bs-target="#uvl" type="button" role="tab" aria-controls="uvl" aria-selected="true">
138-
<i class="ki-duotone ki-message-text">
139-
<span class="path1"></span>
140-
<span class="path2"></span>
141-
<span class="path3"></span>
142-
</i> UVL
143-
</button>
144-
</li>
145-
<li class="nav-item" role="presentation">
146-
<button class="nav-link" id="factlabel-tab" data-bs-toggle="tab" data-bs-target="#factlabel" type="button" role="tab" aria-controls="factlabel" aria-selected="false">
147-
<i class="ki-duotone ki-graph">
148-
<span class="path1"></span>
149-
<span class="path2"></span>
150-
<span class="path3"></span>
151-
<span class="path4"></span>
152-
</i> FM Fact Label
153-
</button>
154-
</li>
155-
156-
<li class="nav-item dropdown ms-2">
157-
<button class="nav-link dropdown-toggle d-flex align-items-center" data-bs-toggle="dropdown" aria-expanded="false">
158-
<i class="ki-duotone ki-export me-2">
159-
<span class="path1"></span>
160-
<span class="path2"></span>
161-
</i>
162-
Export
163-
</button>
164-
<ul class="dropdown-menu">
165-
<li>
166-
<a class="dropdown-item" href="{{ url_for('hubfile.download_file', file_id=selected_file.id) }}">
167-
UVL
168-
</a>
169-
</li>
170-
<li>
171-
<a class="dropdown-item" href="{{ url_for('flamapy.to_glencoe', file_id=selected_file.id) }}">
172-
Glencoe
173-
</a>
174-
</li>
175-
<li>
176-
<a class="dropdown-item" href="{{ url_for('flamapy.to_cnf', file_id=selected_file.id) }}">
177-
DIMACS
178-
</a>
179-
</li>
180-
<li>
181-
<a class="dropdown-item" href="{{ url_for('flamapy.to_splot', file_id=selected_file.id) }}">
182-
SPLOT
183-
</a>
184-
</li>
185-
</ul>
186-
</li>
187-
188-
<li class="nav-item ms-2">
189-
<button type="button"
190-
class="nav-link d-flex align-items-center"
191-
onclick="copyCurrentUVL(this)"
192-
data-bs-toggle="tooltip"
193-
data-bs-placement="bottom"
194-
title="Copy to clipboard">
195-
<i class="ki-duotone ki-copy"></i>&nbsp;Copy
196-
</button>
197-
</li>
198-
199-
<li class="nav-item ms-auto" role="presentation">
200-
<a href="{{ selected_file.get_ide_url() }}"
201-
target="_blank"
202-
rel="noopener noreferrer"
203-
class="btn btn-sm btn-secondary d-flex align-items-center">
204-
<img src="{{ url_for('static', filename='media/logos/flamapy_ide.svg') }}"
205-
alt="Flamapy IDE"
206-
height="20"
207-
class="me-2" />
208-
<i class="ki-outline ki-exit-right-corner fs-2"></i>
209-
</a>
210-
</li>
211-
212-
213-
</ul>
214-
215-
<!-- Tabs content -->
216-
<div class="tab-content p-4">
217-
<!-- UVL Tab -->
218-
<div class="tab-pane fade show active" id="uvl" role="tabpanel" aria-labelledby="uvl-tab">
219-
<div class="bg-light rounded border p-4">
134+
135+
136+
<ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x fs-6 px-4 pt-4" id="fileTabs" role="tablist" style="border-bottom: none;">
137+
138+
<li class="nav-item" role="presentation">
139+
<span class="nav-link disabled text-bold fw-bold">
140+
{{ selected_file.name }}
141+
</span>
142+
</li>
143+
144+
<li class="nav-item ms-2" role="presentation">
145+
<a href="javascript:void(0);"
146+
onclick="copyCurrentUVL(this)"
147+
class="btn btn-sm btn-secondary d-flex align-items-center"
148+
data-bs-toggle="tooltip"
149+
data-bs-placement="bottom"
150+
title="Copy to clipboard">
151+
<i class="ki-duotone ki-copy"></i>
152+
Copy
153+
</a>
154+
</li>
155+
156+
<li class="nav-item ms-auto dropdown" role="presentation">
157+
<a class="btn btn-sm btn-secondary dropdown-toggle d-flex align-items-center"
158+
href="#"
159+
id="exportDropdown"
160+
data-bs-toggle="dropdown"
161+
aria-expanded="false">
162+
<i class="ki-duotone ki-file-right">
163+
<span class="path1"></span>
164+
<span class="path2"></span>
165+
</i>
166+
Export
167+
</a>
168+
<ul class="dropdown-menu" aria-labelledby="exportDropdown">
169+
<li>
170+
<a class="dropdown-item" href="{{ url_for('hubfile.download_file', file_id=selected_file.id) }}">
171+
UVL
172+
</a>
173+
</li>
174+
<li>
175+
<a class="dropdown-item" href="{{ url_for('flamapy.to_glencoe', file_id=selected_file.id) }}">
176+
Glencoe
177+
</a>
178+
</li>
179+
<li>
180+
<a class="dropdown-item" href="{{ url_for('flamapy.to_cnf', file_id=selected_file.id) }}">
181+
DIMACS
182+
</a>
183+
</li>
184+
<li>
185+
<a class="dropdown-item" href="{{ url_for('flamapy.to_splot', file_id=selected_file.id) }}">
186+
SPLOT
187+
</a>
188+
</li>
189+
</ul>
190+
</li>
191+
192+
193+
194+
<li class="nav-item ms-2" role="presentation">
195+
<a href="{{ selected_file.get_ide_url() }}"
196+
target="_blank"
197+
rel="noopener noreferrer"
198+
class="btn btn-sm btn-secondary d-flex align-items-center">
199+
<img src="{{ url_for('static', filename='media/logos/flamapy_ide.svg') }}"
200+
alt="Flamapy IDE"
201+
height="20"
202+
class="me-2" />
203+
<i class="ki-outline ki-exit-right-corner"></i>
204+
</a>
205+
</li>
206+
</ul>
207+
208+
209+
<div class="row p-4">
210+
<!-- UVL a la izquierda -->
211+
<div class="col-md-6">
212+
<div class="bg-light rounded border p-4 h-100">
213+
<img src="{{ url_for('static', filename='media/logos/uvl_logo.svg') }}"
214+
alt="UVL Logo"
215+
height="24"
216+
class="ms-auto mb-2" />
220217
<pre class="m-0" style="white-space: pre-wrap;">{{ uvl_content }}</pre>
221218
</div>
222219
</div>
223-
224-
<!-- Fact Label Tab -->
225-
<div class="tab-pane fade" id="factlabel" role="tabpanel" aria-labelledby="factlabel-tab">
226-
<div class="bg-light rounded border p-4">
227-
<div id="FMFactLabelWrapper" style="overflow-y: auto; max-height: 600px; overflow-x: auto;">
228-
<svg id="FMFactLabelChart" class="chart w-100"></svg>
229-
</div>
220+
221+
<!-- Fact Label a la derecha -->
222+
<div class="col-md-6">
223+
<div class="bg-light rounded border p-4 h-100">
224+
<img src="{{ url_for('static', filename='media/logos/factlabel_logo.svg') }}"
225+
alt="Fact Label Logo"
226+
height="24"
227+
class="ms-auto mb-2" />
228+
<div id="FMFactLabelWrapper" class="w-100" style="overflow-y: auto; max-height: 600px;">
229+
<svg id="FMFactLabelChart" class="chart w-100" preserveAspectRatio="xMinYMin meet"></svg>
230+
</div>
231+
232+
<style>
233+
#FMFactLabelWrapper, #FMFactLabelChart {
234+
width: 100% !important;
235+
}
236+
</style>
230237
</div>
231238
</div>
239+
240+
232241
</div>
242+
233243
</div>
234244
</div>
235245

@@ -242,28 +252,20 @@
242252
<script src="{{ url_for('factlabel.assets', subfolder='dist', filename='factlabel.bundle.js') }}"></script>
243253

244254
<script>
245-
document.addEventListener('DOMContentLoaded', function () {
246-
// Inicializar feather
247-
feather.replace();
248-
249-
// Cargar el gráfico solo al hacer clic en la pestaña
250-
const factLabelTab = document.getElementById('factlabel-tab');
251-
let chartLoaded = false;
252-
253-
factLabelTab.addEventListener('shown.bs.tab', function () {
254-
if (!chartLoaded) {
255-
renderFactLabel({{ selected_file.id }});
256-
chartLoaded = true;
257-
}
258-
});
259-
});
255+
256+
document.addEventListener('DOMContentLoaded', function () {
257+
feather.replace();
258+
259+
// Cargar Fact Label automáticamente
260+
renderFactLabel({{ selected_file.id }});
261+
});
260262

261263
function renderFactLabel(fileId) {
262264
fetch(`/factlabel/view/${fileId}`)
263265
.then(response => response.json())
264266
.then(data => {
265267
if (data.success) {
266-
drawFMFactLabel(data.content); // tu función D3
268+
drawFMFactLabel(data.content); // versión limpia mejorada
267269
} else {
268270
console.error("Error:", data.error);
269271
d3.select("#FMFactLabelChart").text("Error loading fact label.");
@@ -275,7 +277,6 @@
275277
});
276278
}
277279

278-
279280
$(function () {
280281
const table = $('#kt_files_table').DataTable({
281282
pageLength: 5,

‎app/static/media/logos/factlabel_logo.svg‎

Lines changed: 37 additions & 0 deletions
Loading

‎app/static/media/logos/uvl_logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)