Skip to content

Commit 2042193

Browse files
CloseChoiceCloseChoice
committed
finally settle for xaiflow name
1 parent ffd863e commit 2042193

23 files changed

+164
-181
lines changed

‎.gitignore‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ node_modules
33
__pycache__
44

55
# Generated Svelte bundles
6-
src/ce_mlflow_extension/templates/assets/bundle.js
7-
src/ce_mlflow_extension/templates/assets/bundle.js.map
6+
src/xaiflow/templates/assets/bundle.js
7+
src/xaiflow/templates/assets/bundle.js.map
88

99
# Generated HTML reports
1010
*.html
11-
!src/ce_mlflow_extension/templates/report.html
11+
!src/xaiflow/templates/report.html
1212
mlruns

‎MANIFEST.in‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ include requirements.txt
44
include pyproject.toml
55

66
# Include all template files and assets
7-
recursive-include src/ce_mlflow_extension/templates *.html
8-
recursive-include src/ce_mlflow_extension/templates/assets *.js *.js.map *.png *.css
9-
recursive-include src/ce_mlflow_extension/templates/components *.svelte
10-
recursive-include src/ce_mlflow_extension/templates/utils *.ts
7+
recursive-include src/xaiflow/templates *.html
8+
recursive-include src/xaiflow/templates/assets *.js *.js.map *.png *.css
9+
recursive-include src/xaiflow/templates/components *.svelte
10+
recursive-include src/xaiflow/templates/utils *.ts
1111

1212
# Include type definitions
13-
recursive-include src/ce_mlflow_extension/types *.ts
13+
recursive-include src/xaiflow/types *.ts
1414

1515
# Exclude development and test files
1616
exclude test_*.py

‎Makefile‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@ test-shap: build
6262
.PHONY: clean
6363
clean:
6464
@echo "Cleaning generated files..."
65-
rm -f src/ce_mlflow_extension/templates/assets/bundle.js
66-
rm -f src/ce_mlflow_extension/templates/assets/bundle.js.map
65+
rm -f src/xaiflow/templates/assets/bundle.js
66+
rm -f src/xaiflow/templates/assets/bundle.js.map
6767
rm -f *.html
6868
rm -rf node_modules/.cache
6969
@echo "✅ Cleaned!"
@@ -77,9 +77,9 @@ all: install build test
7777
# Check if bundle.js exists
7878
.PHONY: check-bundle
7979
check-bundle:
80-
@if [ -f "src/ce_mlflow_extension/templates/assets/bundle.js" ]; then \
80+
@if [ -f "src/xaiflow/templates/assets/bundle.js" ]; then \
8181
echo "✅ bundle.js exists"; \
82-
ls -la src/ce_mlflow_extension/templates/assets/bundle.js; \
82+
ls -la src/xaiflow/templates/assets/bundle.js; \
8383
else \
8484
echo "❌ bundle.js not found. Run 'make build' first."; \
8585
exit 1; \
@@ -94,4 +94,4 @@ status:
9494
@echo "Python virtual environment:"
9595
@if [ -d ".venv" ]; then echo "✅ Found"; else echo "❌ Not found"; fi
9696
@echo "Svelte bundle:"
97-
@if [ -f "src/ce_mlflow_extension/templates/assets/bundle.js" ]; then echo "✅ Built"; else echo "❌ Not built (run 'make build')"; fi
97+
@if [ -f "src/xaiflow/templates/assets/bundle.js" ]; then echo "✅ Built"; else echo "❌ Not built (run 'make build')"; fi

‎dev/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ The development interface provides buttons to test each component:
5353

5454
## Debugging Workflow
5555

56-
1. Edit any Svelte component in `src/ce_mlflow_extension/templates/components/`
56+
1. Edit any Svelte component in `src/xaiflow/templates/components/`
5757
2. Rollup automatically rebuilds the bundle
5858
3. Browser automatically refreshes with your changes
5959
4. Use browser dev tools to:

‎dev/bundle.js‎

Lines changed: 60 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -17065,7 +17065,7 @@ ${properties}`
1706517065
}
1706617066
}
1706717067

17068-
ImportanceChart2[FILENAME] = 'src/ce_mlflow_extension/templates/components/ImportanceChart2.svelte';
17068+
ImportanceChart2[FILENAME] = 'src/xaiflow/templates/components/ImportanceChart2.svelte';
1706917069

1707017070
var root$4 = add_locations(from_html(`<div class="importance-chart-container"><canvas class="svelte-ec5xpb"></canvas></div>`), ImportanceChart2[FILENAME], [[236, 0, [[237, 2]]]]);
1707117071

@@ -17333,7 +17333,7 @@ ${properties}`
1733317333
return pop({ ...legacy_api() });
1733417334
}
1733517335

17336-
ScatterShapValues[FILENAME] = 'src/ce_mlflow_extension/templates/components/ScatterShapValues.svelte';
17336+
ScatterShapValues[FILENAME] = 'src/xaiflow/templates/components/ScatterShapValues.svelte';
1733717337

1733817338
var root$3 = add_locations(from_html(`<div class="scatter-shap-container"><canvas class="svelte-ec5xpb"></canvas></div>`), ScatterShapValues[FILENAME], [[237, 0, [[238, 2]]]]);
1733917339

@@ -17581,7 +17581,7 @@ ${properties}`
1758117581
return pop({ ...legacy_api() });
1758217582
}
1758317583

17584-
ChartManager[FILENAME] = 'src/ce_mlflow_extension/templates/components/ChartManager.svelte';
17584+
ChartManager[FILENAME] = 'src/xaiflow/templates/components/ChartManager.svelte';
1758517585

1758617586
var root$2 = add_locations(from_html(`<div class="chart-manager svelte-169j5gc"><div class="charts-row svelte-169j5gc"><div class="chart-section svelte-169j5gc"><h3 class="svelte-169j5gc">Feature Importance Chart</h3> <div class="chart-container svelte-169j5gc"><!></div></div> <div class="chart-section svelte-169j5gc"><h3 class="svelte-169j5gc">SHAP Values</h3> <div class="chart-container svelte-169j5gc"><!></div></div></div></div>`), ChartManager[FILENAME], [
1758717587
[
@@ -19112,9 +19112,9 @@ ${properties}`
1911219112
});
1911319113
}
1911419114

19115-
DeepDiveChart[FILENAME] = 'src/ce_mlflow_extension/templates/components/DeepDiveChart.svelte';
19115+
DeepDiveChart[FILENAME] = 'src/xaiflow/templates/components/DeepDiveChart.svelte';
1911619116

19117-
var root$1 = add_locations(from_html(`<canvas class="svelte-1mf6xd3"></canvas>`), DeepDiveChart[FILENAME], [[427, 2]]);
19117+
var root$1 = add_locations(from_html(`<canvas class="svelte-1mf6xd3"></canvas>`), DeepDiveChart[FILENAME], [[404, 2]]);
1911819118

1911919119
function DeepDiveChart($$anchor, $$props) {
1912019120
check_target(new.target);
@@ -19173,11 +19173,26 @@ ${properties}`
1917319173
let cumulativeValues;
1917419174
let maxCumulativeValue;
1917519175

19176+
function getScreenSizeFlags() {
19177+
const width = window.innerWidth;
19178+
19179+
return {
19180+
isSmallScreen: width < 768,
19181+
isMediumScreen: width >= 768 && width < 1560,
19182+
isLargeScreen: width >= 1560,
19183+
isXLargeScreen: width >= 1980
19184+
};
19185+
}
19186+
1917619187
function updateChart(singleShapValues) {
1917719188
console.log(...log_if_contains_state('log', "updateChart called with singleShapValues:", singleShapValues, "and singleFeatureValues:", get(singleFeatureValues)));
1917819189
maxOfData = Math.max(...singleShapValues);
1917919190
minOfData = Math.min(...singleShapValues);
1918019191

19192+
const screen = getScreenSizeFlags();
19193+
19194+
console.log(...log_if_contains_state('log', "Screen size flags:", screen));
19195+
1918119196
// Color mapping based on isHigherOutputBetter prop
1918219197
pointBackgroundColor = singleShapValues.map((d) => {
1918319198
const normalizedValue = (d - minOfData) / (maxOfData - minOfData) * 100;
@@ -19200,54 +19215,45 @@ ${properties}`
1920019215
chart.data.datasets[0].data = cumulativeValues;
1920119216
maxCumulativeValue = Math.max(...cumulativeValues.map((d) => d[1]));
1920219217
console.log(...log_if_contains_state('log', "Max Cumulative Value", maxCumulativeValue));
19203-
19204-
// chart.data.datasets[0].data[0][0] += base_value;
1920519218
chart.data.datasets[0].backgroundColor = pointBackgroundColor;
1920619219

1920719220
// Update x-axis rotation based on screen size
1920819221
if (chart.options.scales?.x?.ticks) {
19209-
const isLargeScreen = window.innerWidth >= 1720;
19210-
const isMediumScreen = window.innerWidth < 1024;
19222+
chart.options.scales.x.ticks.maxRotation = screen.isLargeScreen ? 45 : 90;
19223+
chart.options.scales.x.ticks.minRotation = screen.isLargeScreen ? 0 : 90;
1921119224

19212-
chart.options.scales.x.ticks.maxRotation = isLargeScreen ? 45 : 90;
19213-
chart.options.scales.x.ticks.minRotation = isLargeScreen ? 0 : 90;
19214-
chart.options.scales.x.ticks.font = { size: window.innerWidth < 768 ? 8 : isMediumScreen ? 10 : 12 };
19225+
chart.options.scales.x.ticks.font = {
19226+
size: screen.isSmallScreen ? 8 : screen.isMediumScreen ? 10 : 12
19227+
};
1921519228
}
1921619229

1921719230
// Update y-axis font size
1921819231
if (chart.options.scales?.y?.ticks) {
19219-
const isSmallScreen = window.innerWidth < 768;
19220-
const isMediumScreen = window.innerWidth < 1024;
19221-
19222-
chart.options.scales.y.ticks.font = { size: isSmallScreen ? 8 : isMediumScreen ? 10 : 12 };
19232+
chart.options.scales.y.ticks.font = {
19233+
size: screen.isSmallScreen ? 8 : screen.isMediumScreen ? 10 : 12
19234+
};
1922319235
}
1922419236

1922519237
// Update layout padding
1922619238
if (chart.options.layout?.padding) {
19227-
const isSmallScreen = window.innerWidth < 768;
19228-
1922919239
chart.options.layout.padding = {
19230-
top: isSmallScreen ? 40 : 60,
19231-
bottom: isSmallScreen ? 5 : 10,
19232-
left: isSmallScreen ? 5 : 10,
19233-
right: isSmallScreen ? 5 : 10
19240+
top: screen.isSmallScreen ? 40 : 60,
19241+
bottom: screen.isSmallScreen ? 5 : 10,
19242+
left: screen.isSmallScreen ? 5 : 10,
19243+
right: screen.isSmallScreen ? 5 : 10
1923419244
};
1923519245
}
1923619246

1923719247
// Update datalabels font size and offset
1923819248
if (chart.options.plugins?.datalabels) {
19239-
const isLargeScreen = window.innerWidth >= 1560;
19240-
const isSmallScreen = window.innerWidth < 768;
19241-
const isMediumScreen = window.innerWidth < 1024;
19242-
19243-
chart.options.plugins.datalabels.display = isLargeScreen; // Only show on large screens
19249+
chart.options.plugins.datalabels.display = screen.isLargeScreen || screen.isMediumScreen;
1924419250

1924519251
chart.options.plugins.datalabels.font = {
1924619252
weight: 'bold',
19247-
size: isSmallScreen ? 8 : isMediumScreen ? 9 : 10
19253+
size: screen.isSmallScreen ? 8 : screen.isMediumScreen ? 9 : 10
1924819254
};
1924919255

19250-
chart.options.plugins.datalabels.offset = isSmallScreen ? 2 : 5;
19256+
chart.options.plugins.datalabels.offset = screen.isSmallScreen ? 2 : 5;
1925119257
}
1925219258

1925319259
chart.update();
@@ -19268,58 +19274,52 @@ ${properties}`
1926819274

1926919275
// Handle screen resize for responsive label rotation
1927019276
function handleResize() {
19271-
if (chart && chart.options.scales?.x?.ticks) {
19272-
const isLargeScreen = window.innerWidth >= 1560;
19273-
const isSmallScreen = window.innerWidth < 768;
19274-
const isMediumScreen = window.innerWidth < 1024;
19277+
const screen = getScreenSizeFlags();
1927519278

19276-
// Update x-axis
19277-
chart.options.scales.x.ticks.maxRotation = isLargeScreen ? 45 : 90;
19279+
console.log(...log_if_contains_state('log', "Handling resize, current screen size flags:", screen));
1927819280

19279-
chart.options.scales.x.ticks.minRotation = isLargeScreen ? 0 : 90;
19280-
chart.options.scales.x.ticks.font = { size: isSmallScreen ? 8 : isMediumScreen ? 10 : 12 };
19281+
if (chart && chart.options.scales?.x?.ticks) {
19282+
chart.options.scales.x.ticks.maxRotation = screen.isLargeScreen ? 45 : 90;
19283+
chart.options.scales.x.ticks.minRotation = screen.isLargeScreen ? 0 : 90;
19284+
19285+
chart.options.scales.x.ticks.font = {
19286+
size: screen.isSmallScreen ? 8 : screen.isMediumScreen ? 10 : 12
19287+
};
1928119288

1928219289
// Update y-axis
1928319290
if (chart.options.scales?.y?.ticks) {
19284-
chart.options.scales.y.ticks.font = { size: isSmallScreen ? 8 : isMediumScreen ? 10 : 12 };
19291+
chart.options.scales.y.ticks.font = {
19292+
size: screen.isSmallScreen ? 8 : screen.isMediumScreen ? 10 : 12
19293+
};
1928519294
}
1928619295

1928719296
// Update layout padding
1928819297
if (chart.options.layout?.padding) {
1928919298
chart.options.layout.padding = {
19290-
top: isSmallScreen ? 40 : 60,
19291-
bottom: isSmallScreen ? 5 : 10,
19292-
left: isSmallScreen ? 5 : 10,
19293-
right: isSmallScreen ? 5 : 10
19299+
top: screen.isSmallScreen ? 40 : 60,
19300+
bottom: screen.isSmallScreen ? 5 : 10,
19301+
left: screen.isSmallScreen ? 5 : 10,
19302+
right: screen.isSmallScreen ? 5 : 10
1929419303
};
1929519304
}
1929619305

1929719306
// Update datalabels
1929819307
if (chart.options.plugins?.datalabels) {
19299-
chart.options.plugins.datalabels.display = isLargeScreen; // Only show on large screens
19308+
chart.options.plugins.datalabels.display = screen.isLargeScreen || screen.isMediumScreen;
1930019309

1930119310
chart.options.plugins.datalabels.font = {
1930219311
weight: 'bold',
19303-
size: isSmallScreen ? 8 : isMediumScreen ? 9 : 10
19312+
size: screen.isSmallScreen ? 8 : screen.isMediumScreen ? 9 : 10
1930419313
};
1930519314

19306-
chart.options.plugins.datalabels.offset = isSmallScreen ? 2 : 5;
19315+
chart.options.plugins.datalabels.offset = screen.isSmallScreen ? 2 : 5;
1930719316
}
1930819317

1930919318
chart.update('none'); // Update without animation for smoother resize
1931019319
}
1931119320
}
1931219321

1931319322
onMount(() => {
19314-
// sort feature names by featureOrder
19315-
// let sortedFeatureNames = explanationSummary.sort((a, b) => b.importance - a.importance).map((d) => d.feature_name);
19316-
// let sortedFeatures = modelFeatures.sort((a, b) => sortedFeatureNames.indexOf(a.feature_name) - sortedFeatureNames.indexOf(b.feature_name));
19317-
// let sortedIdx = modelFeatures.sort((a, b) => sortedFeatureNames.indexOf(a.feature_name) - sortedFeatureNames.indexOf(b.feature_name)).map((d) => d.feature_order);
19318-
// const sortedFeatures = modelFeatures.sort((a, b) => a.feature_order - b.feature_order
19319-
// );
19320-
//
19321-
console.log("DeepDiveChart: onMount called");
19322-
1932319323
maxOfData = Math.max(...get(singleShapValues));
1932419324
minOfData = Math.min(...get(singleShapValues));
1932519325

@@ -19346,7 +19346,7 @@ ${properties}`
1934619346
]
1934719347
};
1934819348

19349-
console.log(...log_if_contains_state('log', "IN DEEPDIVE data", data, $$props.featureNames));
19349+
const screen = getScreenSizeFlags();
1935019350

1935119351
const config = {
1935219352
type: 'bar',
@@ -19409,25 +19409,23 @@ ${properties}`
1940919409
},
1941019410

1941119411
datalabels: {
19412-
display: window.innerWidth >= 1980, // Only show on large screens
19412+
display: screen.isLargeScreen || screen.isMediumScreen, // Show on large and medium screens
1941319413
clamp: true,
1941419414
anchor: 'end',
1941519415
align: 'top',
1941619416
color: '#737373',
1941719417

1941819418
font: {
1941919419
weight: 'bold',
19420-
size: window.innerWidth < 768 ? 8 : window.innerWidth < 1024 ? 9 : 10
19420+
size: screen.isSmallScreen ? 8 : screen.isMediumScreen ? 9 : 10
1942119421
},
1942219422

19423-
offset: window.innerWidth < 768 ? 2 : 5,
19423+
offset: screen.isSmallScreen ? 2 : 5,
1942419424

1942519425
formatter(value, context) {
1942619426
const index = context.dataIndex;
1942719427

1942819428
// const description = featureDescriptions[index]; // Description not needed for datalabel
19429-
console.log(...log_if_contains_state('log', "IN DEEPDIVE featureEncodings", featureEncodings(), featureEncodings()[$$props.featureNames[index]]));
19430-
1943119429
let featureValue;
1943219430

1943319431
if (featureEncodings() && featureEncodings()[$$props.featureNames[index]]) {
@@ -19493,7 +19491,7 @@ ${properties}`
1949319491
const featureLines = breakTextIntoLines(featureValueStr, 10);
1949419492

1949519493
// Limit number of lines on small screens
19496-
const maxLines = window.innerWidth < 768 ? 2 : 3;
19494+
const maxLines = screen.isSmallScreen ? 2 : 3;
1949719495

1949819496
const displayLines = featureLines.slice(0, maxLines);
1949919497

@@ -19558,7 +19556,7 @@ ${properties}`
1955819556
return pop({ ...legacy_api() });
1955919557
}
1956019558

19561-
DeepDiveManager[FILENAME] = 'src/ce_mlflow_extension/templates/components/DeepDiveManager.svelte';
19559+
DeepDiveManager[FILENAME] = 'src/xaiflow/templates/components/DeepDiveManager.svelte';
1956219560

1956319561
var root_1 = add_locations(from_html(`<option> </option>`), DeepDiveManager[FILENAME], [[84, 12]]);
1956419562
var root = add_locations(from_html(`<div><div class="observation-dropdown"><label for="observation-select">Select Observation:</label> <select id="observation-select"></select> <button>Prev</button> <button>Next</button></div> <!></div>`), DeepDiveManager[FILENAME], [[79, 0, [[80, 0, [[81, 4], [82, 4], [87, 4], [88, 4]]]]]]);

‎dev/bundle.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dev/dev-entry.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
// Development entry point for testing Svelte components
22
import { mount } from 'svelte';
3-
import ChartManager from '../src/ce_mlflow_extension/templates/components/ChartManager.svelte';
4-
import ImportanceChart2 from '../src/ce_mlflow_extension/templates/components/ImportanceChart2.svelte';
5-
import ScatterShapValues from '../src/ce_mlflow_extension/templates/components/ScatterShapValues.svelte';
6-
import DeepDiveManager from '../src/ce_mlflow_extension/templates/components/DeepDiveManager.svelte';
7-
import DeepDiveChart from '../src/ce_mlflow_extension/templates/components/DeepDiveChart.svelte';
3+
import ChartManager from '../src/xaiflow/templates/components/ChartManager.svelte';
4+
import ImportanceChart2 from '../src/xaiflow/templates/components/ImportanceChart2.svelte';
5+
import ScatterShapValues from '../src/xaiflow/templates/components/ScatterShapValues.svelte';
6+
import DeepDiveManager from '../src/xaiflow/templates/components/DeepDiveManager.svelte';
7+
import DeepDiveChart from '../src/xaiflow/templates/components/DeepDiveChart.svelte';
88

99
// Export components immediately
1010
window.DevComponents = {

‎dev/rollup.config.dev.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default {
4141
clearScreen: false,
4242
include: [
4343
'dev/**',
44-
'src/ce_mlflow_extension/templates/**'
44+
'src/xaiflow/templates/**'
4545
]
4646
}
4747
};

‎dev/vite.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default defineConfig({
99
},
1010
resolve: {
1111
alias: {
12-
'@components': '../src/ce_mlflow_extension/templates/components'
12+
'@components': '../src/xaiflow/templates/components'
1313
}
1414
}
1515
})

‎rollup.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import typescript from '@rollup/plugin-typescript';
77
const production = !process.env.ROLLUP_WATCH;
88

99
export default {
10-
input: 'src/ce_mlflow_extension/templates/main.js',
10+
input: 'src/xaiflow/templates/main.js',
1111
output: {
1212
sourcemap: true,
1313
format: 'iife',
1414
name: 'app',
15-
file: 'src/ce_mlflow_extension/templates/assets/bundle.js'
15+
file: 'src/xaiflow/templates/assets/bundle.js'
1616
},
1717
plugins: [
1818
svelte({

0 commit comments

Comments
 (0)