Adding sig fig support (#588)

* Make decimal places in UI consistent

* Remove old files

* Checkpoint file for implementation

Adding a checkpoint for step by step implementation of a solution that allows users to change the number of significant figures in setup.yaml and changes the number of significant figures shown when mousing over the stepped chart

* Add frontend configuration for charts in setup.yaml

* Adding sig fig support

Sig fig support added on backend

---------

Co-authored-by: Jordan George <jordanngeorge@gmail.com>

Author: astrosnat

README/CHECKPOINTS/CHECKPOINT20251105-01.md

@@ -0,0 +1,28 @@
+## The goal:
+
+- Have users able to change the number of significant figures displayed on a stepped chart by editing setup.yaml (between 2 and 9 significant figures)
+- Prediction market charts to display a variable number of significant figures (2-9) based on the user input in setup.yaml
+
+## Step by step implementation
+
+1) Modify setup.yaml so that users can set the number of significant figures in the market charts
+
+2) Create a tiny helper that:
+
+- fetches the yaml file
+
+- parses it with our SocialPredict tools
+
+- clamps the number of significant figures to the allowed range (2–9)
+
+- provides a ready-to-use number formatter
+
+3) Build a single formatting utility
+
+4) Wire the formatter into your Chart.js options
+
+Apply it to:
+
+- Y-axis ticks (most common)
+
+- Tooltip label (so hover values match the tick style)

backend/handlers/setup/setuphandler.go

@@ -21,3 +21,33 @@ func GetSetupHandler(loadEconomicsConfig func() (*setup.EconomicConfig, error))
 		}
 	}
 }
+
+type frontendChartsResponse struct {
+	SigFigs int `json:"sigFigs"`
+}
+
+type frontendConfigResponse struct {
+	Charts frontendChartsResponse `json:"charts"`
+}
+
+func GetFrontendSetupHandler(loadEconomicsConfig func() (*setup.EconomicConfig, error)) func(w http.ResponseWriter, r *http.Request) {
+	return func(w http.ResponseWriter, r *http.Request) {
+		_, err := loadEconomicsConfig()
+		if err != nil {
+			http.Error(w, "Failed to load frontend config", http.StatusInternalServerError)
+			return
+		}
+
+		response := frontendConfigResponse{
+			Charts: frontendChartsResponse{
+				SigFigs: setup.ChartSigFigs(),
+			},
+		}
+
+		w.Header().Set("Content-Type", "application/json")
+		if err := json.NewEncoder(w).Encode(response); err != nil {
+			http.Error(w, "Failed to encode frontend setup response", http.StatusInternalServerError)
+			return
+		}
+	}
+}

backend/server/server.go

@@ -114,6 +114,7 @@ func Start() {
 
 	// application setup and stats information
 	router.Handle("/v0/setup", securityMiddleware(http.HandlerFunc(setuphandlers.GetSetupHandler(setup.LoadEconomicsConfig)))).Methods("GET")
+	router.Handle("/v0/setup/frontend", securityMiddleware(http.HandlerFunc(setuphandlers.GetFrontendSetupHandler(setup.LoadEconomicsConfig)))).Methods("GET")
 	router.Handle("/v0/stats", securityMiddleware(http.HandlerFunc(statshandlers.StatsHandler()))).Methods("GET")
 	router.Handle("/v0/system/metrics", securityMiddleware(http.HandlerFunc(metricshandlers.GetSystemMetricsHandler))).Methods("GET")
 	router.Handle("/v0/global/leaderboard", securityMiddleware(http.HandlerFunc(metricshandlers.GetGlobalLeaderboardHandler))).Methods("GET")

backend/setup/setup.go

@@ -48,12 +48,27 @@ type Economics struct {
 	Betting          Betting          `yaml:"betting"`
 }
 
+type FrontendCharts struct {
+	SigFigs int `yaml:"sigFigs"`
+}
+
+type Frontend struct {
+	Charts FrontendCharts `yaml:"charts"`
+}
+
 type EconomicConfig struct {
 	Economics Economics `yaml:"economics"`
+	Frontend  Frontend  `yaml:"frontend"`
 }
 
 var economicConfig *EconomicConfig
 
+const (
+	minChartSigFigs     = 2
+	maxChartSigFigs     = 9
+	defaultChartSigFigs = 4
+)
+
 // load once as a singleton pattern
 var once sync.Once
 
@@ -88,3 +103,23 @@ func mustLoadEconomicsConfig() {
 func init() {
 	mustLoadEconomicsConfig()
 }
+
+// ChartSigFigs returns a clamped significant figures value for chart formatting.
+func ChartSigFigs() int {
+	if economicConfig == nil {
+		mustLoadEconomicsConfig()
+	}
+
+	sigFigs := economicConfig.Frontend.Charts.SigFigs
+	if sigFigs == 0 {
+		sigFigs = defaultChartSigFigs
+	}
+
+	if sigFigs < minChartSigFigs {
+		return minChartSigFigs
+	}
+	if sigFigs > maxChartSigFigs {
+		return maxChartSigFigs
+	}
+	return sigFigs
+}

backend/setup/setup.yaml

@@ -18,3 +18,7 @@ economics:
       initialBetFee: 1
       buySharesFee: 0
       sellSharesFee: 0
+
+frontend:
+  charts:
+    sigFigs: 4

backend/setup/setup_test.go

@@ -28,3 +28,30 @@ func TestLoadEconomicsConfigSingleton(t *testing.T) {
 		t.Fatalf("EconomicsConfig should return the singleton instance")
 	}
 }
+
+func TestChartSigFigsClamping(t *testing.T) {
+	cfg, err := LoadEconomicsConfig()
+	if err != nil {
+		t.Fatalf("unexpected error loading config: %v", err)
+	}
+
+	original := cfg.Frontend.Charts.SigFigs
+	t.Cleanup(func() {
+		cfg.Frontend.Charts.SigFigs = original
+	})
+
+	cfg.Frontend.Charts.SigFigs = 1
+	if got := ChartSigFigs(); got != minChartSigFigs {
+		t.Fatalf("expected minChartSigFigs (%d), got %d", minChartSigFigs, got)
+	}
+
+	cfg.Frontend.Charts.SigFigs = 99
+	if got := ChartSigFigs(); got != maxChartSigFigs {
+		t.Fatalf("expected maxChartSigFigs (%d), got %d", maxChartSigFigs, got)
+	}
+
+	cfg.Frontend.Charts.SigFigs = 6
+	if got := ChartSigFigs(); got != 6 {
+		t.Fatalf("expected unclamped value 6, got %d", got)
+	}
+}

frontend/src/components/layouts/activity/bets/BetsActivity.jsx

@@ -50,7 +50,7 @@ const BetsActivityLayout = ({ marketId, refreshTrigger }) => {
                     <div className="sp-cell-num text-xs sm:text-sm text-gray-300">{bet.amount}</div>
 
                     {/* After (sm+) */}
-                    <div className="hidden sm:block sp-cell-num text-gray-300">{bet.probability.toFixed(3)}</div>
+                    <div className="hidden sm:block sp-cell-num text-gray-300">{bet.probability.toFixed(2)}</div>
 
                     {/* Placed (stack full width on xs) */}
                     <div className="col-span-3 sm:col-span-1 text-right sp-subline">

frontend/src/components/layouts/marketprojection/MarketProjectionLayout.jsx

@@ -52,7 +52,7 @@ const MarketProjectionLayout = ({ marketId, amount, direction }) => {
                 </button>
                 {error && <div className="error-message">Error: {error}</div>}
                 {projectionData && (
-                    <p>New Market Probability: {projectionData.projectedprobability.toFixed(4)}</p>
+                    <p>New Market Probability: {projectionData.projectedprobability.toFixed(2)}</p>
                 )}
                 {!projectionData && !error && !loading && (
                     <p>Click "Update Projection" to see the new market probability after this trade.</p>

frontend/src/components/tables/MarketTable.jsx

@@ -41,7 +41,7 @@ const MarketRow = ({ marketData }) => (
       </Link>
     </td>
     <td className='px-6 py-4 whitespace-nowrap text-sm text-gray-300'>
-      {marketData.lastProbability.toFixed(3)}
+      {marketData.lastProbability.toFixed(2)}
     </td>
     <td className='px-6 py-4 text-sm font-medium text-gray-300'>
       <Link

frontend/src/components/tables/MarketTables.jsx

@@ -42,7 +42,7 @@ const MarketRow = ({ marketData }) => (
       </Link>
     </td>
     <td className='px-6 py-4 whitespace-nowrap text-sm text-gray-300'>
-      {marketData.lastProbability.toFixed(3)}
+      {marketData.lastProbability.toFixed(2)}
     </td>
     <td className='px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300'>
       <Link