Skip to content

Commit 29dbef7

Browse files
brown9804brown9804
authored
compacted tooltips
compacted tooltips with info icons, added right-panel result display, and fixed recommendation button logic + usability, functionality, and polish
1 parent f6d3a37 commit 29dbef7

3 files changed

Lines changed: 360 additions & 153 deletions

File tree

‎tool/web-app/index.html‎

Lines changed: 120 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -9,106 +9,139 @@
99
<body>
1010
<header>
1111
<h1>Azure Database Selector</h1>
12+
<button id="theme-toggle" aria-label="Toggle dark mode" title="Toggle dark mode">🌙</button>
1213
</header>
13-
<main>
14-
<form id="advisor-form" aria-labelledby="form-title">
15-
<h2 id="form-title">Select Your Database Preferences</h2>
16-
<label for="data-volume">Data Volume:</label>
17-
<select id="data-volume" name="data-volume" required title="Select the expected size of your data." aria-describedby="data-volume-desc">
18-
<option value="<10GB">Less than 10GB</option>
19-
<option value="10GB-1TB">10GB to 1TB</option>
20-
<option value=">1TB">More than 1TB</option>
21-
</select>
22-
<span id="data-volume-desc">Choose the size of your data storage needs. For example, less than 10GB is suitable for small applications like blogs, while more than 1TB is ideal for enterprise systems.</span>
14+
<main class="two-panel-layout">
15+
<section class="left-panel">
16+
<form id="advisor-form" aria-labelledby="form-title">
17+
<h2 id="form-title">Select Your Database Preferences</h2>
18+
<label for="preset-usecase">Preset Use Case:
19+
<span class="info-icon" tabindex="0" data-tooltip="Quickly fill the form for common scenarios.">ℹ️</span>
20+
</label>
21+
<select id="preset-usecase" name="preset-usecase">
22+
<option value="">-- Select a use case --</option>
23+
<option value="ecommerce">E-commerce</option>
24+
<option value="iot">IoT</option>
25+
<option value="analytics">Analytics</option>
26+
</select>
2327

24-
<label for="data-type">Data Type:</label>
25-
<select id="data-type" name="data-type" required title="Choose the type of data you will store." aria-describedby="data-type-desc">
26-
<option value="structured">Structured (e.g., tables)</option>
27-
<option value="semi-structured">Semi-structured (e.g., JSON, XML)</option>
28-
<option value="unstructured">Unstructured (e.g., images, videos)</option>
29-
</select>
30-
<span id="data-type-desc">Select the format of the data you will be storing. For instance, structured data is used for relational databases, while unstructured data is common for media files.</span>
28+
<label for="data-volume">Data Volume:
29+
<span class="info-icon" tabindex="0" data-tooltip="Choose the size of your data storage needs. For example, less than 10GB is suitable for small applications like blogs, while more than 1TB is ideal for enterprise systems.">ℹ️</span>
30+
</label>
31+
<select id="data-volume" name="data-volume" required>
32+
<option value="<10GB">Less than 10GB</option>
33+
<option value="10GB-1TB">10GB to 1TB</option>
34+
<option value=">1TB">More than 1TB</option>
35+
</select>
3136

32-
<label for="latency">Latency Requirements:</label>
33-
<select id="latency" name="latency" required title="Select the maximum acceptable delay for database operations." aria-describedby="latency-desc">
34-
<option value="<10ms">Less than 10ms</option>
35-
<option value="10-100ms">10ms to 100ms</option>
36-
<option value=">100ms">More than 100ms</option>
37-
</select>
38-
<span id="latency-desc">Indicate how quickly you need the database to respond. For example, less than 10ms is critical for real-time applications like gaming.</span>
37+
<label for="data-type">Data Type:
38+
<span class="info-icon" tabindex="0" data-tooltip="Select the format of the data you will be storing. For instance, structured data is used for relational databases, while unstructured data is common for media files.">ℹ️</span>
39+
</label>
40+
<select id="data-type" name="data-type" required>
41+
<option value="structured">Structured (e.g., tables)</option>
42+
<option value="semi-structured">Semi-structured (e.g., JSON, XML)</option>
43+
<option value="unstructured">Unstructured (e.g., images, videos)</option>
44+
</select>
3945

40-
<label for="scalability">Scalability Needs:</label>
41-
<select id="scalability" name="scalability" required title="Choose whether the database needs to scale globally or locally." aria-describedby="scalability-desc">
42-
<option value="global">Global</option>
43-
<option value="local">Local</option>
44-
</select>
45-
<span id="scalability-desc">Specify if the database should support global or local scaling. For instance, global scaling is essential for multinational companies.</span>
46+
<label for="latency">Latency Requirements:
47+
<span class="info-icon" tabindex="0" data-tooltip="Indicate how quickly you need the database to respond. For example, less than 10ms is critical for real-time applications like gaming.">ℹ️</span>
48+
</label>
49+
<select id="latency" name="latency" required>
50+
<option value="<10ms">Less than 10ms</option>
51+
<option value="10-100ms">10ms to 100ms</option>
52+
<option value=">100ms">More than 100ms</option>
53+
</select>
4654

47-
<label for="consistency">Consistency Model:</label>
48-
<select id="consistency" name="consistency" required title="Select the consistency model for your database." aria-describedby="consistency-desc">
49-
<option value="strong">Strong</option>
50-
<option value="eventual">Eventual</option>
51-
</select>
52-
<span id="consistency-desc">Choose the consistency model that fits your application's needs. Strong consistency ensures immediate updates, while eventual consistency is suitable for distributed systems.</span>
55+
<label for="scalability">Scalability Needs:
56+
<span class="info-icon" tabindex="0" data-tooltip="Specify if the database should support global or local scaling. For instance, global scaling is essential for multinational companies.">ℹ️</span>
57+
</label>
58+
<select id="scalability" name="scalability" required>
59+
<option value="global">Global</option>
60+
<option value="local">Local</option>
61+
</select>
5362

54-
<label for="integration-needs">Integration Needs:</label>
55-
<select id="integration-needs" name="integration-needs" title="Specify if the database needs to integrate with other Azure services." aria-describedby="integration-needs-desc">
56-
<option value="yes">Yes</option>
57-
<option value="no">No</option>
58-
</select>
59-
<span id="integration-needs-desc">Indicate if you require integration with other services. For example, integration is necessary for analytics pipelines.</span>
63+
<label for="consistency">Consistency Model:
64+
<span class="info-icon" tabindex="0" data-tooltip="Choose the consistency model that fits your application's needs. Strong consistency ensures immediate updates, while eventual consistency is suitable for distributed systems.">ℹ️</span>
65+
</label>
66+
<select id="consistency" name="consistency" required>
67+
<option value="strong">Strong</option>
68+
<option value="eventual">Eventual</option>
69+
</select>
6070

61-
<label for="security">Security Requirements:</label>
62-
<select id="security" name="security" title="Select the security features required for your database." aria-describedby="security-desc">
63-
<option value="encryption">Encryption</option>
64-
<option value="rbac">Role-based Access Control</option>
65-
<option value="compliance">Compliance</option>
66-
</select>
67-
<span id="security-desc">Select the security measures that are necessary for your data. Encryption is ideal for sensitive data, while compliance is crucial for regulated industries.</span>
71+
<label for="integration-needs">Integration Needs:
72+
<span class="info-icon" tabindex="0" data-tooltip="Indicate if you require integration with other services. For example, integration is necessary for analytics pipelines.">ℹ️</span>
73+
</label>
74+
<select id="integration-needs" name="integration-needs">
75+
<option value="yes">Yes</option>
76+
<option value="no">No</option>
77+
</select>
6878

69-
<label for="budget">Budget:</label>
70-
<select id="budget" name="budget" required title="Choose your monthly budget for database services." aria-describedby="budget-desc">
71-
<option value="<100 USD">Less than 100 USD</option>
72-
<option value="100-500 USD">100 to 500 USD</option>
73-
<option value=">500 USD">More than 500 USD</option>
74-
</select>
75-
<span id="budget-desc">Specify your budget range for database solutions. For example, less than 100 USD is suitable for startups, while more than 500 USD is common for large enterprises.</span>
79+
<label for="security">Security Requirements:
80+
<span class="info-icon" tabindex="0" data-tooltip="Select the security measures that are necessary for your data. Encryption is ideal for sensitive data, while compliance is crucial for regulated industries.">ℹ️</span>
81+
</label>
82+
<select id="security" name="security">
83+
<option value="encryption">Encryption</option>
84+
<option value="rbac">Role-based Access Control</option>
85+
<option value="compliance">Compliance</option>
86+
</select>
7687

77-
<label for="use-case">Use Case:</label>
78-
<select id="use-case" name="use-case" required title="Select the primary use case for your database." aria-describedby="use-case-desc">
79-
<option value="OLTP">Transactional Processing (OLTP)</option>
80-
<option value="OLAP">Analytical Processing (OLAP)</option>
81-
<option value="AI/ML">AI/ML Workloads</option>
82-
</select>
83-
<span id="use-case-desc">Choose the main purpose of the database you are selecting. For instance, OLTP is used for transactional systems, while OLAP is for analytics.</span>
88+
<label for="budget">Budget:
89+
<span class="info-icon" tabindex="0" data-tooltip="Specify your budget range for database solutions. For example, less than 100 USD is suitable for startups, while more than 500 USD is common for large enterprises.">ℹ️</span>
90+
</label>
91+
<select id="budget" name="budget" required>
92+
<option value="<100 USD">Less than 100 USD</option>
93+
<option value="100-500 USD">100 to 500 USD</option>
94+
<option value=">500 USD">More than 500 USD</option>
95+
</select>
8496

85-
<label for="backup-recovery">Backup and Disaster Recovery:</label>
86-
<select id="backup-recovery" name="backup-recovery" title="Specify if automated backups and disaster recovery are required." aria-describedby="backup-recovery-desc">
87-
<option value="yes">Yes</option>
88-
<option value="no">No</option>
89-
</select>
90-
<span id="backup-recovery-desc">Indicate if you need automated backup and recovery options. For example, disaster recovery is essential for mission-critical systems.</span>
97+
<label for="use-case">Use Case:
98+
<span class="info-icon" tabindex="0" data-tooltip="Choose the main purpose of the database you are selecting. For instance, OLTP is used for transactional systems, while OLAP is for analytics.">ℹ️</span>
99+
</label>
100+
<select id="use-case" name="use-case" required>
101+
<option value="OLTP">Transactional Processing (OLTP)</option>
102+
<option value="OLAP">Analytical Processing (OLAP)</option>
103+
<option value="AI/ML">AI/ML Workloads</option>
104+
</select>
91105

92-
<label for="query-complexity">Query Complexity:</label>
93-
<select id="query-complexity" name="query-complexity" title="Select the expected complexity of database queries." aria-describedby="query-complexity-desc">
94-
<option value="simple">Simple (e.g., basic CRUD operations)</option>
95-
<option value="moderate">Moderate (e.g., joins, aggregations)</option>
96-
<option value="complex">Complex (e.g., advanced analytics, AI/ML queries)</option>
97-
</select>
98-
<span id="query-complexity-desc">Select the complexity level of the queries you will perform. For instance, simple queries are used for CRUD operations, while complex queries are needed for AI/ML workloads.</span>
106+
<label for="backup-recovery">Backup and Disaster Recovery:
107+
<span class="info-icon" tabindex="0" data-tooltip="Indicate if you need automated backup and recovery options. For example, disaster recovery is essential for mission-critical systems.">ℹ️</span>
108+
</label>
109+
<select id="backup-recovery" name="backup-recovery">
110+
<option value="yes">Yes</option>
111+
<option value="no">No</option>
112+
</select>
99113

100-
<label for="data-retention">Data Retention Policy:</label>
101-
<select id="data-retention" name="data-retention" title="Choose the expected retention period for your data." aria-describedby="data-retention-desc">
102-
<option value="short-term">Short-term (e.g., days or weeks)</option>
103-
<option value="medium-term">Medium-term (e.g., months)</option>
104-
<option value="long-term">Long-term (e.g., years)</option>
105-
</select>
106-
<span id="data-retention-desc">Specify how long you need to retain your data. For example, short-term retention is suitable for temporary logs, while long-term retention is needed for compliance data.</span>
114+
<label for="query-complexity">Query Complexity:
115+
<span class="info-icon" tabindex="0" data-tooltip="Select the complexity level of the queries you will perform. For instance, simple queries are used for CRUD operations, while complex queries are needed for AI/ML workloads.">ℹ️</span>
116+
</label>
117+
<select id="query-complexity" name="query-complexity">
118+
<option value="simple">Simple (e.g., basic CRUD operations)</option>
119+
<option value="moderate">Moderate (e.g., joins, aggregations)</option>
120+
<option value="complex">Complex (e.g., advanced analytics, AI/ML queries)</option>
121+
</select>
107122

108-
<button type="submit">Get Recommendation</button>
109-
</form>
110-
111-
<p id="recommendation"></p>
123+
<label for="data-retention">Data Retention Policy:
124+
<span class="info-icon" tabindex="0" data-tooltip="Specify how long you need to retain your data. For example, short-term retention is suitable for temporary logs, while long-term retention is needed for compliance data.">ℹ️</span>
125+
</label>
126+
<select id="data-retention" name="data-retention">
127+
<option value="short-term">Short-term (e.g., days or weeks)</option>
128+
<option value="medium-term">Medium-term (e.g., months)</option>
129+
<option value="long-term">Long-term (e.g., years)</option>
130+
</select>
131+
<button type="submit">Get Recommendation</button>
132+
</form>
133+
</section>
134+
<section class="right-panel">
135+
<div id="live-summary" class="summary-card">
136+
<h3>Live Summary</h3>
137+
<ul id="summary-list"></ul>
138+
</div>
139+
<div id="recommendation-panel">
140+
<div id="loading-spinner" style="display:none;">Loading...</div>
141+
<div id="recommendation-result"></div>
142+
<button id="export-btn" style="display:none;">Export/Share</button>
143+
</div>
144+
</section>
112145
</main>
113146
<script src="script.js"></script>
114147
</body>

0 commit comments

Comments
 (0)