Show the contribution of each source for the current location in a source list column

src/fontra/client/core/glyph-controller.js

@@ -235,6 +235,25 @@ export class VariableGlyphController {
     return this._sourceInterpolationStatus;
   }
 
+  getInterpolationContributions(location) {
+    location = this.mapLocationGlobalToLocal(location);
+    location = normalizeLocation(location, this.combinedAxes);
+    const contributions = this.model.getSourceContributions(location);
+
+    let sourceIndex = 0;
+    const orderedContributions = [];
+    for (const source of this.sources) {
+      if (source.inactive) {
+        orderedContributions.push(null);
+      } else {
+        const value = contributions[this.model.mapping[sourceIndex]];
+        orderedContributions.push(value);
+        sourceIndex++;
+      }
+    }
+    return orderedContributions;
+  }
+
   async getLayerGlyphController(layerName, sourceIndex, getGlyphFunc) {
     const cacheKey = `${layerName}/${sourceIndex}`;
     let instanceController = this._layerGlyphControllers[cacheKey];

src/fontra/client/core/var-model.js

@@ -3,6 +3,7 @@
 import { VariationError } from "./errors.js";
 import { addItemwise, subItemwise, mulScalar } from "./var-funcs.js";
 import { isSuperset } from "./set-ops.js";
+import { reversedEnumerate } from "./utils.js";
 
 export class VariationModel {
   constructor(locations, axisOrder = null) {
@@ -181,6 +182,20 @@ export class VariationModel {
     const scalars = this.getScalars(loc);
     return interpolateFromDeltasAndScalars(deltas, scalars);
   }
+
+  getSourceContributions(location) {
+    // Return the contribution factor for source (master) values
+    const contributions = this.getScalars(location);
+    for (const [i, weights] of reversedEnumerate(this.deltaWeights)) {
+      for (const [j, weight] of weights.entries()) {
+        if (j >= i) {
+          throw new Error("assert -- bad i/j indices");
+        }
+        contributions[j] -= contributions[i] * weight;
+      }
+    }
+    return contributions;
+  }
 }
 
 function sortedLocations(locations, axisOrder = null) {

src/fontra/views/editor/panel-designspace-navigation.js

@@ -1,5 +1,5 @@
 import { getAxisBaseName } from "/core/glyph-controller.js";
-import { ObservableController } from "/core/observable-object.js";
+import { controllerKey, ObservableController } from "/core/observable-object.js";
 import { Layer, Source } from "/core/var-glyph.js";
 import * as html from "/core/unlit.js";
 import { css } from "../third-party/lit.js";
@@ -8,6 +8,7 @@ import {
   enumerate,
   htmlToElement,
   objectsEqual,
+  range,
   rgbaToCSS,
   round,
   scheduleCalls,
@@ -164,6 +165,7 @@ export default class DesignspaceNavigationPanel extends Panel {
 
     this.sceneSettingsController.addKeyListener("location", (event) => {
       this.updateResetAllAxesButtonState();
+      this.updateInterpolationContributions();
       if (event.senderInfo?.senderID === this) {
         // Sent by us, ignore
         return;
@@ -229,6 +231,13 @@ export default class DesignspaceNavigationPanel extends Panel {
       });
     }
 
+    columnDescriptions.push({
+      title: " ",
+      key: "interpolationContribution",
+      cellFactory: interpolationContributionCell,
+      width: "1.2em",
+    });
+
     this.sourcesList = this.contentElement.querySelector("#sources-list");
     this.sourcesList.showHeader = true;
     this.sourcesList.columnDescriptions = columnDescriptions;
@@ -278,6 +287,20 @@ export default class DesignspaceNavigationPanel extends Panel {
     button.hidden = !this.designspaceLocation.axes.length;
   }
 
+  async updateInterpolationContributions() {
+    const varGlyphController =
+      await this.sceneModel.getSelectedVariableGlyphController();
+    if (!varGlyphController) {
+      return;
+    }
+    const interpolationContributions = varGlyphController.getInterpolationContributions(
+      this.sceneSettings.location
+    );
+    for (const [index, sourceItem] of enumerate(this.sourcesList.items)) {
+      sourceItem.interpolationContribution = interpolationContributions[index];
+    }
+  }
+
   get globalAxes() {
     return this.fontController.globalAxes.filter((axis) => !axis.hidden);
   }
@@ -309,6 +332,9 @@ export default class DesignspaceNavigationPanel extends Panel {
     const sources = varGlyphController?.sources || [];
     const sourceInterpolationStatus =
       varGlyphController?.sourceInterpolationStatus || [];
+    const interpolationContributions =
+      varGlyphController?.getInterpolationContributions(this.sceneSettings.location) ||
+      [];
     let backgroundLayers = { ...this.sceneController.backgroundLayers };
 
     const sourceItems = [];
@@ -321,6 +347,7 @@ export default class DesignspaceNavigationPanel extends Panel {
         visible: backgroundLayers[layerName] === source.name,
         status: status !== undefined ? status : this.defaultStatusValue,
         interpolationStatus: sourceInterpolationStatus[index]?.error,
+        interpolationContribution: interpolationContributions[index],
       });
       sourceController.addKeyListener("active", async (event) => {
         await this.sceneController.editGlyphAndRecordChanges((glyph) => {
@@ -922,6 +949,42 @@ function interpolationErrorCell(item, colDesc) {
     : "";
 }
 
+const interpolationContributionIconSources = [...range(1, 6)].map(
+  (index) => `/tabler-icons/antenna-bars-${index}.svg`
+);
+
+function interpolationContributionCell(item, colDesc) {
+  const iconElement = html.createDomElement("inline-svg", {
+    src: "",
+    style: "width: 1.2em; height: 1.2em;",
+  });
+
+  function updateFromItem() {
+    const rawValue = item[colDesc.key];
+    if (rawValue != null) {
+      let index;
+      index = Math.min(Math.round(Math.sqrt(Math.abs(rawValue)) * 4), 4);
+      if (index === 0 && Math.abs(rawValue) > 0.00001) {
+        // Ensure non-zero has one "bar"
+        index = 1;
+      }
+      iconElement.src = interpolationContributionIconSources[index];
+      iconElement.style.color = rawValue < 0 ? "#F36" : null;
+    } else {
+      iconElement.src = "";
+    }
+  }
+
+  const controller = item[controllerKey];
+  controller.addKeyListener(colDesc.key, (event) => {
+    updateFromItem();
+  });
+
+  updateFromItem();
+
+  return iconElement;
+}
+
 function checkboxListCell(item, colDesc) {
   const value = item[colDesc.key];
   return html.input({

test-js/test-var-model.js

@@ -12,6 +12,7 @@ import {
   piecewiseLinearMap,
   supportScalar,
 } from "../src/fontra/client/core/var-model.js";
+import { parametrize } from "./test-support.js";
 
 describe("var-model tests", () => {
   describe("VariationModel tests", () => {
@@ -341,4 +342,96 @@ describe("var-model tests", () => {
       expect(mapBackward(location, axes)).to.deep.equal({ weight: 10, width: 100 });
     });
   });
+
+  describe("getSourceContributions tests", () => {
+    const locationsA = [{}, { wght: 1 }, { wdth: 1 }];
+    const locationsB = [{}, { wght: 1 }, { wdth: 1 }, { wght: 1, wdth: 1 }];
+    const locationsC = [
+      {},
+      { wght: 0.5 },
+      { wght: 1 },
+      { wdth: 1 },
+      { wght: 1, wdth: 1 },
+    ];
+    parametrize(
+      "test contrib",
+      [
+        { locations: locationsA, location: { wght: 0, wdth: 0 }, result: [1, 0, 0] },
+        {
+          locations: locationsA,
+          location: { wght: 0.5, wdth: 0 },
+          result: [0.5, 0.5, 0],
+        },
+        { locations: locationsA, location: { wght: 1, wdth: 0 }, result: [0, 1, 0] },
+        {
+          locations: locationsA,
+          location: { wght: 0, wdth: 0.5 },
+          result: [0.5, 0, 0.5],
+        },
+        { locations: locationsA, location: { wght: 0, wdth: 1 }, result: [0, 0, 1] },
+        { locations: locationsA, location: { wght: 1, wdth: 1 }, result: [-1, 1, 1] },
+        {
+          locations: locationsA,
+          location: { wght: 0.5, wdth: 0.5 },
+          result: [0, 0.5, 0.5],
+        },
+        {
+          locations: locationsA,
+          location: { wght: 0.75, wdth: 0.75 },
+          result: [-0.5, 0.75, 0.75],
+        },
+        {
+          locations: locationsB,
+          location: { wght: 1, wdth: 1 },
+          result: [0, 0, 0, 1],
+        },
+        {
+          locations: locationsB,
+          location: { wght: 0.5, wdth: 0 },
+          result: [0.5, 0.5, 0, 0],
+        },
+        {
+          locations: locationsB,
+          location: { wght: 1, wdth: 0.5 },
+          result: [0, 0.5, 0, 0.5],
+        },
+        {
+          locations: locationsB,
+          location: { wght: 0.5, wdth: 0.5 },
+          result: [0.25, 0.25, 0.25, 0.25],
+        },
+        {
+          locations: locationsC,
+          location: { wght: 0.5, wdth: 0 },
+          result: [0, 1, 0, 0, 0],
+        },
+        {
+          locations: locationsC,
+          location: { wght: 0.25, wdth: 0 },
+          result: [0.5, 0.5, 0, 0, 0],
+        },
+        {
+          locations: locationsC,
+          location: { wght: 0.75, wdth: 0 },
+          result: [0, 0.5, 0.5, 0, 0],
+        },
+        {
+          locations: locationsC,
+          location: { wght: 0.5, wdth: 1 },
+          result: [-0.5, 1, -0.5, 0.5, 0.5],
+        },
+        {
+          locations: locationsC,
+          location: { wght: 0.75, wdth: 1 },
+          result: [-0.25, 0.5, -0.25, 0.25, 0.75],
+        },
+      ],
+      (testData) => {
+        const model = new VariationModel(testData.locations, ["wght", "wdth"]);
+        expect(model.getSourceContributions(testData.location)).to.deep.equal(
+          testData.result
+        );
+      }
+    );
+  });
 });