Fixed images table

src/app/views/dataset/dataset_view.tsx

@@ -296,7 +296,7 @@ export class ColumnsView extends React.Component<
                 iconName: "More",
               }}
               styles={buttonStyles}
-              id="charticulator__dataset-view-detail"
+              id={`charticulator__dataset-view-detail-${this.props.table.displayName}`}
               title={strings.dataset.showDataValues}
               // ={false}
               onClick={() => {
@@ -307,7 +307,7 @@ export class ColumnsView extends React.Component<
             />
             {this.state.tableViewIsOpened ? (
               <Callout
-                target="#charticulator__dataset-view-detail"
+                target={`#charticulator__dataset-view-detail-${this.props.table.displayName}`}
                 onDismiss={() => {
                   this.setState({
                     tableViewIsOpened: false,

src/app/views/file_view/import_data_view.tsx

@@ -7,18 +7,18 @@ import { getConfig } from "../../config";
 import {
   Dataset,
   deepClone,
+  ImageKeyColumn,
+  KeyColumn,
   LinkSourceKeyColumn,
   LinkTargetKeyColumn,
-  KeyColumn,
-  ImageKeyColumn,
 } from "../../../core";
 import {
   classNames,
-  getExtensionFromFileName,
-  readFileAsString,
-  getFileNameWithoutExtension,
   convertColumns,
+  getExtensionFromFileName,
+  getFileNameWithoutExtension,
   getPreferredDataKind,
+  readFileAsString,
 } from "../../utils";
 import { ButtonRaised } from "../../components/index";
 import { SVGImageIcon } from "../../components/icons";
@@ -235,10 +235,18 @@ export class ImportDataView extends React.Component<
               column.type === Dataset.DataType.Image
           );
           if (keyAndImageColumns.length === 2) {
+            const imagesIds = table.rows.map((row) => row?.[ImageKeyColumn]);
+            const uniqueIds = [...new Set(imagesIds)];
+
+            const rows = uniqueIds.map((imageId) => {
+              return table.rows.find((row) => row[ImageKeyColumn] === imageId);
+            });
             const imageTable: Dataset.Table = {
               ...table,
+              name: table.name + "Images",
+              displayName: table.displayName + "Images",
               columns: keyAndImageColumns,
-              rows: table.rows.map((row) => {
+              rows: rows.map((row) => {
                 const imageRow: Dataset.Row = {
                   _id: row["_id"],
                 };

src/core/solver/solver.ts

@@ -6,7 +6,7 @@ import * as Expression from "../expression";
 import * as Prototypes from "../prototypes";
 import * as Specification from "../specification";
 
-import { getById, KeyNameMap, uniqueID, zip } from "../common";
+import { getById, ImageKeyColumn, KeyNameMap, uniqueID, zip } from "../common";
 import { ConstraintSolver, ConstraintStrength, Variable } from "./abstract";
 import { Matrix, WASMSolver } from "./wasm_solver";
 import { PlotSegmentClass } from "../prototypes/plot_segments";
@@ -122,6 +122,18 @@ export class ChartConstraintSolver {
         break;
       case MappingType.expressionScale:
         {
+          const dataTable = this.manager.dataset.tables.filter(
+            (tb) => tb.type === "Main"
+          );
+          const dataImageIndex =
+            dataTable?.[0]?.rows[rowIndex[0]][ImageKeyColumn];
+          const imageTable = this.manager.dataset.tables.filter(
+            (tb) => tb.type === "Image"
+          );
+          const imageDataTableIndex = imageTable?.[0]?.rows.find(
+            (row) => row[ImageKeyColumn] == dataImageIndex
+          );
+
           // get table from scale mapping
           const scaleMapping = <Specification.ScaleValueExpressionMapping>(
             mapping
@@ -131,7 +143,8 @@ export class ChartConstraintSolver {
           );
           rowContext = tableContext.getGroupedContext(rowIndex);
           const expr = this.expressionCache.parse(scaleMapping.expression);
-          const dataValue = <Dataset.DataValue>expr.getValue(rowContext);
+          // const dataValue = <Dataset.DataValue>expr.getValue(rowContext);
+          const dataValue = <Dataset.DataValue>"";
           const scaleClass = <Prototypes.Scales.ScaleClass>(
             this.manager.getClassById(scaleMapping.scale)
           );
@@ -142,7 +155,9 @@ export class ChartConstraintSolver {
               this.solver
             );
           }
-          const value = scaleClass.mapDataToAttribute(dataValue);
+          const value = scaleClass.mapDataToAttribute(
+            imageDataTableIndex[ImageKeyColumn]
+          );
           attrs[attr] = value;
         }
         break;