Skip to content

Commit 0140d37

Browse files
author
Raihan Alam
committed
see more
1 parent c1bf2da commit 0140d37

File tree

1 file changed

+76
-26
lines changed

1 file changed

+76
-26
lines changed

‎src/promptlab/web/index.html‎

Lines changed: 76 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -557,10 +557,10 @@ <h1>PromptLab</h1>
557557
<th>Prompt Template Version</th>
558558
<th>Dataset</th>
559559
<th>Dataset Version</th>
560-
<th>Created At</th>
561560
<th>System Prompt</th>
562561
<th>User Prompt</th>
563562
<th>User ID</th>
563+
<th>Created At</th>
564564
</tr>
565565
</thead>
566566
<tbody id="tableBody"></tbody>
@@ -591,12 +591,12 @@ <h1>Prompt Templates</h1>
591591
<th>Name</th>
592592
<th>Description</th>
593593
<th>Version</th>
594-
<th>Created At</th>
595594
<th>System Prompt</th>
596595
<th>User Prompt</th>
597596
<th>Deployment Time</th>
598597
<th>Is Deployed</th>
599598
<th>User ID</th>
599+
<th>Created At</th>
600600
</tr>
601601
</thead>
602602
<tbody id="promptTemplateTableBody"></tbody>
@@ -616,9 +616,9 @@ <h1>Datasets</h1>
616616
<th>Name</th>
617617
<th>Description</th>
618618
<th>Version</th>
619-
<th>Created At</th>
620619
<th>File Path</th>
621620
<th>User ID</th>
621+
<th>Created At</th>
622622
</tr>
623623
</thead>
624624
<tbody id="datasetTableBody"></tbody>
@@ -763,25 +763,75 @@ <h2 style="margin-top:0;">Your Auth Token</h2>
763763
);
764764

765765
const tableBody = document.getElementById('tableBody');
766-
uniqueExperiments.forEach(exp => {
767-
const row = document.createElement('tr');
768-
const createdAt = exp.created_at ? new Date(exp.created_at).toLocaleString() : '-';
769-
row.innerHTML = `
770-
<td><input type="checkbox" class="experiment-checkbox" data-id="${exp.experiment_id}"></td>
771-
<td>${exp.experiment_id}</td>
772-
<td>${exp.completion_model}</td>
773-
<td>${exp.embedding_model}</td>
774-
<td>${exp.prompt_template_name}</td>
775-
<td>${exp.prompt_template_version}</td>
776-
<td>${exp.dataset_name}</td>
777-
<td>${exp.dataset_version}</td>
778-
<td>${createdAt}</td>
779-
<td>${exp.system_prompt_template.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</td>
780-
<td>${exp.user_prompt_template.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</td>
781-
<td>${exp.user_id ?? '-'}</td>
782-
`;
783-
tableBody.appendChild(row);
784-
});
766+
// Helper function to truncate text and add 'see more...'
767+
function getTruncatedPromptContent(text) {
768+
if (!text) return '-';
769+
const safeText = text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
770+
if (safeText.length <= 170) return safeText;
771+
const preview = safeText.slice(0, 170);
772+
return `<span class="truncated-text">${preview}</span> <a href="#" class="see-more-exp-link">see more...</a>`;
773+
}
774+
775+
uniqueExperiments.forEach(exp => {
776+
const row = document.createElement('tr');
777+
const createdAt = exp.created_at ? new Date(exp.created_at).toLocaleString() : '-';
778+
row.innerHTML = `
779+
<td><input type="checkbox" class="experiment-checkbox" data-id="${exp.experiment_id}"></td>
780+
<td>${exp.experiment_id}</td>
781+
<td>${exp.completion_model}</td>
782+
<td>${exp.embedding_model}</td>
783+
<td>${exp.prompt_template_name}</td>
784+
<td>${exp.prompt_template_version}</td>
785+
<td>${exp.dataset_name}</td>
786+
<td>${exp.dataset_version}</td>
787+
<td class="evaluation-cell">${getTruncatedPromptContent(exp.system_prompt_template)}</td>
788+
<td class="evaluation-cell">${getTruncatedPromptContent(exp.user_prompt_template)}</td>
789+
<td>${exp.user_id ?? '-'}</td>
790+
<td>${createdAt}</td>
791+
`;
792+
// Store full prompt for popup
793+
row.dataset.systemPrompt = exp.system_prompt_template;
794+
row.dataset.userPrompt = exp.user_prompt_template;
795+
tableBody.appendChild(row);
796+
});
797+
798+
// Add event listeners for see more links in experimentTable
799+
tableBody.querySelectorAll('.see-more-exp-link').forEach(link => {
800+
link.addEventListener('click', function(e) {
801+
e.preventDefault();
802+
const tr = this.closest('tr');
803+
const cell = this.closest('td');
804+
const cellIndex = Array.from(tr.children).indexOf(cell);
805+
let title = '';
806+
let fullText = '';
807+
if (cellIndex === 8) { // System Prompt column
808+
title = 'System Prompt';
809+
fullText = tr.dataset.systemPrompt;
810+
} else if (cellIndex === 9) { // User Prompt column
811+
title = 'User Prompt';
812+
fullText = tr.dataset.userPrompt;
813+
}
814+
// Remove any existing popup first
815+
let existingOverlay = document.getElementById('popupOverlay');
816+
if (existingOverlay) {
817+
existingOverlay.remove();
818+
}
819+
// Create new popup
820+
const overlay = document.createElement('div');
821+
overlay.id = 'popupOverlay';
822+
overlay.innerHTML = `
823+
<div class="popup-content">
824+
<button class="close-popup">&times;</button>
825+
<h3 style="margin-top: 0; margin-bottom: 16px; color: #2c3e50;">${title}</h3>
826+
<pre class="popup-text">${fullText.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</pre>
827+
</div>
828+
`;
829+
document.body.appendChild(overlay);
830+
overlay.querySelector('.close-popup').onclick = () => overlay.style.display = 'none';
831+
overlay.onclick = (ev) => { if (ev.target === overlay) overlay.style.display = 'none'; };
832+
overlay.style.display = 'flex';
833+
});
834+
});
785835

786836
// Handle checkbox events
787837
const compareBtn = document.getElementById('compareBtn');
@@ -1187,7 +1237,6 @@ <h3 style="margin-top: 0; margin-bottom: 16px; color: #2c3e50;">${title}</h3>
11871237
<td>${template.asset_name}</td>
11881238
<td>${template.asset_description}</td>
11891239
<td>${template.asset_version}</td>
1190-
<td>${createdAt}</td>
11911240
`;
11921241

11931242
row.appendChild(systemPromptCell);
@@ -1197,6 +1246,7 @@ <h3 style="margin-top: 0; margin-bottom: 16px; color: #2c3e50;">${title}</h3>
11971246
<td>${deploymentTime}</td>
11981247
<td>${template.is_deployed ? '✓' : '✗'}</td>
11991248
<td>${template.user_id ?? '-'}</td>
1249+
<td>${createdAt}</td>
12001250
`;
12011251

12021252
// Store template data for see more functionality
@@ -1215,9 +1265,9 @@ <h3 style="margin-top: 0; margin-bottom: 16px; color: #2c3e50;">${title}</h3>
12151265

12161266
// Determine if this is system or user prompt based on cell position
12171267
const cellIndex = Array.from(tr.children).indexOf(cell);
1218-
if (cellIndex === 4) { // System prompt column
1268+
if (cellIndex === 3) { // System prompt column
12191269
showPromptOverlay(tr.dataset.systemPrompt, 'System Prompt');
1220-
} else if (cellIndex === 5) { // User prompt column
1270+
} else if (cellIndex === 4) { // User prompt column
12211271
showPromptOverlay(tr.dataset.userPrompt, 'User Prompt');
12221272
}
12231273
});
@@ -1248,9 +1298,9 @@ <h3 style="margin-top: 0; margin-bottom: 16px; color: #2c3e50;">${title}</h3>
12481298
<td>${dataset.asset_name}</td>
12491299
<td>${dataset.asset_description}</td>
12501300
<td>${dataset.asset_version}</td>
1251-
<td>${createdAt}</td>
12521301
<td class="evaluation-cell">${dataset.file_path}</td>
12531302
<td>${dataset.user_id ?? '-'}</td>
1303+
<td>${createdAt}</td>
12541304
`;
12551305
tableBody.appendChild(row);
12561306
});

0 commit comments

Comments
 (0)